A simple force-directed graph

Our first example will demonstrate how to construct a force-directed graph. The online example is available at the following link:

Note

bl.ock (11.1): http://goo.gl/ZyxCej

All our force-directed graphs will start by loading data that represents a network. This example uses the data at https://gist.githubusercontent.com/d3byex/5a8267f90a0d215fcb3e/raw/ba3b2e3065ca8eafb375f01155dc99c569fae66b/uni_network.json.

The following are the contents of the file at the preceding link:

{ "nodes": [ { "name": "Mike" }, { "name": "Marcia" }, { "name": "Chrissy" }, { "name": "Selena" }, { "name": "William" }, { "name": "Mikael" }, { "name": "Bleu" }, { "name": "Tagg" }, { "name": "Bob" }, { "name": "Mona" } ], "edges": [ { "source": ...

Get D3.js: Cutting-edge Data Visualization now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.