Graph visualization with D3.js

D3.js provides us with the d3.layout.force() function that use the Force Atlas layout algorithm and help us to visualize our graph. Refer to Chapter 3, Data Visualization, for instructions on how to create D3.js visualizations.

1. Firstly, 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>

2. Then, we need to refer the d3js library.

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

3. Then, we need to define the width and height parameters for the svg container and include into the body tag.

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

4. Now, we define the properties of the force layout such as gravity, distance, and size.

   var...