How can I use this #1

etrabelsi · 2017-06-15T13:50:14Z

Hi,
I cant manage to use that cool tool.
I have installed it , now what? even if i clone the repo and run the demo it doesnt seem to work like in the site.

kristw · 2017-06-16T08:36:41Z

Hi,

To help you further, could you help me understand your situation a bit better?
What did you see when running locally?
What OS, node version, npm/yarn version are you using?
How did you install it? (recommend yarn install over npm install)

eyaltrabelsi · 2017-06-16T14:50:40Z

Thx for answering.
I am using MAC OS node version v7.9.0 , using npm 4.2.0 . Now i understand my issue better.

When install via git clone and running demo and playing around everything seems to work alright
But I want to use it in simpler form like your example (my end goal is wrapper for jupyter installed via npm install sententree) it doesnt recognize SentenTreeVis and SentenTreeBuilder How should it be imported in vanila js

<!DOCTYPE html>
<html>
<body>
<div id="vis"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script>
  d3.tsv("why_lost.tsv", function(error, data) {
    const model = new SentenTreeBuilder()
      .buildModel(data);
    new SentenTreeVis('#vis')
      // change the number to limit number of output
      .data(model.getRenderedGraphs(3))
      .on('nodeClick', node => {
        console.log('node', node);
      });
  });
</script>
</body>
</html>

thx

kristw · 2017-06-16T16:45:24Z

You have to include SentenTree javascript file in the html.
When importing via <script> tag. The SentenTree variable should be available globally and the classes (SentenTreeBuilder, SentenTreeVis) are nested under it.

<!DOCTYPE html>
<html>
<body>
<div id="vis"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
+ <script src="https://rawgit.com/twitter/SentenTree/master/dist/sententree.min.js"></script>
<script>
  d3.tsv("why_lost.tsv", function(error, data) {
+    const model = new SentenTree.SentenTreeBuilder()
      .buildModel(data);
+    new SentenTree.SentenTreeVis('#vis')
      // change the number to limit number of output
      .data(model.getRenderedGraphs(3))
      .on('nodeClick', node => {
        console.log('node', node);
      });
  });
</script>
</body>
</html>

Please give it a try and let me know.

eyaltrabelsi · 2017-06-16T18:38:05Z

Those are the errors left:

sententree.min.js:1 Uncaught TypeError: Cannot read property 'uniq' of undefined
at Object.defineProperty.value (sententree.min.js:1)
Uncaught ReferenceError: SentenTree is not defined
at Object. (lost.html:9)
at _.call (d3.min.js:4)
at XMLHttpRequest.e (d3.min.js:7)

kristw · 2017-06-16T18:40:52Z

Umm, SentenTree has 5 dependencies. (See package.json)

You already include d3, but you will also need these packages.

"d3kit": "^3.2.0",
"heap": "^0.2.6",
"lodash": "^4.17.4",
"webcola": "^3.3.0"

eyaltrabelsi · 2017-06-17T07:48:54Z

Thx for the patience :)
Didnt seem to work for me.
In order to use it cleanly on Jupiter notebook i need it to be serverless code, so i think i will just reimplement your paper thx.

kristw · 2017-06-20T06:32:41Z

What I meant was you will need to add <script> tags for all these libs too.

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3kit/3.2.0/d3kit.min.js"></script>
<script src="https://rawgit.com/qiao/heap.js/master/lib/heap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>

v4lenz · 2017-07-14T14:00:46Z

Here is my code:

<!DOCTYPE html>
<body>
<div id="vis"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3kit/3.2.0/d3kit.min.js"></script>
<script src="https://rawgit.com/qiao/heap.js/master/lib/heap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>
<script src="https://rawgit.com/twitter/SentenTree/master/dist/sententree.min.js"></script>
<script>
d3.tsv("goal.tsv", function(error, data) {
    const model = new SentenTree.SentenTreeBuilder().buildModel(data);
    new SentenTree.SentenTreeVis('#vis')
    .data(model.getRenderedGraphs(3))
    .on('nodeClick', node => {
        console.log('node', node);
    });
});
</script>
</body>
</html>

and I get the following error message in console:

sententree.min.js:1 Uncaught TypeError: h.default is not a constructor
    at o (sententree.min.js:1)
    at new t (sententree.min.js:1)
    at t.value (sententree.min.js:3)
    at index.html:12
    at Object.<anonymous> (d3.min.js:7)
    at _.call (d3.min.js:4)
    at XMLHttpRequest.e (d3.min.js:7)

What am I doing wrong?

EDIT: Perhaps webpack is messing with the heap library? I tried to load the non minified SentenTree.js and this seems to be happening at line 1654 when creating the heap in the function expandSeqTree

Also, I'm not sure I'm loading a file in the right format

v4lenz · 2017-07-25T15:35:43Z

Any news on this?

kristw · 2017-07-25T23:09:46Z

I just add another bundle that bundle all dependencies. Let's give the code below a try.

<!DOCTYPE html>
<html>
<body>
<div id="vis"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script src="https://rawgit.com/twitter/SentenTree/master/dist/sententree-standalone.min.js"></script>
<script>
d3.tsv("goal.tsv", function(error, data) {
    const model = new SentenTree.SentenTreeBuilder().buildModel(data);
    new SentenTree.SentenTreeVis('#vis')
    .data(model.getRenderedGraphs(3))
    .on('nodeClick', node => {
        console.log('node', node);
    });
});
</script>
</body>
</html>

v4lenz · 2017-07-26T06:58:21Z

It doesn't work either for me.
In the DOM now I see:

<div id="vis" style="line-height: 0;">
    <div class="d3kit-chart-root" style="display: inline-block; position: relative; line-height: 0; width: 0px; height: 0px;">
        <svg class="d3kit-plate" width="0" height="0" style="position: absolute; top: 0px; left: 0px;">
            <g transform="translate(0.5,0.5)">
                <g class="link-layer"></g>
                <g class="node-layer"></g>
            </g>
        </svg>
    </div>
</div>

kristw · 2017-07-27T07:22:04Z

Is there any error in the javascript console?

v4lenz · 2017-07-27T07:35:19Z

No there are no errors in the console.

kristw · 2017-07-28T05:46:33Z

I found the issue. goal.tsv and other sample tsv data has no header row, so d3.tsv parse it incorrectly. I have included a new file demo.tsv. The code below has been tested and should work.

<!DOCTYPE html>
<html>
<body>
<div id="vis"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script src="https://rawgit.com/twitter/SentenTree/master/dist/sententree-standalone.min.js"></script>
<script>
d3.tsv("demo.tsv", function(error, data) {
    data.forEach(d => {
        d.count = +d.count;
    })
    const model = new SentenTree.SentenTreeBuilder().buildModel(data);
    new SentenTree.SentenTreeVis('#vis')
    .data(model.getRenderedGraphs(3))
    .on('nodeClick', node => {
        console.log('node', node);
    });
});
</script>
</body>
</html>

eyaltrabelsi · 2017-10-18T08:56:38Z

Why was this closed there still no working example ?:/

kristw · 2017-10-19T05:49:28Z

Did you try the latest comment above?

etrabelsi · 2017-10-21T15:01:04Z

Consider it close this thing is working for me:


<!DOCTYPE html>
<html>
<head><meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding"></head>
<body>
<div id="vis"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script src="https://rawgit.com/twitter/SentenTree/master/dist/sententree-standalone.min.js"></script>
<script>
d3.tsv("https://raw.githubusercontent.com/twitter/SentenTree/master/demo/data/demo.tsv", function(error, data) {
    data.forEach(d => {
        d.count = + d.count;
    })
    const model = new SentenTree.SentenTreeBuilder().buildModel(data);
    new SentenTree.SentenTreeVis('#vis')
    .data(model.getRenderedGraphs(3))
    .on('nodeClick', node => {
        console.log('node', node);
    });
});
</script>
</body>
</html>

Vvvickie · 2018-10-03T21:03:06Z

Consider it close this thing is working for me:


<!DOCTYPE html>
<html>
<head><meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding"></head>
<body>
<div id="vis"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script src="https://rawgit.com/twitter/SentenTree/master/dist/sententree-standalone.min.js"></script>
<script>
d3.tsv("https://raw.githubusercontent.com/twitter/SentenTree/master/demo/data/demo.tsv", function(error, data) {
    data.forEach(d => {
        d.count = + d.count;
    })
    const model = new SentenTree.SentenTreeBuilder().buildModel(data);
    new SentenTree.SentenTreeVis('#vis')
    .data(model.getRenderedGraphs(3))
    .on('nodeClick', node => {
        console.log('node', node);
    });
});
</script>
</body>
</html>

I have the same problem with etrabelsi. The final code etrabelsi offers also works for me.
However, when I change the data into another one, it brokes and nothing shows in the html.
I try to console the data and find the structure changes like this:

[0 … 99]
0: {1: "1", "": "", different and better.i have owned both kindle 1 and kindle 2, so i'm already committed to the basic idea: e-ink reading in a slim form factor with excellent connectivity to a large selection of books and subscriptions.: "i have come to rely on my kindle experience, and it has seriously enhanced my reading.", count: NaN}
1: {1: "1", "": "", different and better.i have owned both kindle 1 and kindle 2, so i'm already committed to the basic idea: e-ink reading in a slim form factor with excellent connectivity to a large selection of books and subscriptions.: "the dx was not an obvious upgrade for me, but two …ge: the larger screen, and the native pdf reader.", count: NaN}
2: {1: "1", "": "", different and better.i have owned both kindle 1 and kindle 2, so i'm already committed to the basic idea: e-ink reading in a slim form factor with excellent connectivity to a large selection of books and subscriptions.: "i now have the dx in my hands, and can report pros…s: pros: -- the larger screen is a definite plus.", count: NaN}

Here is my code:

<!DOCTYPE html>
<html>
<head><meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding"></head>
<body>
<div id="vis"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script src="https://rawgit.com/twitter/SentenTree/master/dist/sententree-standalone.min.js"></script>
<script>
    d3.tsv("/sentenTree/SentenTree/demo/data/kindle.tsv", function(error, data) {
        console.log(data)
        data.forEach(d => {
            d.count = + d.count;
    })
        const model = new SentenTree.SentenTreeBuilder().buildModel(data);
        new SentenTree.SentenTreeVis('#vis')
            .data(model.getRenderedGraphs(3))
            .on('nodeClick', node => {
            console.log('node', node);
    });
    });
</script>
</body>
</html>

What should I do TAT

kristw · 2018-10-03T21:08:37Z

@Vvvickie Please add header row to your data file

id	text	count

https://github.com/twitter/SentenTree/blob/master/demo/data/demo.tsv

Vvvickie · 2018-10-04T05:49:55Z

@kristw It works now. Thank you for your reply!

darshthakkar · 2019-03-25T18:15:47Z

Hi, I am getting the error "Uncaught SyntaxError: Unexpected token { " when trying to run simple.html

I am also facing some difficulty with js relating to the files in node_modules. Can you give a step by step method of running the simple.html code?

kristw closed this as completed Oct 18, 2017

kristw reopened this Oct 19, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How can I use this #1

How can I use this #1

etrabelsi commented Jun 15, 2017

kristw commented Jun 16, 2017 •

edited

Loading

eyaltrabelsi commented Jun 16, 2017

kristw commented Jun 16, 2017

eyaltrabelsi commented Jun 16, 2017

kristw commented Jun 16, 2017

eyaltrabelsi commented Jun 17, 2017

kristw commented Jun 20, 2017

v4lenz commented Jul 14, 2017 •

edited

Loading

v4lenz commented Jul 25, 2017

kristw commented Jul 25, 2017 •

edited

Loading

v4lenz commented Jul 26, 2017 •

edited

Loading

kristw commented Jul 27, 2017

v4lenz commented Jul 27, 2017

kristw commented Jul 28, 2017 •

edited

Loading

eyaltrabelsi commented Oct 18, 2017

kristw commented Oct 19, 2017

etrabelsi commented Oct 21, 2017 •

edited

Loading

Vvvickie commented Oct 3, 2018

kristw commented Oct 3, 2018

Vvvickie commented Oct 4, 2018

darshthakkar commented Mar 25, 2019 •

edited

Loading

How can I use this #1

How can I use this #1

Comments

etrabelsi commented Jun 15, 2017

kristw commented Jun 16, 2017 • edited Loading

eyaltrabelsi commented Jun 16, 2017

kristw commented Jun 16, 2017

eyaltrabelsi commented Jun 16, 2017

kristw commented Jun 16, 2017

eyaltrabelsi commented Jun 17, 2017

kristw commented Jun 20, 2017

v4lenz commented Jul 14, 2017 • edited Loading

v4lenz commented Jul 25, 2017

kristw commented Jul 25, 2017 • edited Loading

v4lenz commented Jul 26, 2017 • edited Loading

kristw commented Jul 27, 2017

v4lenz commented Jul 27, 2017

kristw commented Jul 28, 2017 • edited Loading

eyaltrabelsi commented Oct 18, 2017

kristw commented Oct 19, 2017

etrabelsi commented Oct 21, 2017 • edited Loading

Vvvickie commented Oct 3, 2018

kristw commented Oct 3, 2018

Vvvickie commented Oct 4, 2018

darshthakkar commented Mar 25, 2019 • edited Loading

kristw commented Jun 16, 2017 •

edited

Loading

v4lenz commented Jul 14, 2017 •

edited

Loading

kristw commented Jul 25, 2017 •

edited

Loading

v4lenz commented Jul 26, 2017 •

edited

Loading

kristw commented Jul 28, 2017 •

edited

Loading

etrabelsi commented Oct 21, 2017 •

edited

Loading

darshthakkar commented Mar 25, 2019 •

edited

Loading