Representing the presence of short events in a long timeline

Question

I am designing an interactive timeline that shows the durations of events visually categorized into a small set (<8 categories). This timeline is very long compared to the length of events: events may have a duration as short as 1, while the timeline has a duration of 10-30k.

At a particular level of zooming out, I may be representing 10 or more units in a single pixel width. In this case I'd like to differentiate between a single event category covering the time versus many events occurring within this time period. However, additionally, I'd also like to indicate what event category was predominant during that period.

The timelines must be horizontal, and I have up to 20 vertical px to work with.

How would you visually convey both predominant category and 'there exist subcategories' to the user?

Here are my current design ideas:

One idea is to display "there are one or more events less than 1px wide here" as a small black bar not filling the height fully. For example:

Another idea I had while writing the question was to use the vertical space more fully: have one bar at top representing the predominant event category during the period, and then separate rows for each type of events below that. This has the added benefit that you can see exactly which three event categories occupy a single pixel. There is the added benefit that--since it can be hard to see the color of a single pixel--the vertical row placement shows the event category also.

Answer 1

How long are the inter-event-block times? If there is enough "pause" in between events, just use one pixel width even for shorter events; communicating the existence of an event at a certain point is more important than correctly communicating its relative duration.

I do have a problem with single-pixel lines of different colors near each-other. They may perceptually overlap, resulting in another perceived color altogether, or in an uncomfortable focusing of the eyes. The red-blue combination in your top-right example is representative of this; my eyes are already burning while focusing on it.

Finally, re-consider what are the real, hard, requirements for this timeline. Is existence or relative duration more important to show? Why is it important to show the categories? Is the exact information important, or the "trend" information? If the trend is more important, then a heat-map visualization of your timeline could be more useful. You may be able to combine it with a lens on mouse-over to show the fine-grained detail in a visualization similar to what you have above.

Answer 2

Do your users need to interact with the visualisation or just interpret it?

If interaction is necessary, things that are a single pixel wide are going to be pretty hard to target.

Another thought - do you necessarily need a linear scale, that is do your users need to be able to identify that a particular period was 6x another one, or is it sufficient if it's merely clear that one period was longer.

To illustrate, here's your same sequence of tasks, using a logarithmic scale:

You can still clearly see the sequence of events, and the relative length of events can be judged (i.e. the blue event was shorter than the red).

Answer 3

It is always a challenge. As a starting point, consider using colour to distinguish - as you seem to have started doing. So orange for a single event, and red for mutliple events.

Using the height does not work for me, unless you swap it around, so have it smaller representing fewer items, and higher representing more. Of course, this means you have to know what proprotions to use and it becomes complex. For me it is the wrong way round and so does not work.