Dynamic visualization of Graph[] on a webpage

Question

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.

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 *)
   
   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.