O'Reilly logo

Expert Data Visualization by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Setting up the force simulation

With the d3-force module, we can simulate forces between the nodes and the links of a graph. To use this module, we define a simulation object and add a number of forces to that object. When the simulation is started, D3 will apply the defined forces, and we can use the results from that to render a force layout on screen. A note before we dive into the details: working with forces isn't really an exact science. The way your layout will eventually look often requires a lot of experimentation with different forces and different force configurations.

For our example, let's start by looking at the simulation definition we used for this visualization:

var simulation = d3.forceSimulation()  .force("link", d3.forceLink().id(function(d) ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required