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>
