EDIT: I’ve now created a much more intuitive version of this chart. View version IV for a non-updating x axis and version V for a updating x axis. So you can basically ignore this one :)
For a bit more background, you can read my mini-blog about it Brushable & interactive bar chart in d3.js
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
This brushable horizontal bar chart gives you the option to browse through a large dataset without the separate bars becoming too small.
You have the option to adjust how many bars you’re seeing at the same time by adjusting the size of the little box on the right mini chart.
You can also move the box and see the bars that you’ve selected appear in a bigger form on the left. Moving can be done either by grabbing and moving the box or scrolling
I have another version that uses a slightly different way to transition can be found here: Brushable Horizontal Bar Chart - II
The reason why the code is divided up into the overarching functions is to prepare it a bit already for the charting framework that I work with at my day job (and yes, I know the global variables are not-done, but I’m not known for writing beautiful or short code :) )
Why the rainbow? Just because it made it more fun to look at during the development :) (Please don’t use a rainbow for a serious case though)
Some options to think about: You can update the x axis domain to update when you select a new set of bars, so that the largest bar always fills the space. This way you can see the smaller bars with more detail. Just wondering if that is confusing for a viewer… which I finally did in Brushable Horizontal Bar Chart - III
Although I found tidbits to get to this point all over the web, the initial help to set up an ordinal brush came from this example
Tested in (new versions of) Chrome, Firefox and Safari
Built with blockbuilder.org