/**----------------------------------------------------------------
 *
 *  TAG CLOUD IMPLEMENTATION
 *
 *///--------------------------------------------------------------
var TagCloud = function(){

    var DEFAULT_UNIT = '%';
    var DEFAULT_TEXT_PROPERTY = 'text';
    var DEFAULT_VALUE_PROPERTY = 'value';

    var gatherStatistics = function(data, config){

        var currentMax = data[0][config.valueProperty];
        var currentMin = data[0][config.valueProperty];

        for(var i = 0; i < data.length; i++){
            var value = data[i][config.valueProperty];

            currentMax = (currentMax < value)?value:currentMax;
            currentMin = (currentMin > value)?value:currentMin
        }

        return {
            max  : currentMax,
            min  : currentMin,
            mid  : (currentMax+currentMin)/2,
            unit : (currentMax-currentMin)/100
        };
    }

    var defaultScaler = function(value, rangeData){
        return ((value/rangeData.max)*100)+100;
    }

    return {
        process : function(data, config){
            config = config || {};

            config.unit = config.unit || DEFAULT_UNIT;
            config.textProperty = config.textProperty || DEFAULT_TEXT_PROPERTY;
            config.valueProperty = config.valueProperty || DEFAULT_VALUE_PROPERTY;

            var dataRange = gatherStatistics(data, config);
            var scaler = config.scaler || defaultScaler;

            for(var i = 0; i < data.length; i++){
                var scale = scaler(data[i][config.valueProperty], dataRange);
                config.renderer(data[i][config.textProperty], scale, config.unit);
            }
        }
    }
}();

/**----------------------------------------------------------------
 *
 *  BASIC USAGE EXAMPLE
 *
 *///--------------------------------------------------------------
var cloudData = [
    {text:"One", value:41},
    {text:"Two", value:122},
    {text:"Three", value:53},
    {text:"Four", value:45},
    {text:"Five", value:52},
    {text:"Six", value:68}
];

TagCloud.process(cloudData,{
    renderer : function(text, size, unit){
        document.write("<span style=\"font-size:" + size + unit + ";\">" + text + "</span>");
    }
    ,scaler : function(value, rangeData){

        var MAXFONTSIZE = 30;
        var MINFONTSIZE = 12;

        var spread = rangeData.max - rangeData.min;

        if(spread == 0){
            spread = 1;
        }

        return MINFONTSIZE + (value - rangeData.min) *
               (MAXFONTSIZE - MINFONTSIZE) / spread;

    }
    ,unit : 'px'
});

The only function the Tag Cloud singleton exposes it the process() function which take 3 arguments.

   1. Cloud Data - Required. Needs to have a display value property and a count property. The actual property names are configurable but by default looks for text and value respectivley
   2. Render Function - Required. This is the function that will render the cloud items onto the page. This is left up to the developer as this could be dramatically different each time. IT accepts 3 arguments - Display Text, Calculated Size and
   3. Optional Configuration - Object that accepts:
          * scaler - Overrides the default scaling calculation
          * unit - The default size unit eg '%' or 'px'
          * textProperty - The property on the object to get the display value
          * valueProperty - The property on the object to get the count per item

Javascript Tag Cloud

javascript

JavaScript