Creating Data Visualizations With Type Safety: D3.js & Typescript

This article explores using D3.js, a powerful JavaScript library for building data visualizations, along with TypeScript to create interactive visual representations of data.

While D3.js is written in JavaScript, we’ll be using TypeScript in this tutorial. TypeScript offers better support for working with data and data types compared to plain JavaScript.

We’ll start by setting up a basic boilerplate project, then add data and build out a fully interactive visualization example. The code will be hosted on CodePen for easy experimentation. Each example runs in the browser, so you don’t need to install anything locally. You’ll also be able to fork the pens and modify the code.

Here’s what we’ll cover:

• Creating Data Visualizations With Type Safety: D3.js & Typescript
  • Creating and Exporting a Boilerplate Project
  • Adding Visualization Data to D3
  • Binding Data to Graphics
  • Interacting with Visualizations
  • Conclusion

Creating and Exporting a Boilerplate Project

Make sure the JavaScript pane is set to TypeScript, then add D3 as a dependency by clicking the gear icon in the top right.

Here’s an example of some basic setup code:

import * as d3 from "d3";

const svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

svg.append("text")
   .attr("x", 100)
   .attr("y", 100)
   .text("Hello D3.js");

svg.append("circle")
   .attr("r", 30)
   .attr("cx", 60)
   .attr("cy", 50);

We import the D3 library, then append an SVG element to the body. We add some text and a circle to have some basic graphics on the page. This gives us a base to build upon.

Adding Visualization Data to D3

To take full advantage of D3, we need to incorporate data into our visualizations. In this example, we’ll load CSV data and use it to generate a scatter plot.

import * as d3 from "d3";

const margin = {top: 10, right: 30, bottom: 30, left: 60};
const width = 460 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

const svg = d3.select("body")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv")
  .then(data => {

    const x = d3.scaleLinear()
      .domain([3, 9])
      .range([0, width]);

    const y = d3.scaleLinear()
      .domain([0, 9])
      .range([height, 0]);

    svg.append("g")
       .attr("transform", `translate(0,${height})`)
       .call(d3.axisBottom(x));

    svg.append("g")
       .call(d3.axisLeft(y));

    svg.selectAll("circle")
       .data(data)
       .join("circle")
         .attr("cx", d => x(d.Sepal_Length))
         .attr("cy", d => y(d.Petal_Length))
         .attr("r", 5);
  });

After importing D3, we set up the dimensions and margins for our visualization area. We append the SVG element and a g group element to the body.

Next, we load the CSV data from a URL using d3.csv. Once the data is loaded, we:

1. Create the x and y scales using d3.scaleLinear
2. Append the x and y axis elements to the SVG
3. Bind the data to circle elements, setting their cx, cy, and r attributes

This generates a simple scatter plot with points corresponding to the Sepal Length and Petal Length values in the data.

Binding Data to Graphics

The code for adding the scatter plot data points may seem a bit complex, but it follows the core concept of binding data to graphic elements in D3. The general process is:

1. Use .selectAll to specify the graphic element type to bind to the data
2. Use .data to provide the data array
3. Use .join to connect the data to the graphic elements, dynamically adding/removing elements as needed

Then we specify how the data values map to the graphic element properties like position, color, size etc. In the example above:

• .selectAll("circle") selects circle elements
• .data(data) provides the data array
• .join("circle") binds the data to circle elements, adding/removing as needed
• .attr("cx", ...) maps the Sepal Length value to the x position
• .attr("cy", ...) maps the Petal Length value to the y position
• .attr("r", 5) sets the circle radius to 5

Interacting with Visualizations

To demonstrate D3’s interactive capabilities, let’s add the ability to remove data points from the scatter plot one-by-one:

// ... previous code

let circles = svg.selectAll("circle");

d3.select("body")
  .append("button")
    .text("Remove Point")
    .on("click", removePoint);

function removePoint() {
  const circle = circles.nodes().pop(); // Remove last circle
  if (circle) circle.remove(); // Remove from DOM if not undefined
  circles = circles.nodes(); // Bind remaining circles
}

We start by selecting all the circle elements and storing them in the circles variable. Then we append a button to the body and attach a click event listener that calls the removePoint function.

In removePoint, we:

1. Get all the current circle nodes using circles.nodes()
2. Remove and return the last circle node using pop()
3. If the returned circle is not undefined, remove it from the DOM with circle.remove()
4. Re-bind the remaining circle nodes to the circles selection

When you click the button, the last data point will be removed from the scatter plot thanks to D3’s built-in transition animations.

Conclusion

In this tutorial, we learned how to set up a D3 project with TypeScript and create interactive, data-driven visualizations. While the examples were relatively simple, they demonstrate core D3 concepts like binding data to graphic elements and creating transitions. With D3’s powerful capabilities, you can build engaging, highly customized data visualizations for the web.