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.