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.
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.
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")
.tickSizeOuter(0);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
.transition()
.duration(1000)
.attr("cx", 0)
.attr("cy", (h / 2)-padding[2]/2)
.remove();
countriesCircles.enter()//this is the enter selection
.append("circle")
.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!
.transition()
.duration(2000)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });Data for 2011. Source of the data: The World Bank.