Thomas - Data Visualization with JavaScript

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.

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.