There are many reasons why one may want to visualize hierarchical data. A popular way of doing this is to put the data into a node-link diagram, or a tree. For example, consider a file directory. There is a natural hierarchy there in the sense that folders can contain folders which can contain folders which can contain files. An example of a tree representing this hierarchical structure is pictured below.
Beyond the file directory, there are many ways that Digital Humanities projects may need to use node-link diagrams to represent a hierarchy. Something that comes to my mind immediately is a family tree of sorts that represents relationships between teachers and disciples. There’s actually a tree representing exactly this in the Mathematics and Statistics department at Carleton.
There are many tools that can be used to create tree diagrams. Other tutorials have discussed networkx for creating networks, but it is also able to create trees. However, to create visualizations meant for the web, you’ll scarcely find a better option than D3.js. D3 is powerful, and while learning any new technology is hard, there’s a certain rhythm to D3 that will make a ton of sense once you can embrace its philosophy. Let’s walk through an example of creating a tree diagram in D3.
D3.js is a web technology, and as you might have guessed from the name, it is a Javascript library. We’ve learned the two other technologies (HTML and CSS) that go with Javascript previously in the class, and that knowledge will come in handy. Specifically, to begin a D3.js project, you first need to write some HTML.
1. So let’s create a file called index.html and start typing some HTML. Using VS code, we can set this up really quickly with the help of a built-in tool called Emmet.
That’ll get some of the boilerplate code out of the way.
2. Now you want to add some more tags to get the final HTML file. You’ll also want to import the D3 library via a script tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
(^DON'T FORGET THIS! It connects the d3 library with your code)
</head>
<body>
(The following tags are used later in the visualization. It will also
help with understanding if you read up on SVGs.)
<svg width="400px" height="400px">
<g transform="translate(5, 50)">
<g class="links"></g>
<g class="nodes"></g>
</g>
</svg>
<script src="./script.js"></script>
</body>
</html>Now we want to create the script.js file that contains the code that’ll do the bulk of our visualization work. In this file, we will
3. Create the data that we will visualize.
4. Initialize a tree object in D3.
5. Assemble the nodes and links of the tree diagram.
//3.
var data = {
"name": "Asia",
"children": [
{
"name": "Vietnam",
"children": [
{
"name": "Saigon"
}
]
},
{
"name": "India",
"children": [
{
"name": "Mumbai"
}
]
}
]
}
//4.
var treeLayout = d3.tree().size([400, 200]);
var root = d3.hierarchy(data);
treeLayout(root)
//5.
d3.select("svg g.nodes")
.selectAll("circle.node")
.data(root.descendants())
.join("circle")
.classed("node", true)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 10)
d3.select("svg g.links")
.selectAll("line.link")
.data(root.links())
.join("line")
.classed("link", true)
.style("stroke", "black")
.attr('x1', function(d) {return d.source.x;})
.attr('y1', function(d) {return d.source.y;})
.attr('x2', function(d) {return d.target.x;})
.attr('y2', function(d) {return d.target.y;});Let’s go through some of the main ideas within this code that we put in the script.js file. For 3., we are effectively just creating the data. Specifically, we can see that I am creating a hierarchy of locations using JSON format. For 4., we begin the process of D3 by creating a tree object that we can manipulate later on. For 5., we then connect the data, the D3 tree object we just created, and the index.html file we created earlier.
If you now open the index.html file, it should open in a browser and you should see the following tree.
You created a tree in D3! Except you’re missing some labels.
6. Let’s add the labels to the node by adding a little bit more code to the bottom of our script.js file.
d3.select("svg g.nodes")
.selectAll("text.label")
.data(root.descendants())
.join("text")
.classed("label", true)
.attr("x", function(d) { return d.x + 15;})
.attr("y", function(d) { return d.y + 10;})
.text(d => {
return d.data.name;
});Now we get this updated tree if we refresh our index.html page.
This is but the beginning though! Here are some additional resources to help you develop your D3 abilities in the realm of creating tree diagrams.
A more detailed tutorial on creating D3 hierarchies beyond the tree diagrams we discussed
A different flavor of tree diagrams than the ones shown in this tutorial.
4 thoughts on “Creating Hierarchies as Tree Diagrams in D3.js”
Comments are closed.
I like this tutorial a lot. It gives me an idea of what types of analyses I can do. I think you could include some more screenshots or screen recordings of the actual coding experience. I liked the first video, but felt a little lost in the middle of the tutorial. A clear indication of all the files we need to make and how they interact would make it very easy to parse as a reader. Otherwise, the examples were nice and simple enough to follow but also to see how it could be used for more.
It’s a very interesting tool to learn about! Your tutorial is very detailed and easy to follow along (I don’t need to install other packages or stuff). I think this will be helpful in visualizing genealogy trees or evolving of objects (e.g. different languages) in DH. I wonder how to assemble the nodes and links with larger data (since in the tutorial it’s already formatted).
I really enjoyed following through your tutorial. I haven’t worked with D3 at all before and always find it interesting to learn new libraries because there is so much out there. Your tutorial was quite easy to follow in terms of getting the results you did but it would be nice to see more of how you coded and and what the lines of code so. Overall, it is a well done tutorial.
Going through your tutorial was really interesting! I like this method of visualization, and the sources of additional information were fun to read through as well. The amount of tools available once you have an understanding of a few coding languages is amazing, and seeing what they make possible gives me a bit more motivation to continue learning about computer science.