Notes on codes, projects and everything

Random Color Cloud

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)

leave your comment

name is required

email is required

have a blog?

This blog uses scripts to assist and automate comment moderation, and the author of this blog post does not hold responsibility in the content of posted comments. Please note that activities such as flaming, ungrounded accusations as well as spamming will not be entertained.

Click to change color scheme