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);
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).
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:
updateDrawfunction that will be called every time we want to alter country color (i.e. every time we increment the year).
d3.interval(updateDraw,timeStep)to call this function every [
updateDraw, increment the year counter:
year = startYear + ((1 + year % startYear) % (endYear - startYear))
.transitionmethod to smoothly change the colors of countries, using the
countryColorfunction we defined earlier and the count for that country in the incremented