Posted on July 25, 2016

Brushable and interactive bar chart in d3.js

I wanted to share something I recently build with d3.js which might be useful for other people as well; a bar chart in which you can “brush”. Handy for when you have a lot of categories/bars to show with limited space, but you don’t want to only show the top X. By using the brush technique, you give the choice to the user. They can decide which portion of the bars to see, only the top 5, bottom 10, 20 in the middle, or all at once.

If you’re looking at this example on a wide enough screen (at least 600px wide) you can try it out in the example below. Otherwise, you’ll see a static image with a few different selections made. The rainbow gradient is only there because it made the chart more fun to look at while I was developing (⌐■_■)

Brushable horizontal bar chart

You can choose to view more bars or less bars of the total bar chart (on the left) by either dragging the box in the mini chart (on the right) or by scrolling your mouse. You can also click anywhere in the mini chart to center the box on that region. And you can increase and decrease the size of the box by dragging the top or bottom handle up or down.

An image of the brushable bar chart

In the example I’ve generated 40 random values and label names. On the right of the two charts, you can see all these 40 bars in a small version with a box on top of it. In the left (larger) bar chart we only see the bars that are present within that small window of the smaller chart on the right. You can move the box up and down and if you’re on a desktop you can increase its size by dragging the handles, or move its position by clicking anywhere else in the mini chart or scrolling up and down.

If you haven’t heard the term brushing in relation to data visualization before, no worries. It generally refers to selecting part of the data by using your mouse to make a selection in the chart. For example, selecting several points in a scatterplot by dragging a (possibly) invisible rectangle over the area containing the points. This and more nice and/or simple examples are already out there that showcase the brushing technique

However, I couldn’t find a straightforward example that applies brushing on a bar chart. The reason, I think, has to do with the fact that for line charts and scatterplots you have continuous scales. Even if you see only a small portion of your total time axis, for example, you can extrapolate and predict what lies outside of your axis. A bar chart, on the other hand, is discrete. Even if I am now seeing 3 bars, say for the US, Germany, and France, I cannot predict what other values lie “outside” of that. And because of that, I had to think of another way to tackle a critical piece of code that is used in the brush functionality.

At first, I made 3 versions that work by the brush supplying a new subset of data to the bigger chart to draw. However, this didn’t make for very intuitive transitions. When I shared it on twitter I then got the recommendation from Robert Monfera to think about clipping.

Which was exactly the technique I needed! With the help of this answer on stackOverflow by AmeliaBR I managed to implement a much smoother version. In the new case, the bigger bar chart is also plotted with all of the data, but only the part chosen by the brush is visible (the rest is clipped away).

Example of the brushable bar chart with many bars selected

The code

The new version

The old versions that work with less intuitive transitions between the mini and main bar chart (and require way more code in the brush section)

Happy brushing!

See also