Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
2  
As far as others having solved this goes, you should have a look at Highstock charts. –  Supr Sep 3 '13 at 10:42
    
I wasn't aware of high charts, thank you. –  nimrod Sep 3 '13 at 10:56

2 Answers 2

up vote 15 down vote accepted

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;

share|improve this answer
    
This is quite interesting thanks. –  nimrod Sep 2 '13 at 9:48
    
Why is it that worse answer often get more votes in this forum? –  nimrod Sep 2 '13 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 '13 at 22:41

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

share|improve this answer
3  
+1 for having a "useful" initial state –  kwah Sep 2 '13 at 15:19
    
This isn't strictly answering my question. –  nimrod Sep 2 '13 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 '13 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? –  nimrod Sep 12 '13 at 6:25

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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