Did you know that you can navigate the posts by swiping left and right?

Introduction to D3

September 08, 2016, September 08, 2016 | Comments

d3 web javascript html css

When surfing on the Internet, I am always fascinated by animated, interactive graphs, such as TheUpshot of New York Times and Information Graphics of Washington Post. As a die-hard coder, the next natural question to me is: which tool(s) do they use to create these fancy graphs? After researching, I was still not 100% sure of answers since they use various kinds of tools but D3 comes to my eyes.

1. What is D3?

alt text

D3, Data-Driven Documents, is a JavaScript library for producing dynamic, interactive data visualization by implementing front-end triplets, HTML/CSS/JavaScript. It is hosted on GitHub Repository as an open source project and maintained/contributed by its creator Mike Bostock and other contributors. According to GitHub ranking, it is ranked as one of top 5 repositories as of September 8, 2016. The first release as on February 18, 2011.

alt text

2. Key Features

One of the key features of D3 is to bind the data to DOM (Document Object Model) and apply data-driven transformation to the document which eventually generates visualization on web browsers. In this way, large data sets are bound to SVG object with associated properties (shape, color, values) and behaviors (transitions, events) and users can easily apply CSS to style them for final visualization.

3. How to Use D3

There are two ways to include D3 into our project: offline and online.

## Offline Option
<script src="../d3.v4.min.js"></script>

## Online Option
<script src="https://d3js.org/d3.v4.min.js"></script>

Starting from version 4.0, D3 allows user to standalone microlibraries. For example,

<script src="https://d3js.org/d3-selection.v1.min.js"></script>

For the whole list of modules, please refer to D3 GitHub project page.


(1). D3 official website, https://d3js.org/.
(2). D3 GitHub wiki page, https://github.com/d3/d3/wiki.