Take the 2-minute tour ×
Mathematica Stack Exchange is a question and answer site for users of Mathematica. It's 100% free, no registration required.

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.

share|improve this question
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
add comment

1 Answer 1

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 *)
      "nodes" -> 
       MapThread[{"name" -> #1, "group" -> #2} &, {names, groups}],
      "links" -> ({"source" -> #1 - 1, "target" -> #2 - 1, "value" -> 1} &) @@@ EdgeList[g]
  3. Open index.html.

enter image description here

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.

share|improve this answer
+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
add comment

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.