Data Visualization with JavaScript
Stephen A. Thomas
Published by No Starch Press
About the Author
Stephen A. Thomas specializes in frontend development at Georgia Techs Department of Education Technology and has developed complex JavaScript visualizations for the health-care and security industries. He writes and speaks about data visualization in publications and at conferences around the world.
About the Technical Reviewer
Chris Keen resides in Atlanta, Georgia, and has been writing JavaScript since 2004. Chris has had the honor of working on visualizations ranging from an SVG tweet map at Weather.com to full-blown interactive maps with Leaflet.js at Endgame Systems. Chris is currently infatuated with making data dashboards using Backbone, Epoxy, and D3. Chris recently founded Keen Concepts ( http://keenconcepts.io/ ), and he consults on JavaScript-rich web applications.
Acknowledgments
Even though its been said many times, theres no getting around the fact that a book is the work of many people other than the author. This book certainly wouldnt have been possible without the patience of Seph and the other fine folks at No Starch Press. There simply is no better publisher for technical books. Kudos also to Chris for the technical review, though, of course, the remaining mistakes are mine alone. I owe a special thanks to NickC for his generosity; its such a pleasure to meet folks that appreciate the true community spirit of the Web and web development. Finally, shout-outs to the team developing the Open Academic Environment and my colleagues at the Georgia Institute of Technology; working with them is a true pleasure.
Introduction
Its getting hard to ignore the importance of data in our lives. Data is critical to the largest social organizations in human history (giants like Facebook and Google), and its collection has widespread geopolitical implications, as we all saw with the NSA surveillance scandal. But its also getting easier to ignore the data itself. One estimate suggests that 99.5% of the data our systems collect goes to waste.
Data visualization is a tool that addresses this gap. Effective visualizations clarify; they transform abstract collections of numbers into shapes and forms that viewers quickly grasp and understand. The best visualizations impart this understanding intuitively. Viewers comprehend the data immediatelywithout thinking. This frees viewers to more fully consider the implications of the data: the stories it tells, the insights it reveals, or even the warnings it offers.
If youre developing websites or web applications today, theres a good chance you have data to communicatedata best presented in a good visualization. But how do you know what kind of visualization is appropriate? And even more importantly, how do you actually create one? In the chapters that follow, we explore dozens of different visualizations, techniques, and toolkits. Each example discusses the appropriateness of the visualization (and suggests possible alternatives) and provides step-by-step instructions for adding the visualization to your web pages.
The Books Philosophy
In creating this book, Ive tried to follow four main principles to make sure it provides meaningful and practical guidance.
Implementation vs. Design
This book wont teach you how to design data visualizations. Quite honestly, there are other authors far better qualified than me for that (Edward Tufte, for example). Instead, this book will focus on implementing visualizations. When appropriate, Ill take a slightly bigger picture view to discuss the strengths and weaknesses of particular visualization strategies, but the main goal is to show you how to create a wide range of visualizations. (I recognize that sometimes the boss absolutely insists on a pie chart.)
Code vs. Styling
As you might guess from the title, this book focuses on how to use JavaScript code to create visualizations. The examples dont assume youre a JavaScript expertand Ill be sure to explain any code more complicated than a basic jQuery selectorbut I wont spend much time discussing styles for the visualizations. Fortunately, styling visualizations is pretty much the same as styling other web content. Basic experience with HTML and CSS will serve you well when you add visualizations to your pages.
Simple vs. Complex
Most of the books examples are simple, straightforward visualizations. Complex visualizations can be engaging and compelling, but studying a lot of advanced code usually isnt the best way to learn the craft. In these examples, Ill try to stay as simple as possible so you can clearly see how to use the various tools and techniques. Simple doesnt mean boring, however, and even the simplest visualizations can be enlightening and inspiring.
Reality vs. an Ideal World
When you begin building your own visualizations, youll discover that the real world is rarely as kind as youd wish. Open source libraries have bugs, third-party servers have security issues, and not every user has updated to the latest and greatest web browser. Ive addressed these realities in the examples in this book. Ill show you how to accommodate older browsers when its practical, how to comply with security constraints such as Cross-Origin Resource Sharing (CORS), and how to work around bugs in other folks code.
The Books Contents
The chapters that follow cover a variety of visualization techniques and the JavaScript libraries that we can use to implement them.
begins with the most basic visualizationsstatic charts and plotsusing the Flotr2 library.
adds interactivity to the visualizations, giving users the chance to select content, zoom in, and track values. The chapter also shows how to retrieve data for visualizations directly from the Web. For variety, its examples use the Flot library, which is based on jQuery.
looks at integrating multiple visualizations and with other content on a web page; it uses the jQuery sparklines library.
In , we consider visualizations other than standard charts and plots, including tree maps, heat maps, network graphs, and word clouds. Each example focuses on a particular JavaScript library designed specifically for the visualization type.
covers time-based visualizations. It looks at several ways to visualize timelines, including traditional libraries; pure HTML, CSS, and JavaScript; and full-featured web components.
In , we consider geographic data as we look at different ways to incorporate maps into our visualizations.
introduces the powerful D3.js library, a flexible and full-featured toolkit for building custom visualizations of almost any type.
Beginning in , we consider other aspects of web-based visualizations. This chapter shows off the Underscore.js library, which makes it easy to prepare the data that drives our visualizations.
Finally, walk through the development of a complete, single-page web application that relies on data visualization. Here well see how to use modern development tools such as Yeoman and the Backbone.js library.
Source Code for Examples
To make the text as clear and readable as possible, examples usually contain isolated snippets of JavaScript, plus occasional fragments of HTML or CSS. Complete source code for all examples is available on GitHub at http://jsDataV.is/source/ .
Chapter 1. Graphing Data
Many people think of data visualization as intricate interactive graphics of dazzling complexity. Creating effective visualizations, however, doesnt require Picassos artistic skill or Turings programming expertise. In fact, when you consider the ultimate purpose of data visualizationhelping users