back · main · about · writing · notes · reading · d3 · now · contact · uncopyright


Graphs 'n stuff: simple bar chart with d3
1 May 2016 · 567 words

This next introductory example is a simple bar chart with a rollover tooltip. This bar chart uses the d3-tip tooltip capabilities to enhance on the tooltip shown in our scatterplot.

It’s a graph of the number of internet users over time, also displaying the percentage of the world’s population as rollover information. The code is here.

I’ll be abandoning the Wp-D3 plugin I’ve been using for the moment (it’s just too fiddly for my liking) and instead link directly to the code with the graph.

Some interesting things that I learnt making this bar chart:

//we'll specify the domain once we read in our data
var xScale = d3.scale.ordinal()
		.rangeRoundBands([width,0], .1);

Then we specify the domain inside the d3.csv block:

xScale.domain(data.map(function(d) {return d.Year;}));

//we don't need to use map function here, because we only want the maximum value
yScale.domain([0, d3.max(data, function(d) { return +d["Internet Users"]; } )]);

svg.append("text")
    .attr("transform", "rotate(-90)")

There is a caveat to this! When you rotate an element, you don’t just rotate what you see on the screen - you rotate its entire frame of reference. This means that when you try and position the label with x and y coordinates, it’s not going to go where you intuitively think it will. A great explanation of this can be found at d3noob’s site, as well as steps you can take to adjust the positioning. * You can create really nice tooltips using d3-tip‘s capabilities. I haven’t been able to get anything working past this basic example, but I was really impressed at the look and appearance of the tooltip. It’s certainly much more impressive than the method used in our scatterplot example.

On a side note, I think it’s a really underrated aspect of chart design to not have the same information encoded in multiple places. A bubble chart that uses both size and position to tell the same information is worse than one that only uses one method. Similarly, here the tooltip information (percentage of internet users of world population) isn’t a simple regurgitation of the values the points represent, but provides alternate information.

On the other hand, a stacked bar chart would undoubtedly be a better way of presenting the tooltip information. That, however, is a post for another time!


back · main · about · writing · notes · reading · d3 · now · contact · uncopyright