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) ...
Get Data Visualization with D3 4.x Cookbook - Second Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
