D3.js in Action

D3.js in Action, Third Edition
Praise for the second edition
brief contents
contents
foreword
preface
acknowledgments
about this book
Who should read this book
How this book is organized: A road map
About the code
liveBook discussion forum
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
index
Symbols
Numerics
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
D3.js in Action, Third Edition - back