Tag clouds

by NicosKaralis

HTML

<script src="http://tinysort.googlecode.com/svn/trunk/web/scripts/jquery.tinysort.js"></script>
<div id="tags" class="list" data-min="2" data-max="34">
    <span><a data-count="1" href="#PHP">PHP</a></span>
    <span><a data-count="4" href="#jQuery">jQuery</a></span>
    <span><a data-count="6" href="#Javascript">Javascript</a></span>
    <span><a data-count="34" href="#Design">Design</a></span>
    <span><a data-count="8" href="#ASP">ASP</a></span>
    <span><a data-count="10" href="#JSP">JSP</a></span>
    <span><a data-count="12" href="#Projects">Projects</a></span>
    <span><a data-count="14" href="#Applications">Applications</a></span>
    <span><a data-count="16" href="#Plugins">Plugins</a></span>
    <span><a data-count="18" href="#Snippets">Snippets</a></span>
    <span><a data-count="20" href="#Social">Social</a></span>
    <span><a data-count="22" href="#Twitter">Twitter</a></span>
    <span><a data-count="24" href="#Facebook">Facebook</a></span>
    <span><a data-count="26" href="#MySpace">MySpace</a></span>
    <span><a data-count="28" href="#Google">Google</a></span>
    <span><a data-count="30" href="#APIs">APIs</a></span>
    <span><a data-count="32" href="#Development">Development</a></span>
    <div class="clear" />
</div>

CSS

body {
    width:200px;
    margin: 0 auto;
}
.clear {
    clear:both;
}
span {
    margin: 1px;
    float:left;
}

JavaScript

var lista = $("div span");
lista.tsort('a', {
    attr: "data-count"
});
lista.css('font-size', '0.75em');

var slice = 1 / lista.length;

function morph(start, stop, point) {
    return Math.round((Math.round(stop - start) * point / 100 + start));
}

lista.each(function(index) {
    var value = parseInt($(this).attr('data-count')) * 4;
    var color;

    color = morph(255, 0, value) + ',' + morph(255, 0, value) + ',' + morph(255, 191, value);
    //alert(color);
    $(this).css('font-size', ((index * slice) + 0.8) + 'em');
    $(this).css('color', 'rgb(' + color + ')');
});

/*$('div span').tsort();*/