Tag clouds: easy as falling off a log

January 10, 2008

Yesterday I had a discussion about tag clouds, as a result of a heads-up about an NZETC example tag cloud generated by the Many Eyes site, and realised that this could be very useful for allowing the visualisation of names mentioned in each of the texts on the NZETC site, and is also pretty easy to implement.

After finding a post about an Javascript algorithm for tag clouds, I rolled a simple example to show how easy it actually is:

<html>

<head>
<script>
function processCloud(id,max) {
	var cloud = document.getElementById(id);
	if(!cloud) return;

	var tags = cloud.getElementsByTagName("a");
	for(var i=0;i<tags.length;i++) {
		var tag = tags[i];
		var title = tag.getAttribute("title");
		var f = title.substring(title.indexOf(":")+1);
		var fontSize = (150.0*(1.0+(1.5*f-max/2)/max))+"%";
		tag.style.fontSize = fontSize;
	}
}
</script>
</head>

<body onload="processCloud('cloud', 100);">

	<div id='cloud'>
		<a href='#' title='Joseph Banks:50'>Joseph Banks</a> 
		<a href='#' title='William Bligh:2'>William Bligh</a> 
		<a href='#' title='James Cook:80'>James Cook</a> 
		<a href='#' title='David Samwell:12'>David Samwell</a> 
		<a href='#' title='Tobia Furneaux:20'>Tobia Furneaux</a> 
		<a href='#' title='Omai:3'>Omai</a> 
	</div>

</body>

</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: