Just happened to see this post a few months ago, and the author created another cloud that uses almost the same technique to ‘visualize’ a list of countries. The author uses PHP to generate the cloud originally and I thought I may be able to do in javascript. After some quick coding I managed to produce something similar to the first example, source code after the jump.
<html>
<head>
<style>
span:hover { cursor: pointer; font-size: 400%; }
</style>
</head>
<body>
<script>
for(var i = 0; i < 1000; i++) {
var span = document.createElement('span');
span.setAttribute(
'style',
'position: absolute; ' +
'left: ' +
Math.round(Math.random() * 90 % 90).toString() +
'%; ' +
'top: ' +
Math.round(Math.random() * 90 % 90).toString() +
'%;' +
'color: rgb(' +
Math.round(Math.random() * 256 % 256).toString() + ',' +
Math.round(Math.random() * 256 % 256).toString() + ',' +
Math.round(Math.random() * 256 % 256).toString() +
'); '
);
span.setAttribute(
'class', 'c'
);
span.appendChild(document.createTextNode(
Math.round(Math.random() * 256 % 256).toString()
));
document.body.appendChild(span);
}
</script>
</script></body>
</html>
Too lazy to produce a preview page, but it should look somewhat like the original page, except that the caption isn't related to the color. The above script is not tested on other browsers besides Firefox 3, so they may break (I am extremely suck at Javascript hence I rely on YUI a lot, hopefully get to writeup on YUI soon)
