Introducing the tagcloudbase gem

require 'tagcloudbase'

all_tags = {Egypt: 45, UK: 103, France: 56, Belgium: 53, Ireland: 49, China: 256, Somalia: 21}.to_a
puts TagCloudBase.new(all_tags).to_dynarex.to_xml pretty: true

output :

<?xml version='1.0' encoding='UTF-8'?>
<tags>
  <summary>
    <recordx_type>dynarex</recordx_type>
    <format_mask>[!name] [!gauge] [!count]</format_mask>
    <schema>tags/tag(name,gauge,count)</schema>
  </summary>
  <records>
    <tag id='1' created='2012-04-05 11:20:57 +0100' last_modified=''>
      <name>Belgium</name>
      <gauge>2</gauge>
      <count>53</count>
    </tag>
    <tag id='2' created='2012-04-05 11:20:57 +0100' last_modified=''>
      <name>China</name>
      <gauge>8</gauge>
      <count>256</count>
    </tag>
    <tag id='3' created='2012-04-05 11:20:57 +0100' last_modified=''>
      <name>Egypt</name>
      <gauge>2</gauge>
      <count>45</count>
    </tag>
    <tag id='4' created='2012-04-05 11:20:57 +0100' last_modified=''>
      <name>France</name>
      <gauge>2</gauge>
      <count>56</count>
    </tag>
    <tag id='5' created='2012-04-05 11:20:58 +0100' last_modified=''>
      <name>Ireland</name>
      <gauge>2</gauge>
      <count>49</count>
    </tag>
    <tag id='6' created='2012-04-05 11:20:58 +0100' last_modified=''>
      <name>Somalia</name>
      <gauge>0</gauge>
      <count>21</count>
    </tag>
    <tag id='7' created='2012-04-05 11:20:58 +0100' last_modified=''>
      <name>UK</name>
      <gauge>5</gauge>
      <count>103</count>
    </tag>
  </records>
</tags>


The actual tag cloud can be rendered in HTML us ing XSLT and CSS.

update: 08-Apr-2012

I've implemented #to_webpage to render the HTML, as well as provide the CSS. Here's an example:

require 'tagcloudbase'

all_tags = {Egypt: ['egypt.html',45], UK: ['uk.html',103], France: ['france.html',56], Belgium: ['belgium.html',53], Ireland: ['ireland.html',49], China: ['china.html',256], Somalia: ['somalia.html',21]}.to_a
tagcloudbase = TagCloudBase.new(all_tags)
h = tagcloudbase.to_webpage
File.open('tagcloud.html','w'){|f| f.write h[:html]}
File.open('tagcloud.css','w'){|f| f.write h[:css]}

tagcloud. html output:

<h1></h1><div id='articles'>
    <div id='records'>    
        <span class='tag s2'>
 <a href='belgium.html'>Belgium</a></span> <span class='tag s8'>
 <a href='china.html'>China</a></span> <span class='tag s2'>
 <a href='egypt.html'>Egypt</a></span> <span class='tag s2'>
 <a href='france.html'>France</a></span> <span class='tag s2'>
 <a href='ireland.html'>Ireland</a></span> <span class='tag s0'>
 <a href='somalia.html'>Somalia</a></span> <span class='tag s5'>
 <a href='uk.html'>UK</a></span> </div></div>

tagcloud.css output:

.tag {
  font-family: Arial,'Luxi Sans', Helvetica, Impact; line-height: 2em
}
  .tag a {background-color: #444; padding: 0.3em; margin: 0.9em 0.2em;}
  .tag a:link {background-color: #000; color: #fff; text-decoration: none}
  .tag a:visited {background-color: #555;}
  .tag a:hover {background-color: #000; text-decoration: none; color: #ccc}
  .tag a:active {background-color: #666;}
  .tag a:focus {background-color: #666;}

  .s1 { background-color: transparent; color: #123; font-size: 1.13em }
  .s2 { background-color: transparent; color: #123; font-size: 1.36em }
  .s3 { background-color: transparent; color: #123; font-size: 1.59em }
  .s4 { background-color: transparent; color: #123; font-size: 1.82em; font-weig
ht: 300 }
  .s5 { background-color: transparent; color: #123; font-size: 2.05em; font-weig
ht: 400 }
  .s6 { background-color: transparent; color: #123; font-size: 2.28em; font-weig
ht: 500 }
  .s7 { background-color: transparent; color: #123; font-size: 2.51em; font-weig
ht: 600 }
  .s8 { background-color: transparent; color: #123; font-size: 2.74em; font-weig
ht: 700 }
  .s9 { background-color: transparent; color: #123; font-size: 2.9em; font-weigh
t: 800 }
  .s10 { background-color: transparent; color: #123; font-size: 3.2em; font-weig
ht: 900}


Tags:
Source:
2337hrs.txt
Published:
08-04-2012 23:37