Directed Graph Editor with D3.js | Hacker News Reader

Directed Graph Editor with D3.js

bl.ocks.org

140 pointswslh21 comments

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?

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

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... ?

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.

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

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.

I second this - thank you for sharing the code.

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.

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.

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

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

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.

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

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

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

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

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

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

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

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

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

Reply on news.ycombinator.com