Anne-Marie Dufour

D3.js in Action, Third Edition is a roadmap for creating brilliant and beautiful visualizations with D3.js. Like a gentle mentor, it guides you from basic charts all the way to advanced interactive visualizations like networks and maps. You’ll learn to build graphics, create animations, and set up mobile-friendly responsiveness. Each chapter contains a complete data visualization project to put your new skills into action.

The D3.js library gives users the power to develop amazing and versatile visualizations, from simple charts to intricate data interfaces. In this series of liveProjects, you’ll tackle the steep learning curve of D3.js by going hands-on to build your own amazing interactive data visualizations. You’ll work with real-world datasets, quickly mastering the building blocks of D3.js that you can easily transfer between tasks. Each liveProject in this series stands alone, or can be completed as part of a comprehensive learning experience.

In this liveProject, you’ll make use of the D3.js library to create a radial visualization of the cohorts of NASA astronauts. Radial visualizations are very popular with users as they evoke calmness and gracefulness, and the eye is naturally drawn to round shapes. This complex project will really test your D3.js skills as you create a visualization that can expertly display diverse information about each astronaut, like the total time spent in space, or background information such as military versus civilian. To complete this stunning visualization, you will need to generate arcs and display labels over a path, use D3 scales to generate a legend, and animate shapes to create a rich interaction flow.

In this liveProject, you’ll use the D3.js visualization library to create a streamgraph visualization of the ethnicity of the Oscars. This visualization will explore the representation of ethnic minorities at the Academy Awards ceremony throughout its history. Once you’ve constructed your basic streamgraph, you’ll append a composite tooltip to the visualization, play around with transitions, and give consideration to making your graph responsive.

In this liveProject, you’ll explore and experiment with the D3.js library’s flexibility as you evolve a simple histogram into an intricate and interactive visualization. You’ll build visualizations to illustrate the gender pay gap in sports, expand them to include individual players, and even add special interactive visual effects.

In this liveProject, you’ll use the powerful D3.js data visualization library to build an infographic of the top songs of 2020. You’ll be working with data taken from the MRC Data Year-End Report, and develop three charts that each explore some of the core building blocks of D3.js—selections, appending elements to the DOM, scales and data binding. Finally, you’ll extend your newfound skills to developing a bubble chart from scratch, along with axes and a legend.