This is the code repository for Learn D3.js, Second Edition, published by Packt.
Helder da Rocha
Learn D3.js, Second Edition, is a fully updated guide to building interactive, standards-compliant data visualizations for the web using D3.js v7 and modern JavaScript. Whether you're a developer, designer, data journalist, or analyst, this book will help you master the core techniques for transforming data into compelling, meaningful visuals. Starting with fundamentals like selections, data binding, and SVG, the book progressively covers scales, axes, animations, hierarchical data, and geographical maps. Each chapter includes short examples and a hands-on project with downloadable code you can run, modify, and use in your own work. This new edition introduces improved chapter structure, updated code samples using ES2019 standards, and better formatting for readability. Chapters were completely rewritten to focus on the most important topics first, with suggested exercises after each section, complete with commented solutions and online step-by-step tutorials. All code snippets are drawn from real-world D3 data visualization projects available in a GitHub repository, which also includes bonus content on integrating D3 into applications and migrating legacy code. With its practical approach, this book remains one of the most respected resources for learning D3.js and creating interactive data visualizations with JavaScript.
- Bind data to DOM elements and apply transitions and styles
- Build interactive bar, line, pie, scatter, tree, and animated network charts
- Implement interactive behaviors with zoom, drag, and tooltips
- Visualize hierarchical data, flows, and maps using D3 layouts and projections
- Use D3 with HTML5 Canvas for high-performance rendering
- Create thematic geographic maps using standard GeoJSON and TopoJSON shapefiles
- Complete 100+ exercises with commented templates and solutions
- Build full visualizations through 10 guided online exercises
- Data-driven Documents
- Essential JavaScript for D3 (Online)
- Essential SVG for D3 (Online)
- Quick Start
- Loading and Parsing Data
- Selections and Data Binding
- Working with Data
- Axes
- Scales
- Colors
- Creating Line and Area Charts
- Creating Pies and Stacks
- Transitions and Animation
- Events and Interactivity
- Creating Tree Visualizations
- Creating Partitions and Enclosures
- Visualizing Flows and Networks
- Force-Directed Networks
- Cartographical Visualizations
- References and Additional Resources
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. We 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 we have deliberately avoided complex setups, we 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.
Part1/
Contains code examples and exercises related to the first part of the book (Introduction), which covers the fundamentals of D3.js, how to set up a basic (non-Node.js) development environment, and how to create simple visualizations using D3.js. This part also includes two chapters covering pre-requisites for learning D3.js, such as JavaScript and SVG basics, and a quick start tutorial for creating a bar chart using most features that will be explored in detail in the rest of the book.
Part2/
Contains code examples and exercises related to the second part of the book (Core D3), which focuses on core D3 features: loading and parsing data, selections, data joins, axes, scales, data manipulation, layout managers, basic charts, and more advanced core topics such as transitions, animations, and interactivity. Besides the examples that generate most of the screenshots in the book, there are also exercises, templates and solutions for each section. Most chapters also include online step-by-step tutorials for creating larger visualizations based on what was learned so far.
Part3/
Contains code examples and exercises related to the third part of the book (Advanced D3), which explores advanced D3.js techniques and complex data visualizations, such hierarchical layouts, network and geographic visualizations. All chapters explore these topics and provide examples using features covered in part 2, including interactivity and animation. Exercises and online tutorials are also included for each chapter.
Appendix/
Contains additional code examples, exercises, and resources that complement the content covered in the book, including bonus chapters (tutorials), integration with frontend frameworks, using a Node.js environment, migrating from older D3 versions, and other topics. New topics can be added to this folder in the future, to keep the book up-to-date with the latest developments in D3.js and data visualization.
Helder da Rocha teaches, writes and develops applications with Java and Web technologies since 1995. In 1996 he wrote one of the first books in Portuguese about HTML and JavaScript, and since then he created hundreds of presentations, tutorials, and course materials on Java, Java EE, programming tools, patterns, techniques, methodologies, HTML, CSS, JavaScript, SVG, XML and related technologies, data visualization, Arduino and Internet of Things. He holds a masters degree in Computer Science. He also has a background in the visual arts and design and has some of his artwork in permanent museum exhibits. He lives in Brazil, where he works as an independent consultant, developer and instructor and a frequent speaker at technological events.