Tag Cloud

Mock up/Prototype for creating a Tag Cloud from a comma delim list of tags with frequency count

by CheapSk8

HTML

<div class="tag-list">
    <ul>
        <li>
            <a href="#">Test 1 (2),</a>
            <a href="#">Test 2 (1),</a>
            <a href="#">Test 3 (1),</a>
            <a href="#">Test 4 (4),</a>
            <a href="#">Test 5 (1),</a>
            <a href="#">Test 6 (3),</a>
            <a href="#">Test 7 (4)</a>
            <a href="#">Test 8 (2),</a>
            <a href="#">Test 9 (1),</a>
            <a href="#">Test 10 (1),</a>
            <a href="#">Test 11 (4),</a>
            <a href="#">Test 12 (7),</a>
            <a href="#">Test 13 (13),</a>
            <a href="#">Test 14 (6)</a>
            <a href="#">Test 15 (10),</a>
            <a href="#">Test 16 (2),</a>
            <a href="#">Test 17 (5),</a>
            <a href="#">Test 18 (7),</a>
            <a href="#">Test 19 (5),</a>
            <a href="#">Test 20 (7),</a>
            <a href="#">Test 21 (11)</a>
            <a href="#">Test 22 (3),</a>
            <a href="#">Test 23 (4),</a>
            <a href="#">Test 24 (3),</a>
            <a href="#">Test 25 (9),</a>
            <a href="#">Test 26 (10),</a>
            <a href="#">Test 27 (13),</a>
            <a href="#">Test 28 (6)</a>
        </li>
    </ul>
</div>
<div style="font-size: 20px">Basefont</div>
<div style="font-size: 8px">Maxfont</div>

CSS

.tag-list {
    /*border: 3px dotted #6c6cff;*/
    width: 250px;
    padding: 5px;
    font-family: Verdana;
}
.tag-list ul {
    list-type: none;
}
.tag-list a {
    text-decoration: none;
}

JavaScript

var maxF = 22;
var minF = 8;
var pxPt = 'pt';
$(document).ready(function() {
    var tags = $('.tag-list a');
    var sizes = new Array();
    var tArr = tags.text().split(',');
    for (var i = 0; i< tArr.length; i++) {
        var regX = new RegExp(/\((\d*)\)/gi);
        var m = regX.exec(tArr[i]);
        if (!~$.inArray(m[1], sizes)) {
            sizes.push(m[1]);
        }
    }
    var minC = Math.min.apply(null,sizes);
    var maxC = Math.max.apply(null, sizes);
    tags.each(function() {
        var t = $(this);
        var regX = new RegExp(/(.*?)\((\d*)\)/gi);
        var m = regX.exec(t.text());
        t.text(m[1]);
        var c = parseInt(m[2]);
        var x = Math.round((maxF * (c - minC)) / (maxC - minC));
        t.css('font-size', (x > minF?x:minF) + pxPt);
    });
});