SentenTree icon indicating copy to clipboard operation
SentenTree copied to clipboard

Published 20 hours ago • verified publisher icon twitter

How can I use this

Open etrabelsi opened this issue 7 years ago • 21 comments

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.

etrabelsi avatar Jun 15 '17 13:06 etrabelsi

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)

kristw avatar Jun 16 '17 08:06 kristw

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

  1. When install via git clone and running demo and playing around everything seems to work alright
  2. 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

eyaltrabelsi avatar Jun 16 '17 14:06 eyaltrabelsi

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.

kristw avatar Jun 16 '17 16:06 kristw

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)

eyaltrabelsi avatar Jun 16 '17 18:06 eyaltrabelsi

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"

kristw avatar Jun 16 '17 18:06 kristw

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.

eyaltrabelsi avatar Jun 17 '17 07:06 eyaltrabelsi

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>

kristw avatar Jun 20 '17 06:06 kristw

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 avatar Jul 14 '17 14:07 v4lenz

Any news on this?

v4lenz avatar Jul 25 '17 15:07 v4lenz

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>

kristw avatar Jul 25 '17 23:07 kristw

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>

v4lenz avatar Jul 26 '17 06:07 v4lenz

Is there any error in the javascript console?

kristw avatar Jul 27 '17 07:07 kristw

No there are no errors in the console.

v4lenz avatar Jul 27 '17 07:07 v4lenz

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>

kristw avatar Jul 28 '17 05:07 kristw

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

eyaltrabelsi avatar Oct 18 '17 08:10 eyaltrabelsi

Did you try the latest comment above?

kristw avatar Oct 19 '17 05:10 kristw

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>

etrabelsi avatar Oct 21 '17 15:10 etrabelsi

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

Vvvickie avatar Oct 03 '18 21:10 Vvvickie

@Vvvickie Please add header row to your data file

id	text	count

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

kristw avatar Oct 03 '18 21:10 kristw

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

Vvvickie avatar Oct 04 '18 05:10 Vvvickie

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

image

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?

darshthakkar avatar Mar 25 '19 18:03 darshthakkar