Building a tag cloud from a Notes view with XML and Ajax

Tags and tagging are the Web 2.0 alternative for categories. What is wrong with categories? They force users to think according to a fixed taxonomy. The human mind works different: we associate things in multiple ways. Therefor, tagging is in most cases more useful.

A tag cloud is a nice way of visualising how many documents are associated with each tag. The more documents, the bigger the size of the tag. Adding different colors can also enhance the experience.

The Notes design elements

This article by Ferdy Christant was a great source of inspiration for me. A tag field allows multiple values from a list of already existing tags and it allows values not in that list. The view is a normal view, categorised by tag. As in a previous post, I am getting the document counts with an HttpRequest (Ajax) to get the categorized view in XML format.

The CSS

The css modifies the unordered list so that all items are displayed inline. Then there's the six classes defining the font sizes and colours (taken from Ferdy Christant's article):

/* tag cloud */
.tagcloud ul{margin:0;padding:5px}
.tagcloud li{list-style:none;display:inline;font-size:11px}
.tag1{font-size:1em;color:#9696FF}
.tag2{font-size:1.2em;color:#7878FF}
.tag3{font-size:1.4em;color:#5A5AFF}
.tag4{font-size:1.6em;color:#3C3CFF}
.tag5{font-size:1.8em;color:#1E1EFF}
.tag6{font-size:2em;color:#0000FF}


The 'Mme.tagcloud' module

The 'pattern' and 'bind' makes the code execute automatically on page load (see previous posts). I use an XmlHttpRequest to retrieve the XML of the view. Then I build an array from the 'children' attributes and passes this through the 'distribute' function to get a number between 1 and 6 according to the number of documents associated with the tags. Finally, I update the HTML: change the box label and class and add the classNames to each link.

/* tag cloud */
Mme.tagcloud={
    pattern:'#tagcloud',
    bind:function(a){
        var o,x,i,t,n,v=[],s
        o=Mme.request.get('/domino/categories?ReadViewEntries&CollapseView')
        x=Mme.tags('viewentry',o.responseXML.documentElement)
        for(i=0;i<x.length;i++)v.push(x[i].getAttribute('children'))
        s=this.distribute(v,6)
        a.className='tagcloud'
        Mme.tags('h4',a)[0].innerHTML='Tag cloud'
        t=Mme.tags('a',a)
        for(i=0;i<t.length;i++){
            t[i].className='tag'+s[i]
            t[i].title=t[i].innerHTML+' ('+v[i]+' posts)'
        }
    },
    distribute:function(a,b){
        var n=a.length,mx=0,mn=Number.MAX_VALUE,m=Math,v=[],i,q
        for(i=0;i<n;i++){mx=m.max(mx,a[i]);mn=m.min(mn,a[i])};q=mx-mn
        for(i=0;i<n;i++)v.push(m.round((((b-1)/q)*a[i])+(1*mx-b*mn)/q))
        return v
    }
}