Brushable & interactive bar chart in d3.js

Sharing some code

Posted: July 25, 2016-Likes: 2-Comments: 4-Categories: D3.js, Data Visualization, Interactive-Tags: bar chart, brush, D3.js
You are here: ...
Home / Blog / D3.js / Brushable and interactive bar chart in d3.js

A short post where 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 brushing 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.

You can try it out in the example below. The rainbow gradient is only there because it made the chart more fun to look at while I was developing.

I’ve generated 40 random values and label names. On the right, 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 placed within that small box of the right chart. 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.

Brushable horizontal bar chart
You can see more or less 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.

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.

There are already several nice and/or simple examples out there that showcase the brushing technique

I’ve also used it before on my Babynames project to select a specific time frame

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 and 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 placed within the visible section.

Example of a bar chart in which you can brush to select different categories

Give the user the option to select any range and number of bars they want

The Code

The details don’t really matter, I just wanted to share the code for 5 working versions, all slightly different

The new version

  • Version IV – The bars of the main chart are now smoothly appearing and disappearing. The x-axis is not updated
  • Version V – Same as version IV but with an updating x-axis

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)

  • Version I – The x-axis does not change on a brush and the bars shrink on exit
  • Version II – Same as version I but the bars not fade and shrink upward on exit and the update & exit steps happen simultaneously to speed things up
  • Version III – Same as version II but now the x-axis also updates to always fill the chart area with the largest value

Happy brushing!

Prev / Next Post
Comments (4)
  • Nick Braunagel - November 1, 2016 - Reply

    Hi Nadieh,

    Love this visualization. I am trying to update the version V code to a log scale [d3.scale.log()] but am receiving errors when the browsers tries to assemble the rectangles (i.e. NaN lengths). I would think simply updating the var main_xScale to a log scale would do the trick – but no? Any help would be appreciated.

    • Nick Braunagel - November 3, 2016 - Reply

      Actually, I figured it out, no big!

  • Michele Smith - January 24, 2017 - Reply

    Can you imagine utilizing this to put numbers on the band? Something like:

    52 5 10 3 24

    and how that might work?

    A continuous ribbon of color like shown here but with five distinct numbers on a horizontal continuum.

  • Kevin Kaiser - November 9, 2017 - Reply

    I ported this useful visualisation to d3.v4:

    Great work!

Add comment

thirteen + five =