Time Lapse Tag Cloud

This is a proof of concept for an animation of tag-volume over time. The horizontal rule represents the passage of time, and the vertical rule represents the overall volume of tags at any given point.

play

How to Use It

Add the JS and CSS to your page:

<script src="timelapse_tagcloud.js" type="text/javascript" ></script>
<link href="timelapse_tagcloud.css" rel="stylesheet" />

The JS Setup

//  This object has each tag, with corresponding arrays that contain the 
//  count for each slice of time. The arrays should all be the same length.

var myTags = {	
    "design" : [2,5,5,4,5,6,7,4,2,1,1],
    "art" : [3,4,4,5,5,6,5,4,5,4,3],
    "css" : [4,4,3,2,1,1,2,2,2,3,2],
    "ruby" : [6,7,8,7,6,7,8,5,6,6,5],
    "rails" : [3,2,1,2,2,4,5,4,3,3,4],
    "javascript" : [3,2,1,2,3,4,4,5,5,3,2],
    "programming" : [2,1,1,2,3,1,1,2,2,3,2],
    "sculpture" : [4,5,6,7,5,4,3,5,6,5,3],
    "web" : [1,1,2,3,4,3,2,3,4,5,3]
}

var myStartDate = new Date(2006, 11, 1);

var myEndDate = new Date(2006, 11, 31);

TimeLapsTagCloud.init(myTags, myStartDate, myEndDate);

The HTML

<a id="replaycloud" href="javascript:void(0)" onclick="TimeLapsTagCloud.playTagRoll();return false;">play</a>

<div id="timeline">
	<div id="starttime">
	</div>
	<div id="timebar">
		<div id="currenttime">
		</div>			
	</div>
	<div id="endtime">
	</div>
</div>

<div id="tagvolume">
	<div id="volumebar">
	    	<div id="tagcount">
    		</div>	
	</div>
</div>	

<div id="tagroll">
</div>

Assumptions

The Javascript assumes the presence of DOM elements with the following ids:

replaycloud: This has the "play" link in it. It is hidden during playback.
timeline: This is the horizontal rule for time, with a set width.
starttime: This contains the start date.
endtime: This contains the end date.
timebar: This is the gauge for the current time.
currenttime: This displays the current formatted time.
tagvolume: This is the vertical rule for tag volume, with a set height.
volumebar: This is the gauge for the current tag volume.
tagcount: This contains the text representation of the current tag volume.
tagroll: This contains the animated tags.