# Dynamic visualization of Graph[] on a webpage

How can we embed a dynamic version of a Graph object on a web page, similar to the one showcased on the networkx home page?

This sort of dynamic visualization can be very useful for presentations, especially if more information could be shown than just the node names by tooltips.

-
Additional examples/answers are most welcome! –  Szabolcs Apr 12 '13 at 17:56
Since this can't even be done in Mathematica, I think an equally valid question would to be: how to implement the dynamic rearrangement of vertices in Mathematica, so that it can potentially be exported as a CDF. I'm not saying I would do that, though. I like the SVG + JS approach in your self-answer too. –  Jens Apr 12 '13 at 23:26

It seems networkx uses the D3 library and the example is based on this. We can adapt that code to work with Mathematica and generate JSON output from Mathematica.

1. Save the HTML from the linked page to index.html. Change miserables.json in the source code to graph.json.

2. Generate JSON with Mathematica:

g = RandomGraph[BarabasiAlbertGraphDistribution[100, 1]]

names = VertexList[g];
groups = VertexDegree[g]; (* let's try degree-based colouring *)

Export[
"graph.json",
{
"nodes" ->
MapThread[{"name" -> #1, "group" -> #2} &, {names, groups}],
"links" -> ({"source" -> #1 - 1, "target" -> #2 - 1, "value" -> 1} &) @@@ EdgeList[g]
},
"JSON"
]

3. Open index.html.

Note: If you're using Chrome, and clicking the above image takes you to an empty page, please click the shield in the right side of the address bar an authorize the script.

Additional worked examples welcome! Please post an answer if you can show how to make something nice using this or similar tools.

-
+1 This is rather neat ;0 –  Vitaliy Kaurov Apr 12 '13 at 17:50
@VitaliyKaurov It's related to this, but that question is very vague, so I wasn't very excited about it at that time. But he's right: it would be nice to somehow make this kind of thing (interactive online graphics) more accessible for Mathematica users. Personally I know nothing about D3 or JavaScript ... I wish I had more time to learn about them. –  Szabolcs Apr 12 '13 at 17:54
Ideally this type of thing would allow a time-sequence adjustment of the graph, where new vertices and edges could be seen 'growing'. If you could expand your example to this it would be very cool. –  Cameron Murray May 20 '13 at 1:53