# Visualization of event occurrences over time

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

(Sorry for the terrible image quality)

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

• Are you constrained to 1 dimension in the display. I'm thinking along the lines of graphing the frequency/cumulative total and labelling events. May 17, 2013 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, 2013 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. May 17, 2013 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. May 17, 2013 at 16:34
• @rk.: Yes, you are right, "clusters" and "bias for a point" is essentially the same, just from a different perspective. May 17, 2013 at 16:35

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.

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

• category
• duration
• region

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

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

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

// JS
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: