Introduction

This chapter is designed to get you up and running with D3.js and covers fundamental aspects, such as what D3.js is and how to set up a typical D3.js data visualization environment. One particular section is also devoted to covering some lesser known areas of JavaScript that D3.js relies heavily on.

What is D3? D3 refers to Data-Driven Documents, and according to the official D3 Wiki:

D3 (Data-Driven Documents or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.

-D3 Github Wiki (2016, August)

In a sense, D3 is a specialized JavaScript library that allows you to create amazing data visualizations using a simple (data driven) approach by leveraging the existing Web standards. D3.js was created by Mike Bostock (https://bost.ocks.org/mike/ ) and superseded his previous work on a different JavaScript data visualization library called Protovis. For more information on how D3 was created and on the theory that influenced both Protovis and D3.js, please check out the links in the following information box. Here, in this book, we will focus more on how to use D3.js to power your visualization. Initially, some aspects of D3 maybe a bit confusing due to its different approach for data visualization. I hope that over the course of this book, a large number of topics, both basic and advanced, will make you comfortable and effective with D3. Once it is properly understood, D3 can improve your productivity and expressiveness with data visualizations by orders of magnitude.

Note

For a more formal introduction to the idea behind D3, refer to the Declarative Language Design for Interactive Visualization paper published by Mike Bostock on IEEE InfoVis 2010 at http://vis.stanford.edu/papers/protovis-design . If you are interested to know how D3 came about, I recommend that you check out the D3: Data-Driven Document paper published by Mike Bostock, Vadim Ogievestsky, and Jeffery Heer on IEEE InfoVis 2011 at http://vis.stanford.edu/papers/d3 . Protovis, the predecessor of D3.js, also created by Mike Bostock and Jeff Heer of the Stanford Visualization Group can be found at https://mbostock.github.io/protovis/ .