Good ways to handle precisely overlapping data points in a graph?

Question

In an application, I have a graph of markers--either with or without connecting lines--in which it is possible to have data points, and therefore markers, that are at the exact same location, even if they represent different data sets. In the image below, there are actually two markers on the right, but they occupy the same space, so appear to be one:

Although the overlapping colors blend, this strikes me as not a strong enough detail to indicate the overlap to the user. I may also provide this graph without lines connecting the points, and so in that case it would be even less clear. Also, if there were two sets of overlapping markers in a row, the connecting lines would also perfectly overlap.

Any suggestions or conventional approaches to alerting the user to this are welcome. (Also, tag edit requested).

Answer 1

For the specific purpose of a graph/chart, I think much of the problem lies in the fact that the two lines in the example in the question are using the same size and shape marker in the first place - and differing by colour alone.

If you used a combination of shape and colour, you're going to improve the situation for sure, and it's a reasonably common approach to overlapping graphs on a single plot - to identify which graph is which (according to the legend) and to disambiguate crossovers and coincidence.

Using semi-transparent colours for the markers would allow the visual effect to be order independent - ie the circle shape would not mask the triangular shape.

Example:

Note: I've previously solved problems of coincidence on an interactive map, (where one footpath begins at the exact same point as another footpath ends) by using differently angled marker pins which don't overlap even if at a common point.

Eg these two pins and when next to each other look like this:

Answer 2

Up to three or maybe four overlaps you can divide the circle into sectors of each color, and add a non-color indication on top of that - maybe the number of overlaps, maybe just a star or something. Beyond that, just provide a multi-color circle (not necessarily reflecting the number of overlaps, as it becomes meaningless) with the indication. On hover you can display the components in an overlay or on a small radius around the real location.

The tricky part is deciding when to call it an overlap - when the overlap is 100%, or 50% or 10% or whatever.

Answer 3

The traditional way to indicate different series' of data would be to use different shaped point markers. For instance +, x, o and # can all be overlapped in the same position without interfering with each other.

One way to differentiate connecting lines which overlap would be to use dotted lines of different colours.

If you pick mark-space ratios that are prime, plot your higher density lines first and make your connecting lines long enough, some parts of each line should always be visible:

Similarly the two techniques can be combined to extend the number of different symbols if you draw your symbols with the dotted lines instead of solid lines.

Answer 4

I have been giving this question some thought... I have been thinking about using things other than color to identify series. Like choosing big dots for the first series, smaller shapes for the second serie and ending up with tiny dots for the topmost series. But in the end I think there is no nice solution for this. Sometimes trying to draw 2 things on 1 spot makes things just more unclear, which is opposite of what you want.

I think the best approach is to simply draw the series on top of each other like you are doing right now (using or not using transparent layers). However...

• It must be made clear to the user what the order is in which the series are drawn. This way a user is aware that one series may hide another underlying series. This can be done by showing the legend in that order.
• It may be useful to allow the user to change that order or at least quickly bring one series to the front (e.g. when hovering over the series or its legend).
• Also quick hiding and showing series may be useful depending on the application.

I am looking forward for answers that prove me wrong.