

Directed Graph Editor with D3.js - wslh
http://bl.ocks.org/rkirsling/5001347

======
opminion
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?

~~~
chairmankaga
A decent performance check on D3 using canvas vs svg with up to 400k points.
[http://trac.osgeo.org/openlayers/wiki/Future/OpenLayersWithC...](http://trac.osgeo.org/openlayers/wiki/Future/OpenLayersWithCanvas)

~~~
wslh
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...](http://blogs.msdn.com/b/ie/archive/2011/03/08/comparing-hardware-
accelerated-svg-across-browsers-with-santa-s-workshop.aspx) ?

------
richardjordan
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
I second this - thank you for sharing the code.

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

[http://bl.ocks.org/rkirsling](http://bl.ocks.org/rkirsling)

[http://bl.ocks.org/rkirsling.rss](http://bl.ocks.org/rkirsling.rss)

Project website:
[http://rkirsling.github.io/modallogic/](http://rkirsling.github.io/modallogic/).

GitHub:
[https://github.com/rkirsling/modallogic](https://github.com/rkirsling/modallogic).

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

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

------
agibsonccc
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](http://wordnetweb.princeton.edu/perl/webwn)

~~~
omni
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.

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

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

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

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

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

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

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

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

