Bar Graph Controlling - From the Graph Itself or from External Control

Question

I have a bar graph on my page I'm generating from D3. The graph itself looks good. Here's the question:

My graph has the following bars:

bar1 ****************
bar2 *******
...
barn ************

Now, each of these bars can be expanded into subcomponents:

bar1a *******
bar1b ***
... 
bar1n ***
...
barn ************

Currently the way I'm expanding these bars is I have a little "x" on the left, so something like this:

x bar1 ****************

Finally, on the left, I'm going to use a tree control which will help display and filter the bar graph. I'm using this: https://code.google.com/p/checkboxtree/

My question: Is it good UX design to use the checkboxtree control to control the graph itself? Thus, if I have my tree menu w/ bar1 as a root, then I expand it, I will get (in the tree menu)

bar1
...bar1a
...bar1b
...bar1c

Then the bar graph will respond in that manner?

Thanks for your time

Answer 1

The lower the friction you put between the user and their drilldown. The more usable the system.

I've seen drilldowns like you're suggesting used effectively in the past. However in each of those cases the core problem was the discoverability of the drill-down functionality.

You'll have to think very carefully about the icon you use to indicate that the bar graph is interactible in this way. I'd suggest using a couple of different icons and user-testing them.