Comments (21)
kristw
commented on September 4, 2024
1
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>
from sententree.
kristw
commented on September 4, 2024
1
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>from sententree.
kristw
commented on September 4, 2024
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)
from sententree.
eyaltrabelsi
commented on September 4, 2024
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
from sententree.
kristw
commented on September 4, 2024
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.
from sententree.
eyaltrabelsi
commented on September 4, 2024
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)
from sententree.
kristw
commented on September 4, 2024
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"
from sententree.
eyaltrabelsi
commented on September 4, 2024
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.
from sententree.
v4lenz
commented on September 4, 2024
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
from sententree.
v4lenz
commented on September 4, 2024
Any news on this?
from sententree.
kristw
commented on September 4, 2024
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>from sententree.
v4lenz
commented on September 4, 2024
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>
from sententree.
kristw
commented on September 4, 2024
Is there any error in the javascript console?
from sententree.
v4lenz
commented on September 4, 2024
No there are no errors in the console.
from sententree.
eyaltrabelsi
commented on September 4, 2024
Why was this closed there still no working example ?:/
from sententree.
kristw
commented on September 4, 2024
Did you try the latest comment above?
from sententree.
etrabelsi
commented on September 4, 2024
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>
from sententree.
Vvvickie
commented on September 4, 2024
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
from sententree.
kristw
commented on September 4, 2024
@Vvvickie Please add header row to your data file
id text count
https://github.com/twitter/SentenTree/blob/master/demo/data/demo.tsv
from sententree.
Vvvickie
commented on September 4, 2024
@kristw It works now. Thank you for your reply!
from sententree.
darshthakkar
commented on September 4, 2024
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?
from sententree.
Related Issues (9)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sententree.