Data Visualization with D3.js Cookbook

Building a force-directed graph

At last, we will show how to implement a force-directed graph, the classic application of D3 force layout. However, we believe with all the techniques and knowledge you have gained so far from this chapter implementing force-directed graph should feel quite straightforward.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter11/force-directed-graph.html.

How to do it...

In this recipe we will visualize the flare data set as a force-directed tree (tree is a special type of graph):

<script type="text/javascript"> var w = 1280, h = 800, z = d3.scale.category20c(); var force = d3.layout.force() .size([w, h]); var svg = d3.select("body").append("svg") ...