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 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 developer

D3.js is behind nearly all the most innovative and exciting information visualizations. D3, which stands for Data-Driven Documents, is a brand name but also a class of applications that have been offered on the web in one form or another for years. We can use this library to build an extended variety of data-driven projects, from simple bar charts to dynamic maps to intricate explorations of space and time. D3 is the tool of choice when you want to have total creative and technical freedom over your data visualizations, whether you build prototypes for research, extensive data dashboards at a top tech company, or innovative data scrollytelling pages for the web.

1.1 What is D3.js

D3 is an open-source JavaScript library created in 2011 by Mike Bostock to generate dynamic and interactive data visualizations for the web. Although many new data visualization libraries have been introduced in the past few years, they often use D3 under the hood. This is because D3 is extremely flexible and powerful.

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