Building a force-directed graph

Finally, we will show how to implement a force-directed graph, the classic application of D3 force. 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-v2/blob/master/src/chapter11/force-directed-graph.html .

How to do it...

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

<script type="text/javascript"> 
    var w = 1280, 
            h = 800, 
            r = 4.5, 
            colors = d3.scaleOrdinal(d3.schemeCategory20c); 
 
    var force = d3.forceSimulation() 
            .velocityDecay(0.8) 
            .alphaDecay(0) 
            .force("charge", d3.forceManyBody()) 
            .force("x", d3.forceX(w / 2)) 
            ...