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 D3 specifically) was growing like gangbusters. If you’ve read the tutorials, portions of the book will feel familiar, but there is a lot of new material here, including many more examples, sneaky tips, and warnings of things to avoid. Also, the book contains 78 percent more bad jokes.

Data visualization is an interdisciplinary field, which is just one reason it’s impossible to document the breadth of skills needed in a single book. Fortunately, because the field is exploding in popularity, there are many new titles to choose from, each of which complements this one.

On design process:

On visual design principles and techniques:

On the practicalities of working with data:

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, databases, data types, environment variables, 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.

This icon signifies a tip, suggestion, or general note.

This icon indicates a warning or caution.

Using Code Examples

This book is here to help you get your job done. In general, if this book includes code examples, you may use the code in this book in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “Interactive Data Visualization for the Web by Scott Murray (O’Reilly). Copyright 2013 Scott Murray, 978-1-449-33973-9.”

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at .

List of Interactive Examples

The online version of Interactive Data Visualization for the Web includes 44 interactive examples to help teach you how to represent your data on the Web using D3. Here’s a full listing of these examples:

Chapter 3

Try It Now: Modifying CSS Rules

Try It Now: JavaScript Variables in the Console

Try It Now: JavaScript Comparison Operators in the Console

Try It Now: SVG

Chapter 5

Try It Now: Dynamic Paragraphs in D3

Try It Now: Still More Dynamic Paragraphs in D3

Exercise: Dynamically Styled Paragraphs

Chapter 6

Try It Now: Bar Charts in D3

Try It Now: Bar Charts with Random Values

Try It Now: Colorful Data Circles

Try It Now: Bar Heights and Widths

Try It Now: Final Bar Chart

Try It Now: dataset in the Console

Try It Now: Scatterplot

Chapter 7

Try It Now: scale in the Console

Try It Now: Scatterplot Using x and y Scales

Try It Now: Final Scatterplot

Chapter 8

Try It Now: Simple, but Ugly Axis

Try It Now: Scatterplot with y Axis

Try It Now: Scatterplot with Random Data

Try It Now: formatAsPercentage in the console

Chapter 9

Try It Now: xScale in the Console

Try It Now: Updated Chart with Correct Colors and Labels

Try It Now: Transition in Action

Try It Now: A Smoother Transition

Try It Now: Different Ease Types

Try It Now: Dynamic, Per-Element Delay Before Transition

Try It Now: Transition with Random Data Applied

Try It Now: Transitioning Points to Randomized Values

Try It Now: Transitioning Points to Randomized Values, Plus Rescaled Axes!

Try It Now: Using each() to Specify Two Transitions in Sequence

Exercise: Add Labels to New Bar Elements

Exercise: Remove Labels for Deleted Bar Elements

Exercise: Remove Labels for Deleted Bar Elements 2

Try It Now: Adding and Removing Values from a Chart

Chapter 10

Try It Now: Adding Transitions with CSS

Try It Now: Smoother Highlight Transitions

Exercise: Sorting and Re-Sorting Visual Elements with Delay

Try It Now: A Browser Default Tooltip

Try It Now: An SVG Element Tooltip

Try It Now: An HTML div Tooltip

Chapter 11

Try It Now: Pie Chart

Try It Now: Ring Chart

Try It Now: Stacked Bar Chart

Try It Now: Force Layout

Safari® Books Online

Safari Books Online is an on-demand digital library that delivers expert content in both book and video form from the world’s leading authors in technology and business.

Technology professionals, software developers, web designers, and business and creative professionals use Safari Books Online as their primary resource for research, problem solving, learning, and certification training.

Safari Books Online offers a range of product mixes and pricing programs for organizations, government agencies, and individuals. Subscribers have access to thousands of books, training videos, and prepublication manuscripts in one fully searchable database from publishers like O’Reilly Media, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, 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, Course Technology, and dozens more. For more information about Safari Books Online, please visit us online.

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://oreil.ly/interactive_data_visualization_web.

To comment or ask technical questions about this book, send email to .

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

My name may be on the cover, but as an author, I feel as though I am merely funneling the wisdom of hundreds of other brilliant minds onto the page.

First and foremost, I must thank my wife Nora, not least for being the first to say “Hey, you should turn those tutorials into a book.” Without her support and encouragement, this project never would have happened.

Thanks also to Rosten Woo, with whom I collaborated on my first D3 project, for reaching out and giving me a reason to finally dig into this new tool. Thanks to Joe Golike for several early D3 debugging sessions around that time, and to Jen Lowe and Sha Hwang for their reviews and feedback on the initial tutorials.

I am extremely grateful to Casey Reas, Dan Shiffman, Joshua Noble, and Noah Iliinsky—not just for offering advice on the book-creation process, but also for their groundbreaking work in the spheres of art, design, code, and data. Their careers have greatly influenced my own.

In that vein, I should also thank Jan Kubasiewicz at MassArt’s Dynamic Media Institute. Back in 2007, Jan encouraged me to check out something called Processing, which eventually led me to a whole new career in code-driven arts, data visualization, and now this book.

It has been a pleasure working with my editor, Meghan Blanchette, and everyone else on the team at O’Reilly. Thanks to Meghan and her crew for shepherding this project all the way through, from concept to an actual, physical, chunk of paper with words and strange diagrams printed on it.

Special thanks to Mike Bostock, Jen Lowe, Anna Powell-Smith, and Daisy Vincent for agreeing to tech review the book and sending incredibly valuable feedback. The final product is vastly improved, thanks to their input. That said, if you find an error or confusing code example, it is because they begged me to rewrite it, and I steadfastly refused.

Mike gets an extra-special thanks for developing D3 in the first place. Without this elegant piece of software, the community of data visualization practitioners wouldn’t be quite as vibrant, enthusiastic, and standards-compliant as it is today.

Speaking of community, many other people—including Jérôme Cukier, Lynn Cherny, Jason Davies, Jeff Heer, Santiago Ortiz, Kim Rees, Moritz Stefaner, Jan Willem Tulp, and others who I have forgotten to mention—on the D3 list and in nearby orbits have also directly contributed to my thinking and process. Thank you for your support. I am lucky to get to collaborate with so many talented people.