Getting started with D3.js force simulations

Image for post
Image for post

This article talks you through the decisions made developing 2 force simulations.

Family Tree
SEO Tree

They look and behave very differently but the core logic is the same.

Step 1 — The Basics

Force simulations are very different to other d3 charts , so if this is your first time I’d recommend a quick look at Shirley Wu and her tip to watch Jim Vallandingham’s Abusing the Force.

Step 2 — The Data

All network charts have two key data elements, nodes (the circles) and links (the lines — sometimes called edges).

Nodes : nodes must have unique ids:

then you can add as many custom variables as you like:

Links: Links must have a valid node id as a source and a target

These can be text or numbers. You can add other variables if you want.

Step 3— Basic Code Structure

Assuming you’ve drawn an svg with a stored width and height there are 5 key stages. (for more info on the update process, click here)

a) the simulation.

This is basic functionality.

center — pulls all nodes to the center
charge — nodes repel from each other which prevents overlap
link — specifies that id is the link variable

b) define links group and set link properties (position comes later):

c) nodes

define nodes group and set properties.

c) append the data to the simulation

c) and finally, define the tick functionality and restart:

Step 4 — Tweaking the simulation to fit

Now you’ve got the basics when a brief comes in you need to tailor the simulation to suit.

FAMILY TREE

A node for each family member

A link for each of their family links — parent or child.

Nodes cluster around a central smaller ‘family node’.

Here’s the simulation:

x and y — pull nodes towards the centre with y stronger so nodes fill the landscape screen better.
charge — nodes repel from each other which prevents overlap (default strength is -30 so I’ve made this a bit stronger)
link — specify that id is the link variable
collide-specify a ‘repel radius’ of 10 x node radius — to prevent overlap and leave space for label

HIERARCHICAL TREE

Three tiers of hierarchical data — Title , Category and Sub-Category .

The client wanted the tiers to fan out in the appearance of a tree.

Node behaviour depended on the hierarchical tier.

Tier 1 — Title
nodes fixed to a set position around the ‘trunk’

Tier 2 — Category

here’s the simulation:

x and y — pulls all nodes to the center (gentler than force centre)
charge — nodes repel from each other which prevents overlap
link — specify that id is the link variable — distance added to keep them close
collide-specify a ‘repel radius’ of 10 x node radius — to prevent overlap and leave space for labels

Tier 3

The simulation here is the same as the Tier 2 simulation

EXCEPT

x and y are the co-ordinates of the Tier 2 level node.

Step 5 — Adding and Optimising

Once you’ve got the core simulation running correctly you can start:

  • adding other data specific elements — for example, images, fills, strokes, stroke width.
  • altering the individual properties to optimise performance — more information here.

Step 6 — Conclusions

This is only a start.

A quick Google or Observable search will show you many different ways people have used force simulations to fit their specific needs.

This is a great tool for starters — recommended by Mike Bostock of course!

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store