D3.js in Action. 3 Ed

D3.js in Action, Third Edition....1

Praise for the second edition....3

brief contents....8

contents....9

foreword....15

preface....17

acknowledgments....19

about this book....21

Who should read this book....21

How this book is organized: A road map....21

About the code....22

liveBook discussion forum....23

about the authors....24

about the cover illustration....25

Part 1 D3.js fundamentals....27

1 An introduction to D3.js....29

1.1 What is D3.js?....30

1.1.1 A need for web-accessible data visualizations....31

1.1.2 When do we use D3.js?....32

1.1.3 How D3.js works....35

1.2 The D3 ecosystem: What you need to know to get started....39

1.2.1 HTML and the DOM....39

1.2.2 Scalable Vector Graphics....40

1.2.3 Canvas and WebGL....57

1.2.4 CSS....57

1.2.5 JavaScript....58

1.2.6 Node and JavaScript frameworks....62

1.2.7 Observable notebooks....62

1.3 Data visualization best practices....63

Summary....69

2 Manipulating the DOM....70

2.1 Your first D3 visualization....71

2.2 Preparing your environment....72

2.2.1 The structure of our first D3 project....73

2.2.2 Loading D3 into a project....74

2.3 Selecting elements....76

2.4 Adding elements to a selection....79

2.5 Setting and modifying attributes....82

2.6 Setting and modifying styles....86

Summary....92

3 Working with data....94

3.1 Understanding data....96

3.1.1 Finding data....96

3.1.2 Data types....96

3.1.3 Data formats and structures....97

3.2 Preparing data....101

3.2.1 Loading a dataset into a D3 project....102

3.2.2 Formatting a dataset....103

3.2.3 Measuring a dataset....105

3.3 Binding data to DOM elements....109

3.3.1 Setting DOM attributes dynamically with data....113

3.4 Adapting data for the screen....118

3.4.1 Scales....118

3.4.2 Linear scale....121

3.4.3 Band scale....124

3.5 Adding labels to a chart....127

Summary....138

4 Drawing lines, curves, and arcs....140

4.1 Creating axes....141

4.1.1 The margin convention....143

4.1.2 Generating axes....146

4.2 Drawing a line chart....154

4.2.1 Using the line generator....156

4.2.2 Interpolating data points into a curve....158

4.3 Drawing an area....161

4.3.1 Using the area generator....161

4.3.2 Enhancing readability with labels....163

4.4 Drawing arcs....166

4.4.1 The polar coordinate system....167

4.4.2 Using the arc generator....169

4.4.3 Calculating the centroid of an arc....172

Summary....177

5 Pie and stack layouts....179

5.1 Creating pie and donut charts....182

5.1.1 Preparatory steps....182

5.1.2 The pie layout generator....185

5.1.3 Drawing the arcs....189

5.1.4 Adding labels....190

5.2 Stacking shapes....193

5.2.1 The stack layout generator....195

5.2.2 Drawing a stacked bar chart....198

5.2.3 Drawing a streamgraph....201

5.2.4 The stack order and stack offset properties....208

5.3 Adding a legend to a project....211

Summary....218

6 Visualizing distributions....220

6.1 Binning data....222

6.2 Drawing a histogram....225

6.3 Creating a pyramid chart....230

6.4 Generating box plots....233

6.4.1 Calculating quartiles with the quantile scale....234

6.4.2 Positioning multiple box plots on a chart....235

6.4.3 The point scale....237

6.4.4 Drawing a box plot....239

6.5 Comparing distributions with violin plots....243

Summary....255

Part 2 Meeting the new standards....257

7 Interactive visualizations....259

7.1 Why use interactivity?....260

7.1.1 A few best practices for interactivity....260

7.2 Filtering a visualization....261

7.2.1 Capturing user events....263

7.2.2 The classed method....264

7.2.3 Updating the data in a visualization....265

7.2.4 Creating smooth transitions....267

7.3 Revealing additional information with tooltips....270

7.3.1 Building a simple tooltip....271

7.3.2 Developing a compound tooltip....276

7.4 Animating the enter, update, and exit selections....282

7.4.1 Building a scatterplot....284

7.4.2 Filtering a scatterplot....288

7.4.3 Creating a reusable transition....293

Summary....300

8 Integrating D3 in a frontend framework....301

8.1 Approaches to using D3 in a frontend framework....303

8.2 Installing the D3 library in a React project....304

8.3 Loading data into a React project....306

8.4 A reusable approach to SVG containers....309

8.5 Allowing D3 to control a portion of the DOM....312

8.5.1 React....312

8.5.2 Angular....316

8.5.3 Svelte....318

8.6 Using D3 as a utility library....319

8.6.1 React....319

8.6.2 Angular and Svelte....326

8.6.3 Generating curves....327

8.7 Hybrid approach....333

Summary....339

9 Responsive visualizations....341

9.1 What is responsive design?....342

9.1.1 Mobile-first approach....343

9.1.2 Desktop-first approach....343

9.2 A responsive line chart....343

9.2.1 Adapting the size of the text labels....345

9.2.2 Adjusting the axes labels....346

9.2.3 Adopting a minimalistic approach....347

9.3 A responsive dashboard....349

9.3.1 Using a responsive grid....350

9.3.2 Adapting the density of information....356

9.3.3 Changing the orientation of a chart....361

9.4 Additional tips....362

Summary....366

10 Accessible visualizations....367

10.1 How people with disabilities access web content....368

10.2 Meeting the accessibility standards....368

10.2.1 Textual information....371

10.2.2 Visual information....376

10.2.3 Screen reader access....386

10.2.4 Interactions....398

10.2.5 Other considerations....402

10.2.6 Additional resources....402

Summary....406

Part 3 Intricate data visualizations....407

11 Hierarchical visualizations....409

11.1 Formatting hierarchical data....413

11.1.1 Working with a CSV file....413

11.1.2 Working with a hierarchical JSON file....416

11.2 Building a circle pack chart....420

11.2.1 Generating the pack layout....421

11.2.2 Drawing the circle pack....423

11.2.3 Adding labels....428

11.3 Building a tree chart....432

11.3.1 Generating the tree layout....433

11.3.2 Drawing the tree chart....434

11.4 Building other hierarchical visualizations....439

Summary....443

12 Network visualizations....444

12.1 Preparing network data....445

12.2 Creating an adjacency matrix....448

12.3 Drawing an arc diagram....454

12.4 Playing with forces....459

12.4.1 Running a force simulation....460

Summary....476

13 Geospatial information visualizations....478

13.1 Geographical data....480

13.1.1 GeoJSON....480

13.1.2 TopoJSON....481

13.2 Drawing a map from GeoJSON data....482

13.2.1 Choosing a projection....482

13.2.2 Improving readability with graticules....486

13.2.3 Making a choropleth map....489

13.2.4 Locating cities on a map....493

13.3 Zooming and panning....499

13.4 Adding a brushing functionality....503

13.5 Drawing a map from TopoJSON data....508

13.6 Further concepts....512

13.6.1 Tile mapping....512

13.6.2 Canvas drawing....512

13.6.3 Raster reprojection....512

13.6.4 Hexbins....512

13.6.5 Voronoi diagrams....512

13.6.6 Cartograms....514

Summary....517

Part 4 Advanced techniques....519

14 Creating a custom visualization....521

14.1 Gathering data....522

14.2 Exploring the data....525

14.3 Sketching the layout....528

14.4 Building the project skeleton....531

14.4.1 Another approach to responsive SVG containers....532

14.4.2 Creating a responsive SVG grid....536

14.5 Creating radial visualizations....539

14.5.1 Adding radial axes....539

14.5.2 Applying the force layout on a circle’s circumference....544

14.5.3 Drawing a radial area chart....552

14.5.4 Drawing a radial bar chart....555

14.6 Planning meaningful interactions....558

Summary....565

15 Rendering visualizations with Canvas....566

15.1 What is Canvas and when to use it....567

15.2 Rendering basic shapes with Canvas....568

15.2.1 The element....569

15.2.2 Line....572

15.2.3 Rectangle....573

15.2.4 Circle....574

15.2.5 Path....575

15.2.6 Text....576

15.3 Mixed-mode rendering....578

15.4 A strategy for Canvas interactions....587

Summary....595

appendix A Setting up a local development environment....597

A.1 Visual Studio Code....597

A.2 Installing and using the Live Server extension....598

appendix B Selecting a scale....601

B.1 Continuous input, continuous output....601

B.1.1 Continuous scales....603

B.1.2 Sequential scales....608

B.1.3 Diverging scales....610

B.2 Continuous input, discrete output....613

B.3 Discrete input, continuous output....614

B.4 Discrete input, discrete output....615

appendix C An overview of D3 modules....617

appendix D Exercise solutions....618

D.1 Solutions chapter 1....618

D.1.1 Build an SVG graphic....618

D.2 Solutions chapter 6....619

D.2.1 Build a pyramid chart....619

D.2.2 Append axes to the violin charts....620

D.2.3 Add the interquartile ranges and the mean values to the violin plots....621

D.3 Solutions chapter 7....621

D.3.1 Create the axis and append the circles to the scatterplot....621

D.3.2 Create a tooltip....622

D.4 Solutions chapter 8....623

D.4.1 Bar chart....623

D.4.2 Ranking badges....626

D.5 Solutions chapter 9....627

D.5.1 Change the orientation of the bar chart on mobile....627

D.6 Solutions chapter 10....629

D.6.1 Create SVG patterns....629

D.7 Solutions chapter 11....629

D.8 Solutions chapter 12....631

D.9 Solutions chapter 13....632

D.10 Solutions chapter 14....633

D.11 Solutions chapter 15....636

appendix E A very brief introduction to Svelte....638

E.1 The structure of a Svelte file....638

E.2 Passing props from a parent to a child component....639

E.3 Sending information from a child to a parent component....640

E.4 Adding rendering logic....640

E.5 Using reactive variables and functions....641

index....643

Symbols....643

Numerics....643

A....643

B....644

C....644

D....645

E....647

F....648

G....648

H....649

I....649

J....650

K....650

L....650

M....651

N....651

O....651

P....651

Q....652

R....652

S....653

T....655

U....655

V....656

W....656

X....656

Y....656

Z....656

D3.js in Action, Third Edition - back....658

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.Foreword by Andy Kirk.

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

About the reader

For web developers with HTML, CSS, and JavaScript skills.