Visualization of event occurrences over time

Question

I have a short time range t_start – t_end ( ≈ 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

^{(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?

Answer 1

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.

Answer 2

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.

Answer 3

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

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

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

/* CSS */
.bar {
    height:30px;
    border:1px darkgray solid;
    width:500px;
    position:relative;
    overflow:hidden;
}
.bar span {
    width:10px;
    height:30px;
    background-image:linear-gradient(to right, transparent, red, transparent);
    position:absolute;
    top:0;
}

// 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");
    el.style.opacity = opacity;
    el.style.left = bw + "px";
    this._bar.appendChild(el);
};

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.

The additional code:

/* CSS */
.removeGradient span {
    background-image:none;
    background-color:red;
    transform:scaleX(.2);
}

// JS
barElem.addEventListener('mousedown', function() {
    this.classList.add("removeGradient");
}, false);

barElem.addEventListener('mouseup', function() {
    this.classList.remove("removeGradient");
}, 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:

Answer 4

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:

https://districtdatalabs.silvrback.com/time-maps-visualizing-discrete-events-across-many-timescales