chapter one

1 An introduction to D3.js

 

This chapter covers

  • Understanding the role of D3.js and the philosophy behind it
  • Recognizing the tools that are 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 can support your journey as a D3.js developer

Given the plethora of data visualization tools that emerged in the past decade, one 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 will be rewarded with the ability to create not only all the traditional charts that other library offer and customize them at will, but you will also gain the freedom to get off the beaten tracks 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 is 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 long-form data stories.

In this first chapter, we will introduce D3's ecosystem and a few concepts, like SVG graphics and JavaScript object manipulation methods, that are crucial to comprehend before diving into digital data visualizations.

Note

Throughout the book, we will use the names D3.js and D3 interchangeably.

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 SVG - 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 standards expressed in D3.js

1.4 Summary

1.5 D3.js in the real world