Learn D3.js

Master data visualization with D3.js v7 using modern web standards and real-world projects to build interactive charts, maps, and visual narratives

Key Features

• Build dynamic, data-driven visualizations using D3.js v7 and ES2019+
• Create D3 data visualizations, including charts, maps, and networks
• Master data visualization with JavaScript through hands-on examples

Book Description

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.

What you will learn

• 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

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.

Table of Contents

1. Data-driven Documents
2. Essential JavaScript for D3 (Online)
3. Essential SVG for D3 (Online)
4. Quick Start
5. Loading and Parsing Data
6. Selections and Data Binding
7. Working with Data
8. Axes
9. Scales
10. Colors
11. Creating Line and Area Charts
12. Creating Pies and Stacks
13. Transitions and Animation
14. Events and Interactivity
15. Creating Tree Visualizations
16. Creating Partitions and Enclosures
17. Visualizing Flows and Networks
18. Force-Directed Networks
19. Cartographical Visualizations
20. References and Additional Resources

Helder 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.