Last week the data visualization and data journalism communities were buzzing with delight over the latest release of the D3 JavaScript library. Mike Bostock shared the news via a tweet and commits to the GitHub project site. A summary of new features and enhancements can be reviewed on GitHub. If you want to skim over a detailed list, check out the changes page.

D3 4.0 tweet

D3 Data-Driven Documents

D3 Data-Driven Documents is an open source, freely available JavaScript library for producing gorgeous and fully interactive data visualizations in web browsers. It is released under a BSD license via GitHub. You may use, modify, and adapt the code for noncommercial or commercial use at no cost. Since D3’s use of SVG, HTML5, and CSS web standards provides rich rendering capabilities without lock-in to a proprietary framework or expensive usage-based pricing model, you see it used everywhere today. D3 is found in top online news publications, personal blogs and even in mainstream, paid/fee-for-service/licensed data visualization applications.

The D3 gallery has been one of my favorite inspirations for years! It is a massive playground of live examples that you can copy and paste into an HTML page to jump-start your own online interactive viz for storytelling with data.

D3 Gallery

Source: https://github.com/d3/d3/wiki/Gallery

I first stumbled on D3 in October 2012 when looking for a Treemap to add into Excel using the Office Web Apps framework before it was available out-of-the-box. If you have not seen the D3 gallery and you love data visualization, you have been missing out. I urge you to explore it and the newer gallery of live Bl.ocks.

Mike Bostock’s Blocks

Source: http://bl.ocks.org/mbostock

How D3 Works: Oversimplified

Embedded within an HTML page, D3 provides developers with deep control over chart creation – the look, feel, animation, and user interaction. A referenced JavaScript D3.js library with pre-built functions can be used to draw visualizations, select elements, create SVG objects, apply styles, add transitions, create dynamic effects and tool tips.

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

Data in various formats can be bound using D3.js functions. Typically data is loaded in JSON, comma-separated values (CSV), geoJSON, or with custom JavaScript functions to read in other data formats.

Here is a Basic Bar Chart Example from the D3 tutorials.

Basic Bar Chart Example Code

<!DOCTYPE html>
<meta charset="utf-8">

<style>
.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}
</style>

<div class="chart"></div>

<script src="//d3js.org/d3.v4.min.js"></script>

<script>
var data = [4, 8, 15, 16, 23, 42];
var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 420]);

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .text(function(d) { return d; });
</script>

Basic Bar Chart Example Output

If you use WordPress for your web site or blog, you will likely need to add a third-party plug in such as Wp-D3, upload your CSS and/or customize your code. WordPress can be a bit more challenging at times.

WordPress Plug-In

More Fun with D3

Here is a recent animated interactive map example called “All the World’s Immigration Visualized” by Metrocosm.com. (Note: I do not have permission to embed the live D3 map. Please visit Metrocosm.com to visually explore the map to experience the interactive, contextual animations.) Here is a publicly shared YouTube video of it.

New to D3?

If you want to learn D3, pop open your favorite HTML IDE, add a reference to the JavaScript library, copy an example, and dive on in customizing it. I started by playing with samples and then read Interactive Data Visualization for the Web by Scott Murray. For Association for Computing Machinery (ACM) members, that book is available on Safari Books Online in your digital library.

Tip: ACM is one of my must-have subscriptions for a minimal $99/year. The books online perk is invaluable to me.

Additional D3 learning resources include but are not limited to the following: