1 An introduction to D3.js

 

This chapter covers

  • Understanding the role of D3.js and the philosophy behind it
  • Recognizing the tools used in combination with D3.js to create data visualizations
  • Creating and styling Scalable Vector Graphics (SVG) with code
  • Learning how data visualization best practices support your journey as a D3.js developer

Given the plethora of data visualization tools that emerged in the past decade, you might wonder if learning D3 is worth the trouble. Let us be clear: learning D3 is a wise investment. Although the learning curve can be steep and require dedication, you’ll not only be rewarded with the ability to create all the traditional charts that other libraries offer and customize them at will but also gain the freedom to get off the beaten track and create visualizations that are truly tailored to your data and audience.

D3.js is the library behind most of the exciting data visualizations on the web. It’s the tool of choice when you want total creative and technical freedom over your data visualizations, whether you make interactive prototypes for research, responsive data dashboards, or scrollytelling data stories such as “Why Budapest, Warsaw, and Lithuania split themselves in two” by Maarten Lambrechts, as shown in figure 1.1.

Figure 1.1 D3 developers have access to a wide range of data representations, such as maps. Here’s an example by Maarten Lambrechts (https://pudding.cool/2019/04/eu-regions/).
figure

1.1 What is D3.js?

1.1.1 A need for web-accessible data visualizations

1.1.2 When do we use D3.js?

1.1.3 How D3.js works

1.2 The D3 ecosystem: What you need to know to get started

1.2.1 HTML and the DOM

1.2.2 Scalable Vector Graphics

1.2.3 Canvas and WebGL

1.2.4 CSS

1.2.5 JavaScript

1.2.6 Node and JavaScript frameworks

1.2.7 Observable notebooks

1.3 Data visualization best practices

Summary