Graph visualization with D3.js

D3.js provides us with the d3.layout.force() function, which uses the Force Atlas layout algorithm and helps us to visualize our graph. See Chapter 3, Getting to Grips with Visualization, for instructions of how to create D3.js visualizations.

First, we need to define the CSS style for the nodes, links, and node labels:

<style> 
 
.link { 
  fill: none; 
  stroke: #666; 
  stroke-width: 1.5px; 
} 
 
.node circle { 
  fill: steelblue; 
  stroke: #fff; 
  stroke-width: 1.5px; 
} 
 
.node text { 
  pointer-events: none; 
  font: 10px sans-serif; 
} 
</style> 

Then, we need to refer to the d3.js library:

<script src="http://d3js.org/d3.v3.min.js"></script> 

Then, we need to define the width and height for the svg container and include it in the body tag:

var width = 1100, 
    height = 800 
 
var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); ...