D3.js is an open source JavaScript library that provides the facility for manipulating HTML documents based upon data, using JavaScript as the language for implementing the mapping of data to the documents. Hence, the name D3 (Data Driven Documents). Many consider D3.js as a data visualization library. This may be correct, but D3.JS provides much more to its user than just visualization, such as:
Binding of data to visual elements.
Specifications on handling the addition and removal of data items.
The ability to style DOM elements dynamically.
Definition of an interaction model for the user with the data.
The ability to specify transitions between data visualizations based upon dynamic changes in data.
D3.js helps you bring data to life using HTML, SVG, and CSS. It focuses on the data, the way it is presented to the user, the changes in visualization with changes in data, and the way the user interacts with data through the visualization.
We are about to start on a fabulous journey of discovery with creating rich data visualizations with D3.js, and focusing on project-based learning of D3.js through practical examples. We will start out with the basic concepts, and then move through various examples of creating living data visualizations with D3.js.
In this first chapter, we will start with a brief overview of several of the concepts in D3.js, create a minimal D3.js application, and examine several of the tools that you can use to build D3.js applications.
Specifically, in this chapter, we will cover the following topics:
A brief overview of D3.js
The key design features of D3.js, including selection, data management, interaction, animation, and modules
An introduction to development tools to get you going quickly with D3.js
A simple Hello World program using D3.js
Examining the DOM generated by D3.js with the Google Chrome Developer tools