Recently I’ve been experimenting with and trying to learn the D3.js library in order to create ziplines and develop some relative expertise at Free Code Camp. D3 stands for Data Driven Documents. As a former cartographer and information graphic artist in the 90s, discovering the possibilities with D3 for browser based interactive applications is like Geraldo Rivera discovering Al Capone’s vault! (except he didn’t…)

While it’s seemingly straightforward for those who have climbed the learning curve, “getting it” takes some experimentation, practice and intuition. Several reasonable tutorials exist for learning the library but its fair to say that whether one speaks to you at this moment depends on your prior javascript experience.

My first attempt at creating a bar chart with D3 was held up mostly be json data extraction and a standard array…pretty basic data manipulation as far as javascript goes, but because all the existing D3 tutorials I found had explicitly named key:value pairs, it took me two days to figure out that d.name and d.value as used in the examples were the same thing as d[0] and d[1] in my simple nested array structure that did not have named keys.

Small setbacks like that can be extremely frustrating, but it does seem it’s part of the learning experience.

So here is my short, and growing list of fundamental D3 tasks that should help you learn to not just follow or copy a tutorial, but start to manipulate the DOM and your data to create the visualizatoins you want.

My personal goal is an understanding of D3 that is good enough to not have the coding “get in the way” of creating the visualization I want.

Basic D3 skills

1. Know how to import the library into your JS project

<head>
    <script src="http://d3js.org/d3.v3.min.js"></script>
</head>

2. Manipulate the HTML DOM elements, similar to JQuery

HTML:

<div class="infobox">
<p>Here is where we will say something.</p>
</div>

JavaScript:

d3.select(".infobox").style("display", "block");	
d3.select("p").text("This bar has a value of " + rect.attr("height") + " units.");

3. Create a simple data array of one dimensional elements to use in your test code

JavaScript:

for( var i = 0; i < 25; i++ ) {
	data[i] = Math.floor(Math.random()*100);
}

4. Using SelectAll, create a new set of rectangles or circles (try both)!

<svg.selectAll("rect")
.data(data)
.enter()
.append("rect")

5. Give them a fill color, width, height & x,y position (for rectangles) or fill, x, y center and radius (for circles) and display them on the canvas. (added to snippet from #4)

svg.selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
.attr("x", function(d, i) {
 return i * 21; })//Bar width of 20 plus 1 for padding
 .attr("y",0 )
 .attr("width", 20)
 .attr("height", function(d) {
 return d; }) //Bar width of 20 plus 1 for padding

Steps 4 & 5 above constitute the very common “selectAll + data + enter + append” sequence that will allow you to generate some self-sufficiency at creating simple D3 documents. When you can do this for a new set of data within a few minutes, that is, you’re no longer debugging the code, and simple looking up reference material and writing from scratch, start keeping an eye open for interesting APIs or data sets that you can create new data sets from.

You can begin to dress them up by implementing best practices for information graphics including a proper scale & labels for your axes, a title, and margins or padding so the chart can “breath”.

GDP Bar Chart with D3

Screen Shot 2015-05-05 at 1.15.14 PM

While this isn’t a tutorial, I hope that this list of basic D3 skills and snippets helps you get oriented to the larger task of creating your “dream charts” with complex data.

Please leave a comment or link to any examples or codepens or gists you’ve created.