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.

  • $\begingroup$ Additional examples/answers are most welcome! $\endgroup$
    – Szabolcs
    Apr 12, 2013 at 17:56
  • $\begingroup$ 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. $\endgroup$
    – Jens
    Apr 12, 2013 at 23:26

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.

  • 1
    $\begingroup$ @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. $\endgroup$
    – Szabolcs
    Apr 12, 2013 at 17:54
  • $\begingroup$ 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. $\endgroup$ May 20, 2013 at 1:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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