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 By Example now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.