Interactive Data Visualization for the Web Scott Murray Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo Special Upgrade Offer If you purchased this ebook directly from oreilly.com, you have the following benefits: ▪ DRM-free ebooks—use your ebooks across devices without restrictions or limitations ▪ Multiple formats—use on your laptop, tablet, or phone ▪ Lifetime access, with free updates ▪ Dropbox syncing—your files, anywhere If you purchased this ebook from another retailer, you can upgrade your ebook to take advantage of all these benefits for just $4.99 Click here to access your ebook upgrade Please note that upgrade offers are not available from sample content A Note Regarding Supplemental Files Supplemental files and examples for this book can be found at http://examples.oreilly.com/ 0636920026938/ Please use a standard desktop web browser to access these files, as they may not be accessible from all ereader devices All code files or examples referenced in the book will be available online For physical books that ship with an accompanying disc, whenever possible, we’ve posted all CD/DVD content Note that while we provide as much of the media content as we are able via free download, we are sometimes limited by licensing restrictions Please direct any questions or concerns to booktech@oreilly.com 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: ▪ Designing Data Visualizations: Intentional Communication from Data to Display by Noah Iliinsky and Julie Steele O’Reilly Media, 2011 ▪ Data Visualization: A Successful Design Process by Andy Kirk Packt Publishing, 2012 On visual design principles and techniques: ▪ The Functional Art: An Introduction to Information Graphics and Visualization by Alberto Cairo New Riders, 2012 ▪ Information Dashboard Design: The Effective Visual Communication of Data by Stephen Few O’Reilly Media, 2006 On the practicalities of working with data: ▪ Bad Data Handbook: Mapping the World of Data Problems by Q Ethan McCallum O’Reilly Media, 2012 ▪ Data Analysis with Open Source Tools: A Hands-On Guide for Programmers and Data Scientists by Philipp K Janert O’Reilly Media, 2010 ▪ Python for Data Analysis: Agile Tools for Real World Data by Wes McKinney O’Reilly Media, 2012 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 TIP This icon signifies a tip, suggestion, or general note WARNING 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 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 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 permissions@oreilly.com 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 bookquestions@oreilly.com 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 O objects, Objects Ogievetsky, Vadim, Origins and Context ordinal scales, Introducing Axes, Modernizing the Bar Chart, Referencing the Ordinal Scale, Pie Layout output range, Domains and Ranges overlapping elements, Hover to Highlight P padding, Refining the Plot, Cleaning It Up, Y Not?, Round Bands Are All the Range These Days, Referencing the Ordinal Scale page elements binding data to, Binding Data–Bound and Determined, Data Joins with Keys creating, Generating Page Elements–Going Chainless paragraph elements, Generating Page Elements parent elements, DOM paths, Pie Layout, Paths pie charts, Pie Layout pixel-based coordinates system, Simple Shapes pixels lining up to, Round Bands Are All the Range These Days smoothing, Cleaning It Up pointer events, Hover to Highlight, Tooltips (see also mouseover events) (see also tooltips) points, Adding Points political maps, Choropleth population maps, Adding Points port number, The Web prefuse application, Origins and Context print-to-PDF functionality, PDF projections, Projections, Adding Points properties, CSS, Properties and Values, Objects Protovis visualization toolkit, Origins and Context Q quantitative scales, Introducing Axes quantize scales, Choropleth queued transitions, Warning: Start carefully R radians, Pie Layout random data, generating, Random Data range banding, Round Bands Are All the Range These Days rectangles, drawing, Drawing divs red state/blue state maps, Choropleth referencing styles, Referencing Styles remote servers, The Web rendering, Rendering and the Box Model requests, The Web resolution, Choose a Resolution ring charts, Pie Layout S Safari, development tools, Developer Tools sample code files, obtaining, Using Sample Code, Referencing D3 scales, Scales–Other Scales additional methods, Other Methods creating, Creating a Scale definition of, Scales dynamic scales, Creating a Scale, Setting Up Dynamic Scales incorporating scaled values, Incorporating Scaled Values input domain/output range, Domains and Ranges normalization, Normalization refining the plot, Incorporating Scaled Values vs axes, Scales scatterplots adding x/y axes to, Axes creating, Making a Scatterplot–Labels scaling, Creating a Scale screen coordinates vs geo-coordinates, Adding Points scripts, Referencing Scripts select(), Select selectAll(), Select selection.on() method, Interaction via Event Listeners selectors, CSS semantic structure, Content Plus Structure sequential numbers, generating an array of, Ordinal Scales, Explained servers, The Web shape-rendering property, Cleaning It Up shapefiles, Find Shapefiles sibling elements, DOM sorting, Click to Sort source code, viewing, Developer Tools specificity, Inheritance, Cascading, and Specificity stack layout, Stack Layout staggered transitions, Please Do Not delay() static transitions, Please Do Not delay() style() method, Beyond Text styles setting, Setting Styles vs classes, A Note on Classes SVG (Scalable Vector Graphics), SVG–Transparency applying styles to elements, Styling SVG Elements applying transparency, Transparency axis functions and, Introducing Axes browser compatibility, A Note on Compatibility creating elements, The SVG Element creating simple shapes, Simple Shapes, Drawing SVGs–Pretty Colors, Oooh! creating tooltips with, SVG Element Tooltips drawing overlapping shapes, Layering and Drawing Order, Hover to Highlight exporting D3 visualizations as, SVG grouping elements, Grouping SVG Elements T tags, Adding Structure with Elements text-based data, Data tick marks, Check for Ticks ticks (time measurement), Force Layout tooltips, Tooltips–HTML div Tooltips default, Default Browser Tooltips HTML div tooltips, HTML div Tooltips SVG elements, SVG Element Tooltips touch-based interfaces, Consideration for Touch Devices transformations, What It Does, Cleaning It Up transitions, Transitions–Containing visual elements with clipping paths adding animated, Transitions chaining together, End gracefully clipping paths, Containing visual elements with clipping paths controlling duration of, duration(), or How Long Is This Going to Take? delaying start of, Please Do Not delay() equalizing the pace, ease()-y Does It exit transition, Exit transition in mouseover events, Hover to Highlight interrupted, Click to Sort limit to active number, Warning: Start carefully marking beginnings/endings of, each() Transition Starts and Ends randomizing the data, Randomizing the Data updating axes, Updating Axes updating the scale, Updating Scales translation transform, Cleaning It Up transparency, Transparency TXT (plain text files), Data type selectors, Selectors typeof operator, Dynamic typing U ul (unordered list), Rendering and the Box Model United States, map of, JSON, Meet GeoJSON updates, Updates, Transitions, and Motion–Recap adding and removing data, Add and Remove: Combo Platter adding values/elements, Adding Values (and Elements)–Update animation of, Transitions basic steps to, Updating Data, Changing the Data data joins, Data Joins with Keys–Exit transition event listeners and, Interaction via Event Listeners overview of, Recap removing values/elements, Removing Values (and Elements)–Making a smooth exit to bar chart, Modernizing the Bar Chart–Other Updates URLs (Uniform Resource Locators), The Web V value changes, animating, Transitions values adding, Adding Values (and Elements) in CSS, Properties and Values in objects, Objects variable hoisting, Variable hoisting variable scope, Function-level scope variables, Hello, Console, JavaScript Gotchas, Global namespace, Create the SVG vector data, Choose a Resolution vertical axis, Y Not? visual rules, Rendering and the Box Model visual structure, Content Plus Structure visualization, definition of, Why Data Visualization? W web development tools, Developer Tools–Developer Tools Web fundamentals, The Web, The Web web inspector, Rendering and the Box Model Web servers operation of, The Web setting up, Setting Up a Web Server web-standard technologies, benefits of, Why on the Web? whitespace, adding, Round Bands Are All the Range These Days (see also padding) About the Author Scott Murray is a code artist who writes software to create data visualizations and other interactive phenomena His work incorporates elements of interaction design, systems design, and generative art Scott is an Assistant Professor of Design at the University of San Francisco, where he teaches data visualization and interaction design He is a contributor to Processing (processing.org), and he teaches workshops on creative coding Scott earned an A.B from Vassar College and an M.F.A from the Dynamic Media Institute at the Massachusetts College of Art and Design His work can be seen at alignedleft.com Colophon The animal on the cover of Interactive Data Visualization for the Web is a long-tail tit or bushtit (Aegithalos caudatus) The bushtit is a common species of bird found throughout Europe and Asia The caudatus group of the species has a pure white head These birds are known for their tiny size, measuring at around only 13-15 cm in length, including their tail The long-tail tit is recognized by its stubby bill, contrasted to its long, narrow tail Females and males are indistinguishable, both undergoing a full moult before their first winter Their adult plumage is primarily black and white with accents of grey and pink The bushtit inhabits deciduous and mixed woodland, feeding on insects with a preference for eggs and larvae of moths and butterflies, and favoring oak, ash, and sycamore trees They tend to nest in scrub areas usually closer to the ground The cover image is from a loose plate of Hungarian origin The cover font is Adobe ITC Garamond The text font is Adobe Minion Pro; the heading font is Adobe Myriad Condensed; and the code font is Dalton Maag’s Ubuntu Mono Special Upgrade Offer If you purchased this ebook from a retailer other than O’Reilly, you can upgrade it for $4.99 at oreilly.com by clicking here Interactive Data Visualization for the Web Scott Murray Editor Meghan Blanchette Revision History 2013-03-04 First release Copyright © 2013 Scott Murray O’Reilly books may be purchased for educational, business, or sales promotional use Online editions are also available for most titles (http://my.safaribooksonline.com) For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com Nutshell Handbook, the Nutshell Handbook logo, the cover image, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc Interactive Data Visualization for the Web, the cover image of a long-tail bushtit, and related trade dress are trademarks of O’Reilly Media, Inc Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein O’Reilly Media 1005 Gravenstein Highway North Sebastopol, CA 95472 2013-04-15T10:22:04-07:00 ... 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, 97 8-1 -4 4 9-3 397 3-9 .” If you... for creating data visualizations But that kind of undersells it The abbreviation D3 references the tool’s full name, Data- Driven Documents The data is provided by you, and the documents are web- based... at the element’s lower-left corner Also, the list’s position in the DOM hierarchy is indicated in the lower-left corner of the inspector: html > body > ul The box for the ul expands to fill the