Posted By

kouphax on 10/01/08


Tagged

javascript cloud tag


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

shilguhn
lfatr


Javascript Tag Cloud


 / Published in: JavaScript
 

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
  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  

You need to login to post a comment.