1. Preface
1. What’s New in the Second Edition
2. Conventions Used in This Book 3. O’Reilly Safari 4. How to Contact Us 5. Acknowledgments 2. 1. Introduction 1. Why Data Visualization? 2. Why Write Code? 3. Why Interactive? 4. Why on the Web? 5. What This Book Is 6. Who You Are 7. What This Book Is Not 8. Using Sample Code 9. Thank You 3. 2. Introducing D3 1. What It Does 2. What It Doesn’t Do 3. Origins and Context 4. Alternatives 1. Easy Charts 2. Graph Visualizations 3. Geomapping 4. Almost from Scratch 5. Three-Dimensional 6. Tools Built with D3 4. 3. Technology Fundamentals 1. The Web 2. HTML 1. Content Plus Structure
2. Adding Structure with Elements 3. Common Elements 4. Attributes 5. Classes and IDs 6. Comments 3. DOM 4. Developer Tools 5. Rendering and the Box Model 6. CSS 1. Selectors 2. Properties and Values 3. Comments 4. Referencing Styles
5. Inheritance, Cascading, and Specificity 7. JavaScript 1. Hello, Console 2. Variables 3. Other Variable Types 4. Arrays 5. Objects 6. Objects and Arrays 7. Mathematical Operators 8. Comparison Operators 9. Logical Operators 10. Control Structures 11. Functions 12. Comments 13. Referencing Scripts 14. JavaScript Gotchas 8. SVG 1. The SVG Element 2. Simple Shapes 3. Styling SVG Elements 4. Layering and Drawing Order 5. Transparency 9. A Note on Compatibility 5. 4. Setup 1. Downloading D3 2. Referencing D3 3. Setting Up a Web Server 1. Terminal with Python 2. MAMP, WAMP, and LAMP 3. Diving In 6. 5. Data 1. Generating Page Elements 1. Chaining Methods 2. One Link at a Time 3. The Handoff 4. Going Chainless 2. Binding Data 1. In a Bind 2. Data 3. Please Make Your Selection 4. Bound and Determined 5. Using Your Data 6. High-Functioning 7. Data Wants to Be Held 8. Beyond Text 7. 6. Drawing with Data 1. Drawing divs 1. Setting Attributes 2. A Note on Classes 3. Back to the Bars 4. Setting Styles 2. The Power of data() 1. Random Data 3. Drawing SVGs 1. Create the SVG 2. Data-Driven Shapes 3. Pretty Colors, Oooh! 4. Making a Bar Chart 1. The Old Chart 2. The New Chart 3. Color 4. Labels 5. Making a Scatterplot 1. The Data 2. The Scatterplot 3. Size 4. Labels 6. Next Steps 8. 7. Scales 1. Apples and Pixels 2. Domains and Ranges 3. Normalization 4. Creating a Scale 5. Scaling the Scatterplot 1. d3.min() and d3.max() 2. Setting Up Dynamic Scales 3. Incorporating Scaled Values 6. Refining the Plot 7. Other Methods 8. Other Scales 1. Square Root Scales 2. Time Scales 9. 8. Axes 1. Introducing Axes 2. Setting Up an Axis 3. Positioning Axes 4. Check for Ticks 5. Y Not? 6. Final Touches 7. Formatting Tick Labels 8. Time-Based Axes
10. 9. Updates, Transitions, and Motion 1. Modernizing the Bar Chart 1. Ordinal Scales, Explained 2. Starting Your Own Band 3. Referencing the Band Scale 4. Other Updates 2. Updating Data
1. Interaction via Event Listeners 2. Changing the Data 3. Updating the Visuals 3. Transitions
1. duration(), or How Long Is This Going to Take? 2. ease()-y Does It 3. Please Do Not delay() 4. Randomizing the Data 5. Updating Scales 6. Updating Axes
7. on() Transition Starts and Ends
4. Other Kinds of Data Updates
1. Adding Values (and Elements)
2. Removing Values (and Elements) 3. Data Joins with Keys
4. Add and Remove: Combo Platter 5. Recap 11. 10. Interactivity 1. Binding Event Listeners 2. Introducing Behaviors 1. Hover to Highlight 3. Grouping SVG Elements 1. Click to Sort 4. Tooltips 1. Default Browser Tooltips 2. SVG Element Tooltips 3. HTML div Tooltips
5. Consideration for Touch Devices 6. Moving Forward 12. 11. Using Paths 1. Line Charts 1. Data Preparation 2. Scale Setup 3. Line ’em Up 4. Dealing with Missing Data 5. Refining the Visuals 2. Area Charts 13. 12. Selections 1. A Closer Look at Selections 2. Getting More Specific 3. Storing Selections 4. Enter, Merge, and Exit 1. The Enter Selection 2. Merging Selections 3. The Exit Selection
5. Filtering Selections Based on Data 1. To each() Their Own 14. 13. Layouts 1. Pie Layout 2. Stack Layout 1. A New Order 2. Anchoring Those Bars 3. Stacked Areas 3. Force Layout 1. Preparing the Network Data
2. Defining the Force Simulation
3. Creating the Visual Elements 4. Updating Visuals over Time 5. Draggable Nodes 15. 14. Geomapping 1. JSON, Meet GeoJSON 2. Paths 3. Projections 4. Choropleth 5. Adding Points 6. Panning 1. Transitioning the Map 2. Dragging the Map 3. Border Problems 7. Zooming 1. Fixing the Pan Buttons 2. Zoom-y Buttons
3. Constraining Panning and Zooming 4. Preset Views 8. Value Labels
9. Acquiring and Preparing Raw Geodata 1. Find Shapefiles 2. Choose a Resolution 3. Simplify the Shapes 4. Convert to GeoJSON 5. Choose a Projection 16. 15. Exporting 1. Bitmaps 2. PDF 3. SVG 17. 16. Project Walk-Through 1. Prepare the Data 2. Load and Parse the Data 3. Render the Initial View 4. Add Interactivity 5. Refine Styling 6. Provide Context 7. Dancing Versus Gardening 18. A. Case Studies 1. “Close Votes” 2. “What Size Am I?”
3. “Explained Visually” Series
4. “Workers’ Comp Benefits: How Much Is a Limb Worth?”
5. “Farmers’ Markets” Series 6. “Weather Circles” 7. “Data Sketches” Series 19. B. What’s New in 4.0 1. Modularity 2. Namespace and camelCase 3. Selections 4. Multivalue Maps 5. Transitions 6. Ordinal Scales 7. Axes 8. Stack Layout 9. Zooming 20. C. Further Study
1. Interacting with Other Humans 2. Reading Books 1. D3 Books
2. Other Data Visualization Books 3. Surfing Websites 1. D3-Related
2. Getting a Job and Geeking Out 21. D. Sharing Your Code 1. bl.ocks.org 1. Making a Block
2. Gist-to-Blocks Browser Extensions 2. Bl.ock Builder 3. Making a Block with Gistup
4. Codepen, JS Bin, or Otherwise 5. A Normal Web Server 22. E. Quick Reference 1. Selections 2. Data 3. Transitions 4. Scales 5. Axes 6. Interactivity 7. Numbers, Dates, and Times 8. Other Useful JavaScript 23. Index
Praise for Interactive Data Visualization for the Web
There are few books that I’d call “game-changers.” Interactive
Data Visualization for the Web is one of them. It takes a topic that
is obscure and hard to grasp for noncoders, and it transforms it
into a delightful experience—full of clarity, fun, and insight. It’s the
book that I recommend to all of my students to get started with d3.js.
—Alberto Cairo, Knight Chair in Visual Journalism, University of Miami
Scott Murray is pioneering a new approach to design—combining
deep knowledge of both code and visual principles to create work
that is at once extraordinarily beautiful, highly interactive, and
coherently integrated. What’s more, he’s a teacher who generously
shares his knowledge. And now, he’s revised his wonderful book
Interactive Data Visualization for the Web—a foundational text for
designers and anyone else dealing with the coming onrush of data.
—Hugh Dubberly, Principal, Dubberly Design Office
We have been using Scott’s book in our CS171 Visualization course
at Harvard for the past three years. It is, by far, the most
comprehensive and best introduction to D3 out there. The tone of
the book is conversational, and it is easily accessible by nonexperts
and beginners. Our students like it, and I believe they benefit from
having the materials presented in the order that Scott came up
with. We are definitely looking forward to the next edition!
—Hanspeter Pfister, An Wang Professor of Computer Science, Harvard University
The first edition has simply been the most complete, effective,
single source for learning D3 and visualization on the web from
scratch. I have recommended it countless times.
—Erik Cunningham, Software Engineer, Twitter
I can’t think of a better way to understand D3. It’s funny and
engaging for a nonprogrammer, deep and detailed for an engineer,
and filled with practical and visual bliss for the designer.
—Xaquín G.V., Visual Storyteller, formerly the
Guardian, The New York Times, and National Geographic
Scott Murray is the master of making technical instruction
entertaining and fun. I wish more books were written like this.
—Riley Rustad, Demand Planning—Data and Analytics, Adidas
Interactive Data Visualization for the Web, based on Scott’s
outstanding online tutorials, remains the clearest and most
accessible introduction to D3. It’s even moderately funny.
—Kevin Quealy, Graphics Editor, The New York Times
I recommended the first edition to countless people, technical and
nontechnical alike. Scott’s ability to articulate key concepts
concisely to a broad audience, without oversimplifying, is
unparalleled and refreshingly jargon-free. The first go-to book in
the canon of web-based data visualization? Definitely.
—Tom Longmate, Freelance Design Technologist
I have a bookshelf behind my desk full of reference books; but Scott
Murray’s book is never on that shelf, because it’s constantly on my desk.
—Gail Zuniga, Information Designer
I. Love. This. Book. In classes, bootcamps, and tutorials, I’ve
worked hard to learn JavaScript in many ways. Nothing has been
clearer or easier to work with than this book. I understand D3 and
JavaScript better than ever before.
—Wesley Ratko, Geospatial Data Analyst
The most accessible introduction to d3 so far—invaluable for teaching purposes.
—Alan Smith, Data Visualization Editor, Financial Times
I learned the basics of D3 from Scott Murray’s book, which offers
clear and fun guidance. I have since been recommending it to all
my design students. Scott makes the process of learning D3 both pleasant and effective.
—Isabel Meirelles, Professor, OCAD University
This book is the definitive guide to D3. I use this book for every
data visualization class that I teach at USF. Students love the
comprehensive coverage of the material as well as the detailed examples.
—Alark Joshi, Associate Professor of Computer
Science, University of San Francisco
D3 is only easy if you learn it in the right order. Scott is a talented
teacher and knows how to progressively go from the very
beginning to a deep understanding of the fundamental concepts.
There are many excellent books around, but this one is the place to start.
—Christophe Viau, Data Visualization Engineer
Scott Murray’s book is probably the most iconic book out there. It
was the perfect starting point on my journey up the steep learning
curve. Scott doesn’t push or drag you up that curve, he walks
alongside and explains each step in an intelligible and—most
important for the big-eyed novice—friendly way.
—Lars Verspohl, Data Visualization Designer and Developer, datamake
D3 has a unique data model which makes it very expressive and
powerful, but it can be difficult to learn if you’re coming to it from
other JavaScript libraries or visualization tools. Scott Murray’s
book patiently yet efficiently walks the reader through examples
that establish a firm understanding of the fundamentals of D3. I
continue to recommend Scott’s book to colleagues four years after
its introduction. I know of no better way to learn D3.
—Andrew Brown, Data Scientist, SiteZeus
This book was the starting point for my career in data
visualization. Based upon the foundations I got from working
through all the examples I have gotten multiple jobs and had my
work reach millions of people. Anytime someone asks for an
introduction to D3, I point them here.
—Nick Strayer, PhD Student, Data-Journalist,
Vanderbilt University, formerly The New York Times
A clear, concise, and approachable book on how D3 syntax and
structures work. Because it builds on a foundation of
understanding the fundamentals, it has become an essential
reference in my library that I continue to use.
—Cindy Hoffman, Design Editor, Bloomberg Graphics
This book is required reading for all my introductory data vis
classes. The friendliest and most accessible introduction to D3 around!
—Lynn Cherny, Associate Professor, Emlyon Business School
This book explains D3 concepts better than any other resource out
there. The examples are easy to follow and clearly written. I have
recommended it to dozens of people who were looking to get
started with D3 because it’s the best way I know of to learn the basics.
—Joe Fox, Graphics and Data Journalist, Los Angeles Times
In a world of truly terrible tech books, one man, equipped only
with a strong verbal acumen and a charming sense of humor,
stands apart. That man is Scott Murray, and his book is Interactive
Data Visualization for the Web.
—Wendy Dherin, Software Engineer, Credit Karma
I came to D3 without a background in JavaScript, and this book
was one of my guiding lights. It builds carefully and logically,
giving a solid introduction to both D3 and interactive visualization as a field.
—Daniel Walter, Data Scientist, Distil Networks
When I was first learning D3, I turned to this amazing book and
never needed to look anywhere else. It is comprehensive and
approachable, making for a great resource for both beginners and
experts needing a quick reference. It is always my first response
when somebody asks for instructional material on learning D3. I
can’t recommend it enough!
—Peter Beshai, Data Visualization Engineer
As a data scientist working in the social sector, I need tools I can
put to use in the field quickly and meaningfully. I wanted to create
interactive data visuals for use in my work, but I couldn’t figure out
how to make them. Then I found Scott Murray and his amazing
book on designing with D3. Within three days I had fully functional
D3 pieces up online with no tears. After several months of working
through his in-depth examples I could provide professional D3
products to my clients. His approach to teaching is intuitive,
practical, and user-friendly. The examples are great, and he
teaches you enough competencies that you can quickly broaden the
standard recipes into custom designs.
—Heather Krause, Data Scientist, Datassist
This is the first book on D3 that I tell my students to read when
they ask me for an introductory guide to D3. I even recommend it
more highly than the official D3 documentation and tutorials. I
especially like how Scott breaks down complex chains of D3
expressions into their constituent parts and explains each component in detail.
—Philip Guo, Assistant Professor of Cognitive Science, UC San Diego
I can still remember the first time I read Interactive Data
Visualization for the Web. The next time I’ll read it will be on a
remote island. The book’s wisdom will guide me through hardship,
and Scott’s witty humor will help me crack that coconut—it’s that useful!
—Maarten Vanhoof, Researcher, Open Lab, Newcastle University
This book builds up the concepts in a brilliantly logical and simple
way, but also engaged me with moments of comedic gold.
—Rowan Cumming, Financial Services Senior Analyst