D3.js in Action, Third Edition

✍ Scribed by Elijah Meeks, Anne-Marie Dufour

• Publisher: Manning Publications Co.
• Year: 2024
• Tongue: English
• Leaves: 658
• Edition: 3
• Category: Library

✦ Synopsis

Create stunning web-based data visualizations with D3.js.

This totally-revised new edition of D3.js in Action guides you from simple charts to powerful interactive graphics. Chapter-by-chapter you’ll assemble an impressive portfolio of visualizations—including intricate networks, maps, and even a complete customized visualization layout. Plus, you'll learn best practices for building interactive graphics, animations, and integrating your work into frontend development frameworks like React and Svelte.

In D3.js in Action, Third Edition you will learn how to

Set up a local development environment for D3
Include D3 in web development projects, including Node-based web apps
Select and append DOM elements
Size and position elements on screen
Assemble components and layouts into creative data visualizations

D3.js in Action, Third Edition has been extensively revised for D3.js version 7, and modern best practices for web visualizations. Its brand new chapters dive into interactive visualizations, cover responsiveness for dataviz, and show you how you can improve accessibility.

About the Technology
With D3.js, you can create sophisticated infographics, charts, and interactive data visualizations using standard frontend tools like JavaScript, HTML, and CSS. Granting D3 its VIS Test of Time award, the IEEE credited this powerful library for bringing data visualization to the mainstream. You’ll be blown away by how beautiful your results can be!

About the Book
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.

What's Inside
Fully revised for D3.js v7
Includes 12 complete projects
Create data visualizations with SVG and canvas
Combine D3 with React, Svelte, and Angular

✦ Table of Contents

copyright
contents
Praise for the second edition
D3.js in Action
dedication
foreword
preface
acknowledgments
about this book
about the authors
about the cover illustration
Part 1 D3.js fundamentals
1 An introduction to D3.js
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
2 Manipulating the DOM
2.1 Your first D3 visualization
2.2 Preparing your environment
2.2.1 The structure of our first D3 project
2.2.2 Loading D3 into a project
2.3 Selecting elements
2.4 Adding elements to a selection
2.5 Setting and modifying attributes
2.6 Setting and modifying styles
3 Working with data
3.1 Understanding data
3.1.1 Finding data
3.1.2 Data types
3.1.3 Data formats and structures
3.2 Preparing data
3.2.1 Loading a dataset into a D3 project
3.2.2 Formatting a dataset
3.2.3 Measuring a dataset
3.3 Binding data to DOM elements
3.3.1 Setting DOM attributes dynamically with data
3.4 Adapting data for the screen
3.4.1 Scales
3.4.2 Linear scale
3.4.3 Band scale
3.5 Adding labels to a chart
4 Drawing lines, curves, and arcs
4.1 Creating axes
4.1.1 The margin convention
4.1.2 Generating axes
4.2 Drawing a line chart
4.2.1 Using the line generator
4.2.2 Interpolating data points into a curve
4.3 Drawing an area
4.3.1 Using the area generator
4.3.2 Enhancing readability with labels
4.4 Drawing arcs
4.4.1 The polar coordinate system
4.4.2 Using the arc generator
4.4.3 Calculating the centroid of an arc
5 Pie and stack layouts
5.1 Creating pie and donut charts
5.1.1 Preparatory steps
5.1.2 The pie layout generator
5.1.3 Drawing the arcs
5.1.4 Adding labels
5.2 Stacking shapes
5.2.1 The stack layout generator
5.2.2 Drawing a stacked bar chart
5.2.3 Drawing a streamgraph
5.2.4 The stack order and stack offset properties
5.3 Adding a legend to a project
6 Visualizing distributions
6.1 Binning data
6.2 Drawing a histogram
6.3 Creating a pyramid chart
6.4 Generating box plots
6.4.1 Calculating quartiles with the quantile scale
6.4.2 Positioning multiple box plots on a chart
6.4.3 The point scale
6.4.4 Drawing a box plot
6.5 Comparing distributions with violin plots
Part 2 Meeting the new standards
7 Interactive visualizations
7.1 Why use interactivity?
7.1.1 A few best practices for interactivity
7.2 Filtering a visualization
7.2.1 Capturing user events
7.2.2 The classed method
7.2.3 Updating the data in a visualization
7.2.4 Creating smooth transitions
7.3 Revealing additional information with tooltips
7.3.1 Building a simple tooltip
7.3.2 Developing a compound tooltip
7.4 Animating the enter, update, and exit selections
7.4.1 Building a scatterplot
7.4.2 Filtering a scatterplot
7.4.3 Creating a reusable transition
8 Integrating D3 in a frontend framework
8.1 Approaches to using D3 in a frontend framework
8.2 Installing the D3 library in a React project
8.3 Loading data into a React project
8.4 A reusable approach to SVG containers
8.5 Allowing D3 to control a portion of the DOM
8.5.1 React
8.5.2 Angular
8.5.3 Svelte
8.6 Using D3 as a utility library
8.6.1 React
8.6.2 Angular and Svelte
8.6.3 Generating curves
8.7 Hybrid approach
9 Responsive visualizations
9.1 What is responsive design?
9.1.1 Mobile-first approach
9.1.2 Desktop-first approach
9.2 A responsive line chart
9.2.1 Adapting the size of the text labels
9.2.2 Adjusting the axes labels
9.2.3 Adopting a minimalistic approach
9.3 A responsive dashboard
9.3.1 Using a responsive grid
9.3.2 Adapting the density of information
9.3.3 Changing the orientation of a chart
9.4 Additional tips
10 Accessible visualizations
10.1 How people with disabilities access web content
10.2 Meeting the accessibility standards
10.2.1 Textual information
10.2.2 Visual information
10.2.3 Screen reader access
10.2.4 Interactions
10.2.5 Other considerations
10.2.6 Additional resources
Part 3 Intricate data visualizations
11 Hierarchical visualizations
11.1 Formatting hierarchical data
11.1.1 Working with a CSV file
11.1.2 Working with a hierarchical JSON file
11.2 Building a circle pack chart
11.2.1 Generating the pack layout
11.2.2 Drawing the circle pack
11.2.3 Adding labels
11.3 Building a tree chart
11.3.1 Generating the tree layout
11.3.2 Drawing the tree chart
11.4 Building other hierarchical visualizations
12 Network visualizations
12.1 Preparing network data
12.2 Creating an adjacency matrix
12.3 Drawing an arc diagram
12.4 Playing with forces
12.4.1 Running a force simulation
13 Geospatial information visualizations
13.1 Geographical data
13.1.1 GeoJSON
13.1.2 TopoJSON
13.2 Drawing a map from GeoJSON data
13.2.1 Choosing a projection
13.2.2 Improving readability with graticules
13.2.3 Making a choropleth map
13.2.4 Locating cities on a map
13.3 Zooming and panning
13.4 Adding a brushing functionality
13.5 Drawing a map from TopoJSON data
13.6 Further concepts
13.6.1 Tile mapping
13.6.2 Canvas drawing
13.6.3 Raster reprojection
13.6.4 Hexbins
13.6.5 Voronoi diagrams
13.6.6 Cartograms
Part 4 Advanced techniques
14 Creating a custom visualization
14.1 Gathering data
14.2 Exploring the data
14.3 Sketching the layout
14.4 Building the project skeleton
14.4.1 Another approach to responsive SVG containers
14.4.2 Creating a responsive SVG grid
14.5 Creating radial visualizations
14.5.1 Adding radial axes
14.5.2 Applying the force layout on a circle’s circumference
14.5.3 Drawing a radial area chart
14.5.4 Drawing a radial bar chart
14.6 Planning meaningful interactions
15 Rendering visualizations with Canvas
15.1 What is Canvas and when to use it
15.2 Rendering basic shapes with Canvas
15.2.1 The element
15.2.2 Line
15.2.3 Rectangle
15.2.4 Circle
15.2.5 Path
15.2.6 Text
15.3 Mixed-mode rendering
15.4 A strategy for Canvas interactions
appendix A Setting up a local development environment
A.1 Visual Studio Code
A.2 Installing and using the Live Server extension
appendix B Selecting a scale
B.1 Continuous input, continuous output
B.1.1 Continuous scales
B.1.2 Sequential scales
B.1.3 Diverging scales
B.2 Continuous input, discrete output
B.3 Discrete input, continuous output
B.4 Discrete input, discrete output
appendix C An overview of D3 modules
appendix D Exercise solutions
D.1 Solutions chapter 1
D.1.1 Build an SVG graphic
D.2 Solutions chapter 6
D.2.1 Build a pyramid chart
D.2.2 Append axes to the violin charts
D.2.3 Add the interquartile ranges and the mean values to the violin plots
D.3 Solutions chapter 7
D.3.1 Create the axis and append the circles to the scatterplot
D.3.2 Create a tooltip
D.4 Solutions chapter 8
D.4.1 Bar chart
D.4.2 Ranking badges
D.5 Solutions chapter 9
D.5.1 Change the orientation of the bar chart on mobile
D.6 Solutions chapter 10
D.6.1 Create SVG patterns
D.7 Solutions chapter 11
D.8 Solutions chapter 12
D.9 Solutions chapter 13
D.10 Solutions chapter 14
D.11 Solutions chapter 15
appendix E A very brief introduction to Svelte
E.1 The structure of a Svelte file
E.2 Passing props from a parent to a child component
E.3 Sending information from a child to a parent component
E.4 Adding rendering logic
E.5 Using reactive variables and functions