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.

enter image description here

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

3 Answers 3


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!

  • Many thanks for your examples. The stacking in your timeline looks good, but arraning the stacks seems to be only done for a specific zoom level - when zooming out, the blocks again move together. The overall concept seems similar to how Simile does this, which we also took into consideration, but rejected eventually because is had problems with some browsers.
    – J_rgen
    Commented Oct 25, 2012 at 20:30

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).

timeline "flags" and "poles"

  • Very creative, I like how the order of the items is preserved. The downsides for me are the needed height and a certain limitation of items in the crowd.
    – J_rgen
    Commented Oct 25, 2012 at 20:38

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.

enter image description here

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.

Your Answer

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

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