9.4 KiB

Raw Blame History

Force Directed Graphs

This lesson covers how to make a force directed graph which will visualize relationships between various nodes. In it we will learn about the following:

Creating a physics based force that will center nodes
Creating a physics based force that make the nodes repel each other
Creating a physics based force that will link the nodes to show their relationship

Describe a Force Directed Graph

A force directed graph is a graph that is affected by various forces (e.g. gravity, repulsion, etc). It can be extremely useful when setting up graphs of relationships

Describe how to set up a graph of relationships

Display

We're going to have a list of nodes representing people and display them as circles
We're going to have a list of links representing connections between people and display them as lines

Physics

We're going to have a gravitational force at the center of the svg that draws all nodes towards it
We're going to have repulsive forces on each node so that they don't get too close each other
We're going to have link forces that connect each of the nodes so that they don't repel each other too much

Set up the HTML

Pretty standard index.html file, but we'll need two <g> elements:

One to contain the nodes (people - circles)
One to contain the links (relationships - lines)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://d3js.org/d3.v5.min.js"></script>
    </head>
    <body>
        <svg>
            <g id="nodes"></g>
            <g id="links"></g>
        </svg>
        <script src="app.js" charset="utf-8"></script>
    </body>
</html>

Set up styling for nodes and links

Create an app.css file for our circles (nodes/people) and lines (links/relationships)

circle {
    fill: red;
    r: 5;
}

line {
    stroke: grey;
    stroke-width: 1;
}

Don't forget to link to it in your index.html file!

<head>
    <link rel="stylesheet" href="app.css">
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

Set up svg

At the top of our app.js file, add the following:

var WIDTH = 300;
var HEIGHT = 200;

d3.select("svg")
    .attr("width", WIDTH)
    .attr("height", HEIGHT);

If we open up index.html in Chrome and look at Elements in the dev tools, we should see this:

Add data for people

Let's create an array of people objects at the bottom of app.js:

var nodesData =  [
    {"name": "Charlie"},
    {"name": "Mac"},
    {"name": "Dennis"},
    {"name": "Dee"},
    {"name": "Frank"},
    {"name": "Cricket"}
];

Add data for relationships

Now let's create the relationships by adding the following array to the bottom of app.js. NOTE that the attributes must be source and target in order for D3 to do its magic

var linksData = [
    {"source": "Charlie", "target": "Mac"},
    {"source": "Dennis", "target": "Mac"},
    {"source": "Dennis", "target": "Dee"},
    {"source": "Dee", "target": "Mac"},
    {"source": "Dee", "target": "Frank"},
    {"source": "Cricket", "target": "Dee"}
];

Add circles to the svg

Add the following to the bottom of app.js:

var nodes = d3.select("#nodes")
    .selectAll("circle")
    .data(nodesData)
    .enter()
    .append("circle");

This will create circles for each element in our nodesData array. Our dev tools should look like this:

Add lines to the svg

Add the following to the bottom of app.js:

var links = d3.select("#links")
    .selectAll("line")
    .data(linksData)
    .enter()
    .append("line");

This will create lines for each element in our linksData array. Our dev tools should look like this:

Create simulation

Now we'll generate a simulation by adding the following to the bottom of app.js:

d3.forceSimulation()

Note that this simply creates a simulation, but doesn't specify how the simulation should run. Let's tell it what data to act on by modifying the previous line of code:

d3.forceSimulation()
    .nodes(nodesData) // add this line

Specify how the simulation affects the visual elements

At this point, our visualization still looks the same as before.

Let's have our simulation affect the circles/lines that we created

The simulation runs "ticks" which run very quickly
Each time a new "tick" occurs, you can update the visual elements. This allows our simulation to animate
D3 will calculate and tack on positional data to our regular data so that we can make use of it

Add the following to the bottom of app.js:

d3.forceSimulation()
    .nodes(nodesData)
    .on("tick", function(){
        nodes.attr("cx", function(datum) { return datum.x; })
            .attr("cy", function(datum) { return datum.y; });

        links.attr("x1", function(datum) { return datum.source.x; })
            .attr("y1", function(datum) { return datum.source.y; })
            .attr("x2", function(datum) { return datum.target.x; })
            .attr("y2", function(datum) { return datum.target.y; });
    });

Now our circles distance themselves from each other a little bit, but this is just a side effect of not having any forces attached to them. We'll add forces next.

Create forces

Let's create a centering force at the center of the screen that pulls all elements towards it. Adjust the code we added in the previous step so it looks like below. NOTE, we only add .force("center_force", d3.forceCenter(WIDTH / 2, HEIGHT / 2)) to the previous code:

d3.forceSimulation()
    .nodes(nodesData)
    .force("center_force", d3.forceCenter(WIDTH / 2, HEIGHT / 2)) // add this line
    .on("tick", function(){
        nodes.attr("cx", function(datum) { return datum.x; })
            .attr("cy", function(datum) { return datum.y; });

        links.attr("x1", function(datum) { return datum.source.x; })
            .attr("y1", function(datum) { return datum.source.y; })
            .attr("x2", function(datum) { return datum.target.x; })
            .attr("y2", function(datum) { return datum.target.y; });
    });

Now our circles are pulled towards the center of the SVG element:

Create a force on each of the nodes so that they repel each other. Just like in the last step, we only add .force("charge_force", d3.forceManyBody()) to the previous code:

d3.forceSimulation()
    .nodes(nodesData)
    .force("center_force", d3.forceCenter(WIDTH / 2, HEIGHT / 2))
    .force("charge_force", d3.forceManyBody()) //add this line
    .on("tick", function(){
        nodes.attr("cx", function(datum) { return datum.x; })
            .attr("cy", function(datum) { return datum.y; });

        links.attr("x1", function(datum) { return datum.source.x; })
            .attr("y1", function(datum) { return datum.source.y; })
            .attr("x2", function(datum) { return datum.target.x; })
            .attr("y2", function(datum) { return datum.target.y; });
    });

You'll notice that the cx/cy values for the circles change rapidly initially before finally stopping. This is because D3 is running a simulation. The center_force is trying to reach a state of equilibrium with the charge_force. You'll even notice when you first load the page that the circles move outward from the center. This is due to the same reason.

Lastly, we'll create the links between the nodes so that they don't repel each other too much. Just like in the last step, we only add the following code to what we previously had:

.force("links", d3.forceLink(linksData).id(function(datum){
    return datum.name
}).distance(160))

Our last chunk of code should now look like this:

d3.forceSimulation()
    .nodes(nodesData)
    .force("center_force", d3.forceCenter(WIDTH / 2, HEIGHT / 2))
    .force("charge_force", d3.forceManyBody())
    .force("links", d3.forceLink(linksData).id(function(datum){ //add this
        return datum.name //add this
    }).distance(160)) //add this
    .on("tick", function(){
        nodes.attr("cx", function(datum) { return datum.x; })
            .attr("cy", function(datum) { return datum.y; });

        links.attr("x1", function(datum) { return datum.source.x; })
            .attr("y1", function(datum) { return datum.source.y; })
            .attr("x2", function(datum) { return datum.target.x; })
            .attr("y2", function(datum) { return datum.target.y; });
    });

The d3.forceLink function takes the array of links. It then uses the source and target attributes of each link data object to connect the nodes via their .name properties (as specified in the return value of the function we just wrote)
You can tack on .distance() to specify how long the links are visually between each node

Finally, our graph looks like this:

Conclusion

In this chapter we used D3 to create a graph that visualizes relationships between various nodes of data. This can be very useful in situations like graphing a friend network, showing parent/child company relationships, or displaying a company's staff hierarchy. In the next chapter we'll cover how to create a map from GeoJSON data.

9.4 KiB Raw Blame History

Force Directed Graphs

Describe a Force Directed Graph

Describe how to set up a graph of relationships

Display

Physics

Set up the HTML

Set up styling for nodes and links

Set up svg

Add data for people

Add data for relationships

Add circles to the svg

Add lines to the svg

Create simulation

Specify how the simulation affects the visual elements

Create forces

Conclusion

9.4 KiB

Raw Blame History