Learn D3.js Create Stunning Interactive Web Visualizations with D3.js v7 and Modern JavaScript (Helder da Rocha)（Z-Library）

Page 1

(This page has no text content)

Page 2

Learn D3.js Second Edition Create Stunning Interactive Web Visualizations with D3.js v7 and Modern JavaScript Helder da Rocha

Page 3

Learn D3.js Second Edition Copyright © 2026 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. Portfolio Director: Sunith Shetty Relationship Lead: Nilesh Kowadkar Project Manager: Yash Basil Content Engineer: Nathanya Dias Technical Editor: Seemanjay Ameriya Indexer: Hemangini Bari Production Designer: Aparna Bhagat Growth Lead: Merlyn M Shelley First published: March 2019 Second edition: June 2026 Production reference: 1230626 Published by Packt Publishing Ltd. Grosvenor House 11 St Paul’s Square Birmingham B3 1RB, UK. ISBN 978-1-83763-686-0 www.packtpub.com

Page 4

Foreword I'm in Nice, France... And I hear there is a beautiful cathedral nearby, looking like a palace from a fantasy land. It is six minutes from where I'm staying, so I walk there. At the gate it says “Russian Cathedral”. It was built in the early 1900s, near the place where Nicholas Alexandrovich, heir to the Russian throne, died at merely 21 years old. The future Tsar who never became a Tsar. While I'm there, admiring the onion domes, Orthodox icons, and architecture that seems to belong in Moscow rather than on the Mediterranean coast, I think about how strange curiosity can be. A Russian prince dies in France. A cathedral gets built. More than a century later, a Brazilian software developer visits it. Curiosity connects distant things, and somehow that makes me think of my friend, Helder da Rocha, the author of this book. Helder is the most “Renaissance” man I have ever met. He learned Russian by repeating audio lessons while driving to work. Then he traveled across Russia to explore the country and feed his curiosity. He bought an old Russian accordion — a Bayan — and learned to play it. Later, after reading about a newly discovered pterosaur, he studied the missing parts, built a full skeleton, and went on to create museum-quality replicas displayed around the world. People spend their lives searching for focus. Helder found his long ago: he focuses on things he can learn, build, and share. He wrote his first full Java course in 1996, and a generation of Brazilians learned Java from his material. But Helder is not merely a Java developer. In the late 90s, while teaching Web programming, he was also learning Italian and reading Dante. The result was his prose translation of the Divine Comedy, published on a site using the latest HTML, CSS, JavaScript, and Java techniques of the time. And always, Helder shared what he learned. Curiosity led him many places, but generosity made him bring others along. He has a rare dedication to teaching and to finding the smoothest path through complex subjects, removing unnecessary friction until difficult ideas feel approachable, even inviting. Which brings us to this book. It is about D3.js, JavaScript, data, SVG, interaction, and the details that turn information into something people can see, explore, and understand. But it is also, in every sense, a book only Helder could have written. It comes from someone who sees software as a craft, visual explanation as a language, and teaching as one of the best ways to understand a subject deeply. Inside, you will find hundreds of beautiful, interactive D3.js examples. You will learn the technology, yes, but also the art behind it: how to think visually about data, how to build explanations that invite exploration, and how code can become a bridge between precision and imagination.

Page 5

If D3.js has ever felt powerful but intimidating, you are in good hands. I hope you enjoy the book as much as I did. More importantly, I hope it gives you what Helder has always known how to offer: a way to turn curiosity into learning, learning into building, and building into something you can make your own. Enjoy the journey, Bruno Souza Java Champion, known as the JavaMan

Page 6

Contributors About the author Helder da Rocha is a software engineer, author, and instructor with decades of experience in Java, JavaScript, HTML, and data visualization. A pioneer in web development education in Brazil, he has published numerous books, courses, and tutorials since the 1990s. His passion for visual storytelling and clean code has made him a respected figure in the D3 community. Helder also has a background in visual arts, with permanent museum exhibits, and frequently teaches and speaks at conferences across Latin America. I would like to thank my wife, Ana Carolina, and my daughters, Marina and Helena, for their patience, inspiration, and support during the long hours I spent writing this book. I am also deeply grateful to my friend and colleague Bruno Souza, who kindly accepted my invitation to write the Foreword despite his travels and already busy schedule. My thanks also go to the Packt team, especially Himani Dewan for inviting me to write this second edition; Rohit Rajkumar, Aishwarya Mohan, Shagun Saini, Srinidhi Ram, Hemangi Lotlikar, and Debolina Acharyya for their contributions during the early stages of the project; and Nilesh Kowadkar, Yash Basil, and especially Nathanya Dias for their patience, encouragement, attention, and commitment to this project, even when it took longer than expected. Finally, I must also thank the researchers and public institutions that authorized or made data publicly available for the examples used in this book, as well as the creators of D3.js and the GitHub community that actively maintains it, since this book would not exist without them.

Page 7

About the reviewer MD. Sajib Hossain Khan is a Lead Software Engineer with 11+ years of experience building scalable, high-performance web applications. He currently leads a frontend team and, over his career, has led five different frontend teams. His core stack includes JavaScript, TypeScript, React, and Next.js. He also builds advanced D3.js visualizations— interactive dashboards, network/force-directed graphs, and custom analytics that turn complex data into clear insights. Recently, he has been working on AI-powered web development, including the Model Context Protocol (MCP), agent-assisted UX, MCP apps, AI-first product experiences, and LLM-powered workflows.

Page 8

Preface xvii Free Benefits with Your Book xxiii How to Unlock xxiv Part 1: Getting Started with D3 1 Data-driven documents 3 What is D3? 3 A JavaScript library 4 A toolkit for interactive web-based data visualizations 4 How does D3 work? 4 Using D3 5 Setting up a development environment for D3 6 Choosing an IDE 6 Setting up a project folder 7 Using the code examples 8 Alternative development environments 9 Hello, world! 10 Adding the SVG container 11 Drawing a dot with SVG 12 Setting up an HTML page to use D3 12 Drawing a dot with D3 13 Adding more data 13 Updating data 14 Animated transitions 15 Exploring D3’s modules 16 Summary 17 2 Essential JavaScript for D3 (Online) 19 3 Essential SVG for D3 (Online) 21 Table of Contents

Page 9

Table of Contentsviii 4 Quick Start 23 Creating a static bar chart 23 Step 1: Start with a sketch and create a prototype 24 Step 2: Refactoring the SVG structure: using groups 27 Step 3: Converting to D3 28 Step 4: Adding bars and labels 30 Step 5: Debugging your code 31 Step 6: Using scales 33 Step 7: Adding colors 37 Step 8: Using object data 38 Step 9: Formatting text and sorting 40 Exercises 41 Using external data 41 Step 10: Refactoring the code 42 Step 11: Loading an external data file 42 Step 12: Extracting selected data from an external source 43 Exercises 45 Updating the chart 45 Step 13: More refactoring 45 Step 14: Adding more data 47 Step 15: Creating an interactive panel 49 Step 16: Adding animations and delays 51 Exercises 52 Separating scripts, styles, and HTML 52 Extra: drawing a map with polygons 55 Summary 55 Part 2: Core D3 5 Loading and Parsing Data 59 Fetching resources 59 Fetching and parsing text formats 61 Fetching binary data 62 Working with tabular data strings 62 Using row functions 62 Parsing tabular data strings 64 Tidy and wide data formats 67 Converting arrays into tabular data strings 68 Fetching multiple data sources 69 Exercises 71 Online tutorial: creating a data-driven visualization – part 1 72 Summary 73 6 Selections and Data Binding 75 Selecting 75 Global selections 76 Nested selections 79 Setting attributes and styles 80 Callback functions 83 Filters 85

Page 10

Table of Contents ix Appending and removing elements 85 Joining 87 The update selection 88 Appending from an enter selection 90 Removing from an exit selection 91 Bind, join, and update 92 Controlling separate join steps 96 Key functions and binding order 98 One-to-one data binding 100 Exercises 100 Other methods 101 Calling functions in a selection chain 101 Node ordering and detached elements 103 Debugging 105 Online tutorial: creating a data-driven visualization – part 2 107 Summary 108 7 Working with Data 109 Tools for data manipulation 109 Sample data 110 Selecting minimum and maximum values 111 Sorting and selecting elements 113 Adding values 115 Obtaining statistical information 116 Set operations 116 Common operations for iterables 118 Transforming data 119 Binary search tools 121 Exercises 123 Internationalization tools 123 Number formatting 123 Number format specifiers 124 Date/time parsing and formatting 125 Date-time format specifiers 126 Exercises 127 Tools for data generation 127 Generating sequences 128 Generating random numbers 129 Generating intermediate values 132 Blurring data 134 Generating dates and time intervals 136 Exercises 138 Data binning and histograms 138 What are bins? 139 Creating bins 140 Making a histogram 142 Exercises 143 Grouping and nesting data 143 Transforming from wide to tidy 144 Grouping tools 145 Online tutorial: creating a heatmap table 150 Summary 151 8 Axes 153 Creating axes 154 Axis configuration 156 Changing tick size 157 Changing and formatting tick values 159 Updating scales 160

Page 11

Table of Contentsx Styling an axis 162 Using an axis 164 Exercises 166 Cartesian axes 166 Creating simple Cartesian axes 166 Labels 167 Using Cartesian axes 168 Adding a Cartesian grid 170 Axes for a complete Cartesian system 171 Exercise 173 Radial axes 173 Creating radial axes 173 Using radial axes 175 Reusable composite axes 176 Summary 177 9 Scales 179 What are scales? 179 Continuous scales 180 Linear scales 183 Exponential scales 185 Logarithmic scales 186 Time scales 189 Exercises 190 Interpolated scales 191 Sequential scales 191 Diverging scales 192 Discrete scales 193 Quantize scale 195 Quantile scale 196 Threshold scale 196 Ordinal scale 197 Band scale 198 Point scale 200 Exercises 201 Online tutorial: creating a scatterplot – part 1 201 Summary 202 10 Colors 205 Using colors in web graphics 206 Using color spaces 207 Manipulating color spaces 209 Using color objects 213 Color space interpolation 215 Exercises 218 Using color schemes 219 Discrete color schemes 219 Interpolated color schemes 223 Exercises 226 Online tutorial: creating a scatterplot – part 2 226 Summary 227

Page 12

Table of Contents xi 11 Creating Line and Area Charts 229 Shape generators 229 Path strings 230 Shape generator functions 231 Line charts 232 Drawing lines 232 Preparing data 234 Line function configuration 235 Creating a multi-series line chart 236 Debugging shape generators 239 Exercises 240 Area charts 241 Drawing areas 241 Creating a multi-series area chart 244 Exercises 245 Curve functions 246 Exercises 248 Radial line and area charts 248 Drawing radial lines 249 Drawing radial areas 251 Creating multi-series radial charts 254 Exercise 255 Symbols 255 Online tutorials: visualizing global warming 259 Summary 261 12 Creating Pies and Stacks 263 Layout generators 263 Arcs and pie charts 264 Creating arcs 265 Configuring arc styles 267 Finding the centroid 269 Using the pie layout generator 270 Online tutorial: comparing GDPs with a pie chart 273 Exercises 274 Stacked charts 274 Creating a stacked data array 275 Preparing a dataset for stacking 278 Creating a stacked bar chart 282 Creating a stacked area chart 283 Setting the stacking order 283 Setting the stacking offset 285 Online tutorial: transatlantic slave trade stacked area chart 286 Exercises 286 Canvas rendering 287 The d3.path() context object 288 Custom symbols with d3.path() 289 Rendering shapes in Canvas 289 Rendering a line chart using Canvas 289 Exercises 291 Summary 292

Page 13

Table of Contentsxii 13 Transitions and Animation 293 Timers 294 Delaying an operation with a timeout 295 Executing an animation at the default frame rate 295 Repeating operations at a custom frame rate 296 Exercises 297 Creating simple transitions 297 Using transitions 297 Basic dynamics 299 Easing 300 Tweening and triggering changes 301 CSS transitions 303 Using custom tweens 304 Tweening multiple styles, attributes, and text 305 Life cycle events and synchronization 307 Exercises 310 Controlling multiple transitions 310 Concurrent transitions 310 Named transitions 313 Chained transitions 313 Text transitions 314 Reusing transition configurations 316 Pausing and resuming a transition 316 Exercises 317 Animations 318 Animating a line chart 318 Using SVG animations 319 Using CSS animations 322 Animating a line on a Canvas 324 Exercises 326 Racing bar chart: a step-by-step tutorial 327 Summary 327 14 Events and Interactivity 329 Handling events 330 Finding the pointer's coordinates 331 Controlling event propagation 332 Enabling or disabling pointer events 333 Preventing a default event 334 Dispatching custom events 335 Using interactive behaviors 335 Dragging and dropping objects 336 The drag-and-drop mechanism in D3 337 Drag and drop configuration 337 Drag events 338 Dragging with a subject 339 Using transforms instead of coordinates 339 Dragging scaled data 340 Dragging data points in a line chart 341 Dragging a canvas subject 342 Exercises 344 Brushing 344 Selecting areas and ranges in D3 344 Brush configuration 346 Brush events 347 Selecting points in a two-dimensional area 347 Binding data 350 Implementing a box or area zoom 351 Using a one-dimensional brush 352 Using brush with other events 354 Exercises 354

Page 14

Table of Contents xiii Basic zooming and panning 355 Zooming in D3 355 Zoom configuration 356 Defining restrictions 357 Using a container hierarchy 358 Zoom events 359 Zoom transforms 360 Exercises 361 Programmatic zoom 361 Transform methods 362 Scaling methods 364 Translation methods 365 Zoom interpolation 365 Exercise 366 Semantic zoom 366 Implementing semantic scaling 367 Rescaling 368 Applying and inverting transforms 370 Exercises 371 Summary 371 Part 3: Advanced D3 15 Creating Tree Visualizations 375 Hierarchies 375 Hierarchical visualizations in D3 376 Creating a hierarchy from nested data 378 Creating a hierarchy from tabular data 379 The hierarchy object 380 Creating trees 382 Drawing a tree 385 Adding labels 386 Using path links 387 Horizontal trees 389 Using Canvas 389 Radial trees 391 Exercises 393 Interactive trees 393 Highlighting a path 393 Changing the root 395 Navigating a subtree 396 Other interactive features 397 Summary 397 16 Creating Partitions and Enclosures 399 Creating partitions 399 Creating a partition 400 Icicle and flame charts 402 Sunburst diagrams 404 Exercises 405 Creating enclosures 406 Creating a treemap 407 Creating a circle pack 411 Packing algorithms 414 Exercises 415 Interactive partitions and enclosures 415 Rotating a sunburst diagram 415 Changing enclosure roots 416 Exercises 418 Summary 418

Page 15

Table of Contentsxiv 17 Visualizing Flows and Networks 421 Network visualizations 422 Graphs and data structures 423 Adjacency matrices 424 Node-link structures 425 Adjacency diagrams 426 Creating a simple adjacency diagram 426 Adding interactivity 429 Exercises 430 Chord diagrams 431 Creating a chord/ribbon diagram 433 Creating the ribbons 434 Creating the nodes 435 Adding labels 436 Configuration 436 Adding interactivity 437 Exercises 438 Sankey diagrams 439 Using the d3-sankey module 440 The Sankey layout function 441 Preparing the data 443 Creating the chart 444 Exercise 445 Arc diagrams 446 Exercise 448 Summary 448 18 Force-Directed Networks 449 Force-directed simulations 449 Creating a simulation 451 Adding a simple force 453 Exercises 455 Configuring force algorithms 455 Gravitational force (many-body) 457 Collision force 458 Position forces 458 Link forces 460 Center force 461 Combining multiple forces 462 Custom forces 463 Exercises 464 Adjusting simulation dynamics 464 Adding interactive features 466 Highlighting 467 Zooming in and out 468 Dragging nodes 469 Adding and removing nodes 470 Exercises 473 Canvas rendering 474 Summary 475 19 Cartographical Visualizations 477 Web-based cartography with D3 478 Thematic maps 478 Interactive maps 479 Data-driven maps 479

Page 16

Table of Contents xv Using maps to provide context 479 The d3-geo library 480 Drawing maps in D3 481 GeoJSON geometries 481 The geoPath function 482 GeoJSON features 483 Geometry and feature collections 484 Drawing a world map 485 The 'Sphere' type 486 Using different projections 486 Placing points on a map 488 Using TopoJSON 489 Rendering in a Canvas context 491 Adding context circles 492 Exercises 494 Creating thematic maps 495 Creating a choropleth 495 Using other datasets 496 Creating a dot density map 497 Creating a graduated dot map 498 Exercises 500 Introducing cartographic projections 500 Three main types of projections 501 Tissot’s indicatrix 501 Conformal, equal-area and equidistant projections 502 Exercise 506 Configuring projections 506 Using the example files 506 Fitting a geometry in a viewport 507 Transforming a projected map 509 Clipping 510 Bounding sphere clipping 511 Rotating the sphere in a projection 512 Exercises 513 Using measuring tools 513 Measuring distances 514 Calculating areas 515 Bounds and centroids 516 Other tools 517 Exercise 518 Animating maps 518 Animating globe rotations 518 Animating objects on the globe 519 Exercises 522 Zooming and panning 522 Interactive SVG zooming 522 Interactive projection zooming 523 Zoom in to detail 523 Zoom to a bounding box 524 Zoom to projected feature 526 Zoom to a rotated feature 527 Interactive rotation zooming 528 Using quaternion rotation 529 Inertia dragging 532 Exercises 532 Other D3 features for cartographical visualizations 532 Summary 533 20 References and Additional Resources 535 Documentation and specifications 535 GIS conversion tools 536 Other tools, libraries, and online resources 536 Sources for the data used in examples 537 Additional resources 538

Page 17

Table of Contentsxvi 21 Unlock Your Exclusive Benefits 539 Unlock this Book’s Free Benefits in 3 Easy Steps 539 Index 543 Other Books You May Enjoy 554

Page 18

Preface This book is a practical hands-on introduction to D3.js (Data-driven documents), an open-source JavaScript library for creating dynamic, interactive data visualizations for the web. Built on standard web technologies, D3 provides tools for binding data to visual elements and controlling how those elements are rendered and updated in the browser. Unlike charting libraries that provide ready-made chart types, D3 gives you the building blocks to create visualizations with HTML, CSS, SVG, and Canvas. Although this means that even simple charts may require more code at first, it also gives you the flexibility to create fully customized visualizations tailored to your data and design requirements. In this book, you will develop a solid understanding of D3’s core concepts, modules, and workflows through a hands-on, example-driven approach. You will start with the fundamentals and progressively move on to more advanced topics, building a wide range of visualizations along the way, from bar, line, pie, and scatter charts to trees, treemaps, circle packs, Sankey diagrams, force-directed networks, and thematic maps. Each chapter combines focused explanations with practical examples and step-by-step visualizations to help you apply what you learn. The book also includes downloadable code examples and exercises with complete solutions, allowing you to experiment further and reinforce your understanding as you progress. All code used in the book is available in a public GitHub repository (see details below). Because many of the printed code listings focus on specific concepts, they often show only part of the full source. The complete code for every example can be downloaded and run locally, and references to the corresponding files are provided throughout the book. The content covers both fundamental and advanced features of D3 and is based on D3 version 7.9.0 and ES2019 JavaScript. When writing this book, I made every effort to present the material as accurately as possible. Code listings were extracted from working examples, and additional care was taken to ensure that all examples are correctly referenced and function as intended. I have been using and teaching D3 since version 3, and much of this book is shaped by that experience. My main motivation in writing it was to share what I have learned while exploring, using, and teaching D3 over the years. I hope you find this book both useful and enjoyable. Who this book is for This book is for web developers, data journalists, designers, analysts, and anyone who wants to create interactive, web-based data visualizations. A basic understanding of HTML, CSS, and JavaScript is recommended. No prior knowledge of SVG or D3 is required.

Page 19

Prefacexviii What this book covers Chapter 1, Data-driven Documents, introduces the D3.js JavaScript library, describing its main features and concepts, and how it drives data to transform documents. You will learn how to set up your environment and create a very simple D3 application. Chapter 2, Essential JavaScript for D3, introduces the core web technologies behind D3, including modern JavaScript, the DOM, Canvas, and common data formats. It can also be used as a general reference. Chapter 3, Essential SVG for D3, is a short tutorial and reference on SVG, the main graphics format used by D3. It covers essential elements, attributes, styling, coordinate transforms, and the SVG DOM API. Chapter 4, Quick Start, introduces D3 through a simple bar chart. You will learn data binding, visual selection, interactivity, and transitions, with a bonus online tutorial on loading data and drawing a map. By the end of the chapter, you will be able to create simple charts with your own data. Chapter 5, Loading and Parsing Data, shows how to load and parse external data files using the d3-dsv and d3-fetch modules. An online tutorial explores these features in a full visualization using external files. Chapter 6, Selections and Data Binding, covers most of the d3-selection module used for selections, updates, joins and DOM manipulation, and demonstrates data-binding strategies in practice through short snippets you can run in your browser’s console. This chapter continues the online tutorial from Chapter 5, adding advanced selections and some interactivity (which is explored in later chapters). Chapter 7, Working with Data, explores tools from six modules: d3-array, d3-random, d3-interpolate, d3-format, d3-time, and d3-time-format. You will learn how to transform data arrays, group data, generate random distributions, create histograms, interpolate data, manipulate time intervals, and format dates and numbers according to a locale. Chapter 8, Axes, shows how to create and configure SVG axes that provide context for your charts with Cartesian or radial grids (d3-axis). Chapter 9, Scales, is dedicated to scaling functions that convert data received from an input domain to an output range. This chapter covers the d3-scale module and its functions that generate continuous, interpolated, and discrete scales. The online tutorial uses axes and scales to create a scatterplot. Chapter 10, Colors, covers everything you need to know about colors in D3. Color schemes, interpolators, and color manipulation tools are also covered in examples that use the d3-color, d3-scale-chromatic and d3-interpolate modules. You will continue the online tutorial from Chapter 9 to add colors and interactive features. Chapter 11, Creating Line and Area Charts, shows how to use the shape generator functions from the d3-shape module to create classic chart types such as line and area charts. These charts are introduced through simple examples and then applied to complete visualizations in step-by-step tutorials. Chapter 12, Creating Pies and Stacks, explores the layout generator functions from the d3-shape module used to create data structures for pie charts and stacked area and bar charts. This chapter also shows how to generate the data to render charts using Canvas.

Page 20

Preface xix Chapter 13, Transitions and Animation, covers advanced transition configuration (d3-transition), running multiple transitions, changing ease functions (d3-ease) and controlling timed animations (d3-timer). It also shows how to use native CSS and SVG animations with D3. Chapter 14, Events and Interactivity, explores advanced event handling topics and D3-specific behaviors: how to use and configure zoom (d3-zoom), drag (d3-drag) and brush (d3-brush) and apply them to simple charts and larger visualizations. Chapter 15, Creating Tree Visualizations, is the first of two chapters dedicated to visualizations of hierarchical data. Here you will learn how to prepare a data set to represent a hierarchy, using nesting techniques, and tools provided by the d3-hierarchy module. You will then use tree layout generators to display these transformed data structures as interactive tree visualizations. Chapter 16, Creating Partitions and Enclosures, introduces three more layout generators that take the hierarchy objects generated in Chapter 15 to create interactive treemaps, circle packs, and partitions. Chapter 17, Visualizing Flows and Networks, explores the visualization of network and flow diagrams, showing how to create charts such as Sankey diagrams (using d3-sankey), chord/ribbon diagrams (using d3-chord), and other network visualizations. Chapter 18, Force-Directed Networks, shows you how to use the d3-force module to build animated network diagrams. You will learn how force-directed simulations work and how different forces can be combined to control the placement and movement of nodes. Chapter 19, Cartographical Visualizations, covers the d3-geo module and shows how to build interactive maps from geographic data in formats such as GeoJSON and TopoJSON. You will learn how to work with projections, create thematic maps, and add interactions such as zooming, panning, and rotating in spatial and planar domains. Chapter 20, References and Additional Resources, provides a collection of references, tools, datasets, and online resources used throughout the book. It also highlights additional libraries, services, and learning materials that can help you explore D3.js and related topics in greater depth. To get the most out of this book There is no better way to learn a library than by coding with it. If you work through the examples in this book as you read, your learning curve will be much faster. To get started, you will need a simple development environment. Chapter 1 explains how to set one up. I recommend using a popular IDE such as VS Code or WebStorm, both of which are free and include built-in support for running a local web server, which is required to run most examples. The development setup used in this book is intentionally simple, relying on frontend JavaScript and CDN-based imports of D3.js and other libraries. Although I have deliberately avoided complex setups, I also provide online material with short guides for readers who prefer working with npm, dev containers, or who need to integrate with modern frontend frameworks. All code examples in this book use ES2019 (ES10) JavaScript. Familiarity with at least ES5 JavaScript is recommended.