Advanced Search

Javascript Tag Cloud

/ Published in: JavaScript
Save to your folder(s)
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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /**----------------------------------------------------------------
  2.  *
  3.  *  TAG CLOUD IMPLEMENTATION
  4.  *
  5.  *///--------------------------------------------------------------
  6. var TagCloud = function(){
  7.  
  8.     var DEFAULT_UNIT = '%';
  9.     var DEFAULT_TEXT_PROPERTY = 'text';
  10.     var DEFAULT_VALUE_PROPERTY = 'value';
  11.  
  12.     var gatherStatistics = function(data, config){
  13.  
  14.         var currentMax = data[0][config.valueProperty];
  15.         var currentMin = data[0][config.valueProperty];
  16.  
  17.         for(var i = 0; i < data.length; i++){
  18.             var value = data[i][config.valueProperty];
  19.  
  20.             currentMax = (currentMax < value)?value:currentMax;
  21.             currentMin = (currentMin > value)?value:currentMin
  22.         }
  23.  
  24.         return {
  25.             max  : currentMax,
  26.             min  : currentMin,
  27.             mid  : (currentMax+currentMin)/2,
  28.             unit : (currentMax-currentMin)/100
  29.         };
  30.     }
  31.  
  32.     var defaultScaler = function(value, rangeData){
  33.         return ((value/rangeData.max)*100)+100;
  34.     }
  35.  
  36.     return {
  37.         process : function(data, config){
  38.             config = config || {};
  39.  
  40.             config.unit = config.unit || DEFAULT_UNIT;
  41.             config.textProperty = config.textProperty || DEFAULT_TEXT_PROPERTY;
  42.             config.valueProperty = config.valueProperty || DEFAULT_VALUE_PROPERTY;
  43.  
  44.             var dataRange = gatherStatistics(data, config);
  45.             var scaler = config.scaler || defaultScaler;
  46.  
  47.             for(var i = 0; i < data.length; i++){
  48.                 var scale = scaler(data[i][config.valueProperty], dataRange);
  49.                 config.renderer(data[i][config.textProperty], scale, config.unit);
  50.             }
  51.         }
  52.     }
  53. }();
  54.  
  55. /**----------------------------------------------------------------
  56.  *
  57.  *  BASIC USAGE EXAMPLE
  58.  *
  59.  *///--------------------------------------------------------------
  60. var cloudData = [
  61.     {text:"One", value:41},
  62.     {text:"Two", value:122},
  63.     {text:"Three", value:53},
  64.     {text:"Four", value:45},
  65.     {text:"Five", value:52},
  66.     {text:"Six", value:68}
  67. ];
  68.  
  69. TagCloud.process(cloudData,{
  70.     renderer : function(text, size, unit){
  71.         document.write("<span style=\"font-size:" + size + unit + ";\">" + text + "</span>");
  72.     }
  73.     ,scaler : function(value, rangeData){
  74.  
  75.         var MAXFONTSIZE = 30;
  76.         var MINFONTSIZE = 12;
  77.  
  78.         var spread = rangeData.max - rangeData.min;
  79.  
  80.         if(spread == 0){
  81.             spread = 1;
  82.         }
  83.  
  84.         return MINFONTSIZE + (value - rangeData.min) *
  85.                (MAXFONTSIZE - MINFONTSIZE) / spread;
  86.  
  87.     }
  88.     ,unit : 'px'
  89. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.