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