CO2 Emissions

A Beeswarm plot

This is a version of my previous chart about C02 emissions, using D3 force layout to create a beeswarm plot. This plot shows data regarding 196 countries.

Click to hide/show:  

What is a beeswarm?

In short, a beeswarm plot is a one-dimensional plot, that is, a plot where just one axis contains information. Unlike a stripchart, the points don’t overlap in a beeswarm plot.

There are some advantages in using a beeswarm. For instance, this plot shows 196 countries at once, and that would be awkward in a bar chart. Besides that, we can get the “whole” picture quicker: it’s easy to see that 5 countries stand out when you select total emissions and linear scale.

Under the hood: D3 4.0

This visualization uses the new version of D3. For those familiar with D3, some changes in the API are important. For instance, look how a linear scale is constructed and how the respective axis is set in D3 4.0:

		var xScale = d3.scaleLinear()
			.range([ padding[3], w - padding[1] ]);

		var xAxis = d3.axisBottom(xScale)
			.ticks(10, ".0s")

But the most interesting part is, definitely, how D3 4.0 deals with enter and update selections: look at the “merge”:

		var countriesCircles = svg.selectAll(".countries")
			.data(dataSet, function(d) { return d.countryCode});//join the data

		countriesCircles.exit()//this is the exit selection
	    	.attr("cx", 0)
			.attr("cy", (h / 2)-padding[2]/2)

		countriesCircles.enter()//this is the enter selection
			.attr("class", "countries")
			.attr("cx", 0)
			.attr("cy", (h / 2)-padding[2]/2)
			.attr("r", 3)
			.attr("fill", function(d){ return colors(d.continent)})
			.merge(countriesCircles)//and the "merge" unify enter and update selections!
	    	.attr("cx", function(d) { return d.x; })
	    	.attr("cy", function(d) { return d.y; });

Data for 2011. Source of the data: The World Bank.