Directed Graph Editor with D3.js

http://bl.ocks.org/rkirsling/5001347

by wslh • 13 years ago

140 21 13 years ago

bl.ocks.org

opminion• 13 years ago

I find this beautiful and pleasant to use, at least for a few nodes. At first it feels odd not to be in control of the exact location of some nodes, very much like when using Graphviz, but once you let go it becomes quite comfortable.

I wonder how well it scales for large numbers of nodes, for example when they need to be grouped, or hiding certain types of connections in order to simplify the graph in display. I am not familiar about d3.js, perhaps it already provides support for doing that?

wslh2• 13 years ago

Look at another example ( http://bl.ocks.org/mbostock/1062288 ) showing a tree layout with the possibility to collapse nodes. You can add a ton of nodes in the JSON to test how D3 handles a large number of nodes. In this example things are getting slower, but probably because of the physics involved.

I think D3 is impressive and is the best pure Javascript lib for these use cases, mainly because of the features included and because it's well supported. This is the first time that I will use D3 for a project so I don't have experience except as a lurker.

seanmcdirmid• 13 years ago

I keep hoping that someone will port an incremental version of graphviz to JavaScript.

chairmankaga2• 13 years ago

A decent performance check on D3 using canvas vs svg with up to 400k points. http://trac.osgeo.org/openlayers/wiki/Future/OpenLayersWithC...

wslh2• 13 years ago

I think is different to compare openlayers in SVG vs. Canvas to graph visualization with physics like in the directed graph sample. In the last case there is a lot of extra work that you need to do in Canvas to came up with the same effects.

Is that test taking into account different GPU accelerations for SVG like in this "old" study: http://blogs.msdn.com/b/ie/archive/2011/03/08/comparing-hard... ?

agibsonccc• 13 years ago

D3 can handle lots of nodes. I had to write something that visualized a comprehensive wordnet [1] topology branching from certain words.

This got up to over 100,000 nodes or more easily in the browser and it handled it fine.

[1] http://wordnetweb.princeton.edu/perl/webwn

omni• 13 years ago

Can I somehow replicate that using the link you provided? I've seen D3 struggle when handling more than a couple thousand nodes, so I'd be interested to see how you got it to go up to 100K.

chairmankaga2• 13 years ago

I think he only used the data from WordNet for a personal visualization, it's not integrated with the WordNet program.

saraid216• 13 years ago

It's probably worth asking what computer specs and what browser, too...

kmfrk• 13 years ago

Here are his other - potential - projects as well as an RSS feed for them:

http://bl.ocks.org/rkirsling

http://bl.ocks.org/rkirsling.rss

Project website: http://rkirsling.github.io/modallogic/.

GitHub: https://github.com/rkirsling/modallogic.

aroman• 13 years ago

This is really well thought out. I didn't have to read a single word other than the title before I intuited how to use the editor.

That's good design.

CoryG89• 13 years ago

Is the reflexivity toggle broken for anyone else. Seems that the toggle will only work once per newly created edge.

irickt• 13 years ago

Works on Chrome Canary. At first I had an extension that was interfering with the key presses.

abeiz2• 13 years ago

Reminds me of my own project I'm working on (https://logicpull.com/demo/editor/2)

amitutk• 13 years ago

Neat, how you are doing the layout of the nodes?

abeiz2• 13 years ago

The layout is just user controlled (drag&drop), but can also be organized using Graphviz, with the "Tidy Graph" button on the toolbar.

_dan• 13 years ago

Very cool. It's a little bit like playing World of Goo..

richardjordan• 13 years ago

I like this. It's very well done. Thank you for sharing this code. It allows someone like me, who is not that good with javascript to play around with what you've done, understand it and start to make changes on a playground where I know it started out working, and can backpedal when I break things.

RachelF• 13 years ago

I second this - thank you for sharing the code.

dmarusic16• 13 years ago

D3 is so very cool. And this is beautifully executed.

thomasahle• 13 years ago

I wonder how the interface could be extended to allow self-edges for vertices.

Directed Graph Editor with D3.js

Related Stories