Introduction to Data Visualisations with D3: Select and Append

01 Mar 2019

Part of my MSc Data Science course is related to the creation of data visualisations, and D3.js is a prime example of a powerful library that enables you to have full control over the process. In this article, we'll be looking at how to get started with D3, and by the end of it, we'll have some circles on the screen! (yay).

Here's the video for this article!

Project setup

Go ahead and create a new folder, and inside of it, we'll want two files - index.html and app.js:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>D3.js</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="app.js" type="module"></script>
</body>
</html>

I'm electing to use no build systems for this, so I'd recommend starting the project with the http-server package from node:

$ npm install http-server -g

# From your working directory:
$ http-server .

This will start a local HTTP server which serves our content. Navigate to http://localhost:8080 or the port displayed inside of your command line to see this in action.

Appending items to the DOM

Our first objective is to use D3 to append an svg to the DOM. This allows us to draw vector shapes, lines, arcs, and much more to the canvas. A typical SVG that contains one circle and rect may look like this:

<svg width="640" height="480" background-color="blue">
    <rect width="100%" height="100%" fill="gray" />
    <circle cx="315" cy="240" r="40" stroke="white" stroke-width="30" fill="orange" />
</svg>

In our example, we've hard coded everything, but when dealing with dynamic data we don't have the same luxuries. This is where D3 comes in! Let's use D3 to select the body tag and append an svg with the width and height similar to the above:

const width = 640;
const height = 480;

const body = d3.select('body');

body
    .append('svg')
    .attr('width', width)
    .attr('height', height);

Selections in D3 allow us to query an item from the DOM based on a CSS selector, and use that to chain future D3 methods such as append. Using this declarative style, we can imagine that our DOM should now have the SVG that we expected.

So, we've got our SVG - how do we append something to the svg element? Well, as the appended SVG is returned as a selection query, we can simply store this in a variable and append to that:

const svg = body
    .append('svg')
    .attr('width', width)
    .attr('height', height);

const rect = svg
    .append('rect')
    .attr('width', '100%')
    .attr('height', '100%')
    .attr('fill', 'gray');

Next up, we need to append a circle to this SVG. This is done in a similar process to above:

const circle = svg
  .append('circle')
  .attr('cx', 315)
  .attr('cy', 240)
  .attr('r', 40)
  .attr('stroke', 'white')
  .attr('stroke-width', 30)
  .attr('fill', 'orange');

Conclusion

At this point you should be able to recognise the power of D3.js for data visualisation. We've seen how we can select elements from the DOM and append new elements to that selection. Next up, we'll look at how to make our visualisations more dynamic with the data and enter methods.

JavaScript