Sign up ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have a short time range tstart – tend ( ≈ 90 seconds) and a list of points in time which represent events that occurred at that point. I'm looking for a concise visualization of these occurrences which shows (a) the number of events and (b) patterns like clusters or a bias for some point.

My ideas so far:

  • a timeline with single ticks per event
  • a timeline with discrete cells, colored corresponding to event density (cf. heat map)
  • a circular timeline, like a clock; maybe even looking like a clock or stopwatch

enter image description here (Sorry for the terrible image quality)

Any comments or other ideas?

Bonus question: How to extend these ideas if events belong to a small number (<10) of different categories?

share|improve this question
Are you constrained to 1 dimension in the display. I'm thinking along the lines of graphing the frequency/cumulative total and labelling events. – Brendon May 17 '13 at 15:32
How many events can occur at a single instance? What do you mean bias for a point (how is it different than clustering)? – rk. May 17 '13 at 16:18
@Brendon: I'm not really contrained per se, but I would prefer the diagram not to be very high/big. It's displayed next to other, more important diagrams. – Sebastian Negraszus May 17 '13 at 16:18
@rk.: I'm not sure about the number of events, yet. Requirements always changing and all that. But it might range from 0 to about 30, maybe less. – Sebastian Negraszus May 17 '13 at 16:34
@rk.: Yes, you are right, "clusters" and "bias for a point" is essentially the same, just from a different perspective. – Sebastian Negraszus May 17 '13 at 16:35

4 Answers 4

up vote 7 down vote accepted

You can do a simple timeline with a histogram to achieve your end-result. The individual boxes are events and the height of the histogram tells you about clustering and peaking on individual time frames.

If your data is not discrete and is continuous, you can use a line graph or an area chart.


download bmml source – Wireframes created with Balsamiq Mockups

I will refine the answer based on your feedback.

share|improve this answer

Playing off rk's answers a bit, I would visually cluster the events by some piece of metadata, such as

  • category
  • duration
  • region


download bmml source – Wireframes created with Balsamiq Mockups

This approach will run aground with scaling issues, and is definitely more developmentally-intensive. Prioritize by the business value of such clustering.

share|improve this answer

I recommend using a combination of the first two images, especially the second. Essentially it is a 1D heat map.

enter image description here

It's pretty easy to create one using HTML, CSS, and JS:

<!-- HTML -->
<div class="bar"></div>

/* CSS */
.bar {
    border:1px darkgray solid;
.bar span {
    background-image:linear-gradient(to right, transparent, red, transparent);

// JS
function HeatBar(bar){
    this._bar = bar;

HeatBar.prototype.createTick = function(/* float{0,1} */ atOffset, opacity){
    var bw = this._bar.offsetWidth * atOffset;
    var el = document.createElement("span"); = opacity; = bw + "px";

var barElem = document.querySelector(".bar"),
    bar = new HeatBar(barElem),
    numTotal = 50;
for(var x = 0; x < numTotal; x++)
    bar.createTick(Math.random(), 10/numTotal);

Demo. Notice that I change the opacity based on the number of total elements.

You can also add functionality to show just the lines without gradient on click if you'd like, which looks like this.

enter image description here

The additional code:

/* CSS */
.removeGradient span {

// JS
barElem.addEventListener('mousedown', function() {
}, false);

barElem.addEventListener('mouseup', function() {
}, false);

You could also layer them to show different events using multiple .bar elements stacked on top of each other (using absolute position and the color changed) or just change the color of lines on one .bar element using some JS logic which would end up looking similar to this:

enter image description here

share|improve this answer

You can make a time map, which is a scatter plot showing the timings between subsequent events. Each point on the scatter plot represents an event in time. The x-coordinate of an event is the time between the event itself and the previous event. The y-coordinate is the time between the event itself and the subsequent event. See some cool examples here:

share|improve this answer

Your Answer


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.