Displaying overlapping events in a scalable timeline

Question

In addition to a changelog-style data display tool, I am adding a timeline that visualizes when these changes happened. The timeline should be infinitely variable, with the possibility of zooming in out to change the total length of the timeline between a day and even several months. The event items should always stay clickable to show details. The events do also belong to different groups, that I'd like to display with colors.

I initially came up with a simple 1-D timeline, that uses horizontal bars to display the events. Since the events apply to only a point in time, making the bars wider would also mean the actual pointer on the timeline gets more inaccurate. Thats why I came up with those little flag-like markers, that are both accurate and also provide a larger click-area.

Now the point where I'm stuck is when several events get very close to each other, especially when zooming out. The points will wander together until they are not distinguishable any more. The solution to merge the pointers and displaying a number on the flag seemes to be a good solution, but when events of different groups merge it can get very frustrating.

Do you think my solution is sufficient in terms of usability? Can you think of any other solutions?

Answer 1

I've a bit of experience designing timelines, here's the end result of one of them that solves your multi event problem you've noted - Industrial-Heritage or Operation Dynomo.

What happens here is that a stacking order is set as and when needed, it recalculated at the different zoom levels to where possible remove the stack if more precise dates are available.

These examples use javascript to render canvas elements to represent the plotted events. There are a few scripts to note that offer timeline functionality, I'd recommend looking at how the common challenges have been overcome in jqplot, D3, smile widgets and timelinejs. We spent quite a long time working with the options extending them quite considerably for what we needed - a customised jqPlot is used in the above examples.

Since this app we have been developing a further timeline for another client due to launch soon. This time round we have written the scripts required for the functionality as you'll be aware of if you've used javascript libraries in the past they come with huge amounts of code that you never actually use or only use a single function from a perquisite library of hundreds.

Hope this helps you make some decisions and don't forget Julian Day challenges if your dates pre date what can be stored in a database!

Answer 2

You could put the "flags" at different heights. Given enough height, the only limit on accuracy is when the width of a unit of time between events becomes less than one pixel. Flags should be the same color as their poles. Intelligent (programmatic) color selection can ensure the sequence is discernable even when the vertical lines (poles) are touching. Simultaneous events are illustrated by multiple flags on the same pole (the green flags here).

Answer 3

When the users zoom out to the point that there are multiple event stacks overlapping, you could give them second level options to view the details, when they tap on the timeline. See image below.

So on the first click on the overlapping area, all event stacks in that time period can be displayed in a row with color coded icons, and then they can click on any of those icons to explore them further.