19

For an interactive graph I'm using a UX pattern called Data Brushing. My starting point is a d3js example by Mike Bostock.

This is what it looks like in its initial state:

enter image description here

The smaller graph below acts as a range control for the large (display) graph above. When you select a range for example from January 2001 - January 2002, the large graph will update to show only data within that range.

enter image description here

The problem I have with this interface that the relationship of the two graphs is very unclear for first time users.

My question is:

How have other people solved problems like this? Are there any established design patterns for problems like this?

Improve this question
1
  • 2
    As far as others having solved this goes, you should have a look at Highstock charts.
    – Supr
    Sep 3, 2013 at 10:42

2 Answers 2

Reset to default
16

As you have mentioned, the 2 graphs are "disconnected" from each other and there is no clear visual relationship to link them together.

I have seen controls like these commonly used for graphing stocks and putting an explicit link between the 2 charts is definitely the best way establish a link between them.

Google Finance's charts provides a good example by linking the charts and dimming the range scrubber to provide affordance: enter image description here

To try the control out: http://www.google.com/finance?q=NASDAQ%3AMSFT&ei=x1kkUqCNBsSikgWfigE

Yahoo also does something similar by dimming out the lower chart (overview), but does not explicitly connect the 2 charts: enter image description here

Try it out here: http://finance.yahoo.com/echarts?s=MSFT#symbol=msft;range=20110120,20130902;compare=;indicator=volume;charttype=area;crosshair=on;ohlcvalues=0;logscale=off;source=undefined;

Improve this answer
2
  • Why is it that worse answer often get more votes in this forum?
    – Julian Krispel-Samsel
    Sep 2, 2013 at 16:10
  • @nimrod That's why you get to pick your answer. Just realize that what may be a good answer to you may not appeal to others.
    – Brian Ortiz
    Sep 3, 2013 at 22:41
35

Those kind of graph are more and more common but a simple color effect can helps user.

You should change your initial state to an already zoomed state where upper and lower are differents for more clarity. Graph with color

Improve this answer
3
  • This isn't strictly answering my question.
    – Julian Krispel-Samsel
    Sep 2, 2013 at 16:09
  • 1
    Initial state + color effect helps a lot to understand the link between graphs. I think user can appropriate this kind graph very quickly. The only functionality I dislike on the example is single click outside selected region. On the sample it unzoom it should move the zoom windows centred on mouse position. Drag and resize is not so common and should be discovered when playing with the graphs, or when seeing change of mouse cursor on selected region.
    – ColdCat
    Sep 2, 2013 at 16:37
  • let me reiterate my question: How have other people solved problems like this? Are there any established design patterns for problems like this?
    – Julian Krispel-Samsel
    Sep 12, 2013 at 6:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.