back · main · about · writing · notes · reading · d3 · now · contact


Force directed graph: basics
18 Feb 2017 · 806 words

To create a D3 force directed graph you really only need three things:

There’s also some things that are optional, but real useful:

Great. Let’s learn more.

Nodes

What are nodes? They’re an array of objects.

Nodes can be anything. Here’s three examples:

Nodes are whatever data objects that you want to visualise. We’ll eventually represent each node with a circle on our basic force directed graph.

Typically you’re interested in how the nodes relate to each other. Perhaps a whole bunch of them are linked and you’d like to explore this. Maybe you’re just curious to see if you can find any patterns in your data.

Whatever your reason, the force directed graph deals with nodes really well. It’s designed for it.

You can define some sample nodes yourself really easily in JavaScript. Here’s an example:

var nodes_data =  [
    {"id": "Travis"},
    {"id": "Rake"},
    {"id": "Diana"},
    {"id": "Rachel"},
    {"id": "Shawn"},
    {"id": "Emerald"}
]

The most common way of defining nodes is to put them in another file and read it in using d3.csv or d3.json . This is the approach taken in this example.

Simulation

The simulation controls the movement of nodes.

The simulation is the engine of the force directed graph. It decides when movement starts and stops. It determines the position of each node. It decides how fast each node is travelling.

Inside the simulation there’s a number of variables it keeps track of.

These include the “energy” of the graph at any particular moment in time, referred to as alpha. Alpha starts high and decreases over time, and when alpha goes past a certain number, the graph stops moving.

The simulation also holds where each node is and where they are going. It also tracks the forces that are being applied to each node.

Luckily, understanding the simulation is easy.

The simulation is run in a series of discrete steps called ticks. In each tick the simulation updates its variables, like the position and velocity of its nodes, or its alpha value.

Forces

Forces are what drive movement of the graph. You apply forces to the simulation to instruct it how to arrange the nodes.

These forces are highly customisable. That’s what’s so good about them.

Here’s some example forces:

At the start the simulation has no forces applied to it. This means that if you try running the simulation without adding any forces to it, the nodes will sit there and not move. Then you’ll feel frustrated and question why the stupid thing isn’t working.

Node attributes

Each node doesn’t have to contain only a name. You can include other information if you like, which are called node attributes.

Node attributes are really useful. You can use them to customise your graph however you please.

Here’s the nodes_data from earlier with a “sex” attribute:

var nodes_data =  [
    {"id": "Travis", "sex": "M"},
    {"id": "Rake", "sex": "M"},
    {"id": "Diana", "sex": "F"},
    {"id": "Rachel", "sex": "F"},
    {"id": "Shawn", "sex": "M"},
    {"id": "Emerald", "sex": "F"}
]

Node attributes allows us to do fun things, like colour all males in blue and all females in red, or make all male nodes twice the size of the female nodes.

The possibilities are constrained only by your imagination and your sense of style.

Links capture relationships in your data. These could be anything from friendships between people, to cables between poles, to citations between academics.

Links are usually represented by the lines between circles. Here’s an example of some links:

var links_data = [
    {"source": "Travis", "target": "Rake"},
    {"source": "Diana", "target": "Rake"},
    {"source": "Diana", "target": "Rachel"},
    {"source": "Rachel", "target": "Rake"},
    {"source": "Rachel", "target": "Shawn"},
    {"source": "Emerald", "target": "Rachel"}
]

They’re not hard to understand.

Summary

You now have the basics down.  Congratulations!

I’ll see you in the next article, where we’ll sink our teeth into a working example.


Hope you found that useful! Click here to view to the rest of the force directed graph series.


back · main · about · writing · notes · reading · d3 · now · contact