Interactive Data Visualization for the Web, 2nd Edition

Preface

This is a book about programming data visualizations for nonprogrammers. If you’re an artist or graphic designer with visual skills but no prior experience working with data or code, this book is for you. If you’re a journalist or researcher with lots of data but no prior experience working with visuals or code, this book is for you, too.

This book will introduce you to D3, a JavaScript-based tool for loading data into a web page and generating visuals from that data. I assume that you have little or no programming experience. Or, perhaps you have programmed before, but D3 and data visualization are bringing you to JavaScript for the first time, and you’ve heard bad things about it. Well, JavaScript is a little weird, but it’s not as bad as you’ve heard, and everything is going to be all right. Please sit down and make yourself comfortable.

This book began as a series of tutorials posted on my website. At the time (January 2012), there wasn’t much information on D3 available that was accessible to beginners. Very quickly, I was getting hundreds, then thousands of page views a day—evidence that interest in the field generally (and in D3 specifically) was growing like gangbusters. I expanded the tutorials into the first edition of this book, published in March 2013. Since then, the D3 community has been growing by leaps and bounds. Demand for D3 skills overwhelmed the D3 Google Group with so many job postings that early D3 aficionado Lynn Cherny spun off a new group dedicated to just that. Yes, D3 experience makes you imminently employable. (See “Where to Post and Find Data Visualization Jobs” for help, not that you’ll need it.)

The first edition of this book addressed D3 versions 3.x. In June 2016, version 4.0 of D3 was released. A complete, from-the-ground up rewrite, 4.0 kept the core concepts that make D3 such a powerful and widely adopted tool, but introduced hundreds (thousands?) of other changes. While these changes are all for the better (yay, progress!), code written for 3.x will break when used with 4.x. Hence the need for a second edition of this book, fully updated and newly expanded with more examples, warnings of things to avoid, and useful tips gleaned from years of using and teaching D3. (See “What’s New in the Second Edition” below.)

Despite these updates, it’s impossible to document the breadth of skills needed in a single book. Data visualization is inherently interdisciplinary and attracts the curious. Learning to write JavaScript is just one of many skills you’ll need. Fortunately, there are many other books to choose from, each of which complements this one. See Appendix C for recommendations.

What’s New in the Second Edition

Although D3 continues to evolve as a tool, all of its core functionality remains in place. Yet D3 continues to grow, primarily thanks to all the hard work contributed by Mike Bostock, as well as the ever-expanding community of D3 users. So there are lots of new functions to learn about, and every chapter has been refined and expanded to cover the most useful elements for beginners.

Major updates for this second edition include:

• In-depth coverage of nonlinear scales (such as square root and ordinal scales) and time-based scales

• A new chapter on using SVG paths for drawing line and area charts

• A new chapter on selections and using selections efficiently to filter elements by data value

• A hugely expanded geomapping chapter addressing how to make interactive maps with panning, zooming, and tooltips, plus an introduction to the TopoJSON data format

• A new project walk-through chapter, in which I create a visualization project with real-world data from scratch

• A new appendix of inspiring case studies, in which nine accomplished designers talk about the processes behind their D3-based projects

• A new appendix summarizing what’s new in version 4.0 of D3

• An expanded appendix on “Further Study,” including helpful tips on how and where to get help when you get stuck

• A new appendix on sharing your code with others

• A new appendix with a quick reference of the most commonly used functions

In addition, all of the code examples have been updated for D3 4.x, and more than 40 new examples have been added, for a total of 143. Please note the instructions in Chapter 1 about downloading the right version of the examples to accompany this edition of the book.

A major new feature in 4.x is the ability to render nearly everything to an HTML canvas element, just as easily as to SVG. This feature is explicitly not addressed in this book; I’ve chosen to focus on rendering to SVG throughout, as that’s by far the most common use case for D3. Using canvas presents many opportunities and challenges, discussions of which are beyond the scope of this book. On this subject, I recommend Lars Verspohl’s excellent tutorial, “D3 and Canvas in 3 steps”, which will make more sense if you’re already familiar with D3.

Finally, this second edition is nearly 200 pages longer than the first edition, thus making it a better value on a per-page basis. (I pass the savings on to you!)

Conventions Used in This Book

The following typographical conventions are used in this book:

Italic

Indicates new terms, URLs, email addresses, filenames, and file extensions.

Constant width

Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, data types, statements, and keywords.

Constant width bold

Shows commands or other text that should be typed literally by the user.

Constant width italic

Shows text that should be replaced with user-supplied values or by values determined by context.

Note

This icon signifies a general note.

Tip

This icon signifies a tip or suggestion.

Warning

This icon indicates a warning or caution.

Sidebar

This is an example of a sidebar.

O’Reilly Safari

Note

Safari (formerly Safari Books Online) is a membership-based training and reference platform for enterprise, government, educators, and individuals.

Members have access to thousands of books, training videos, Learning Paths, interactive tutorials, and curated playlists from over 250 publishers, including O’Reilly Media, Harvard Business Review, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Adobe, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, and Course Technology, among others.

For more information, please visit http://oreilly.com/safari.

How to Contact Us

Please address comments and questions concerning this book to the publisher:

• O’Reilly Media, Inc.
• 1005 Gravenstein Highway North
• Sebastopol, CA 95472
• 800-998-9938 (in the United States or Canada)
• 707-829-0515 (international or local)
• 707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://bit.ly/interactive_data_vis_web_2e.

You can also find additional relevant info at the companion website.

To comment or ask technical questions about this book, send email to [e-mail].

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia

Acknowledgments

To everyone I had previously acknowledged in the first edition: I already thanked you once! What more do you want from me?

Okay, fine: I re-thank you here, if briefly, because the second edition couldn’t have happened without the first, and you were an essential part of that. Thanks: Nora, Rosten, Joe, Jen, Sha, Casey, Dan, Joshua, Noah, Jan, Meghan, Mike, Jen (again), Anna, Daisy, Mike (again), Jérôme, Lynn, Jason, Jeff, Santiago, Kim, Moritz, and Jan Willem. (Phew!)

If this second edition is improved in any way (it is), then you can thank Shirley Wu for giving the first edition a thorough read and providing many valuable suggestions for improvements. Likewise, Melissa Lewis and Jane Pong served as the intrepid tech reviewers for this edition. Your work inspires me, and this book is much more complete and reader-friendly as a result of your detailed notes.

A heartily insightful and inspired thank you to the interviewees who volunteered their time, wisdom, and images to the case studies in Appendix A (in order of appearance): Jan Willem Tulp, Anna Powell-Smith, Victor Powell, Lewis Lehe, Lena Groeger, Susie Lu, Zan Armstrong, Shirley Wu, and Nadieh Bremer.

Immeasurable thanks to the scientist researchers whose data is used for examples in this book, including Dr. Pieter Tans (NOAA/ESRL) and Dr. Ralph Keeling (Scripps Institution of Oceanography), whose carbon dioxide measurements from Mauna Loa are used in Chapter 11; and Yan (Joann) Zhou (Argonne National Laboratory, US Department of Energy), whose electric-drive vehicle data is used in Chapters 13 and 16.

Special thanks to Jeff Weiss for manually verifying and correcting the cities’ geographic coordinates used in Chapter 14, and also to Michael Neutze for spotting some issues in the early release version of this second edition. Michael also has the unique distinction of having greeted me at an airport with a full-color, poster-size version of this book’s cover. (True story.)

An extreme thank you to my second-edition editor, Meg Foley, for shepherding this project from start to finish despite, ahem, occasional delays. (I had my reasons.)

Of course, an extra-special thank you to Mike Bostock for developing D3 in the first place. Without this elegant piece of software and Mike’s ongoing quest to encourage people to share their work, the community of data visualization practitioners wouldn’t be quite as vibrant and enthusiastic as it is today.

Thanks also to the many readers who reported errata in the first edition and contacted me with suggestions for improvements. I hope this new edition is more clear and comprehensive as a result. Your glowing reviews, emails, and tweets are great, too.

Finally, thank you, dear reader, for your time. I hope to have made this new volume worth your while.