Interaction model for hierarchical selection

Question

For a line chart, I would like the user to be able to drill-down and look at how specific groups are fairing over time. First, there is the selection of dimension and then groups within that dimension. I could use a single menu, two dropdowns, a combination of dropdown and buttons or possibly other more creative solutions.

Do you get any ideas on what would be an interesting/user-friendly way to navigate these?
(The idea is that the actual lines animate when you select a group/click a button.)

Answer 1

Checkboxes will be the best approach in my opinion. They are standard filtering controls and work well in dashboard visualizations.

^{download bmml source – Wireframes created with Balsamiq Mockups}

The drop downs make sense when you have multiple options for a fixed set. Like if you were able to assign different parameters on X and Y axis, you can have dropdown menus for selecting what values go on what axis.

Answer 2

The interaction you describe is a form of faceted filtering. The article is summary of best practices.

Spotfire was one the earliest implementers of this interaction in visualization. As you can see in the image or in the article on faceted filtering, there are a number of ways of subsetting the data being plotted - the appropriate control depends on the variable type represented by the control. This whitepaper discusses faceted filtering applied to data visualization.

There are 2 other design decisions mentioned in the question.

Showing all lines in the same plot. You should consider whether you should plot the subgroups in to different plots. One method of splitting them is a using a trellis graph structure. See page 8 of the whitepaper, mentioned above, for an example.

Animating the lines in response to interaction with the facet controls. Interaction with the controls will remove some lines and add new lines. I'm not sure what animating those changes achieves. Animation would help show changes in a group that remains in the plot. In your example, interaction with any control changes the groups being plotted. Here is a question about plot animation.