Download: javascript, html, data

Using D3

If you are just getting started with JavaScript and D3 as I was, I'd recommend starting with a foundational tutorial like this one. One great thing about developing visualizations using D3 are the many, many examples published by one its the key developers, including code exerpts. However, integrating multiple of these features into the same visualization is not always straightforward. This page and each following will incrementally build up our visualization, highlighting key examples, resources, and challenges of implementing each additional feature.

Making Maps in D3

We want to make a map using D3, a pretty common task with plenty of examples. To do this, we will need a TopoJSON representation of country boundaries. TopoJSON is a data-exchange format for representing geographic data. It is an extension of the JSON and GeoJSON formats, but with the addition of a topology, meaning features can share boundary points and lines, which reduces file size and encodes adjacency. (Learn more about the TopoJSON format)

I found a suitable TopoJSON after browsing a few examples of D3 world map examples online. This was my first D3 project, so I needed a bit more hand holding to get up and running. This video gives a great explanation of the whole process of mapping, projections, and binding data to a static map for display:

One thing to note: I used a power scale to determine the color gradiant of countries:

	var countryColor = d3.scalePow()
			.exponent(.2)
			.domain([0,maxCount])
			.range([minColor, maxColor])
			.clamp(true);
	

The maxCount constant is calculated to be the largest number of records for a single country in a single year. Alternatively, we could use quantized color steps using d3.scaleThreshold, which would make differences between countries more obvious (Bostock example).

Adding Animation

Once we've figured out how to use our countryColor function to color countries statically for a single year, we can add animation by doing the following:

Files used in this visualization: javascript, html, data
Next: Adding a Tooltip