administration mode
Pssst...Ferdy is the creator of JungleDragon, an awesome wildlife community. Visit JungleDragon

 

Article: Domino Tag Clouds »

FERDY CHRISTANT - AUG 11, 2006 (12:42:14 PM)

Introduction

Tagging is a popular way to structure content on the web. Many social networking sites offer this feature, where users tag content to share it in a structural way with other users. With many users sharing much content, it is interesting to see the most popular tags, the ones that have the most content in them.

This is where tag clouds come in. Tag clouds try to visualize the popularity of tags in an overview. Let's have a look at an example:

A tag cloud, as taken from the Flickr photo sharing site

As you can see, a tag cloud is a weighted list of tags, where weight is expressed in the resulting font size of the tag. The bigger the font, the more content a tag contains.

Designing Tag clouds in Domino

Let's consider how we can realize this in Domino. First, we will need a tag field on our documents. The tag field is a multi-value field, because content can be tagged using different terms. For example, a document describing how to change a tire of a car, may be tagged as "car", "tire", and "change tire". One document, multiple tags to describe it.

That's easy. Next, we need a way to count the number of documents in each tag. Peace of cake, we can simply categorize our view by the tag field, and use the function @DocDescendants in the column formula to count the number of documents below the tag.

The final step is in the visualizing the tags and related count statistics into a tag cloud. This is the hardest step. Merely displaying our view on the web and applying a stylesheet to it is not enough. We need to transform the tag count values to a scaled font size. Transformations on totals and counter functions are not possible in views, leaving us looking for an alternative way.

What about agents? We know we can write an agent and have exact control over the HTML we output. Yes, this is technically possible, but not suitable:

  • Agents are an overhead, and do not scale. Their use is in document processing, not the display of information
  • The agent would need to contain all the HTML structure and formatting you probably already have on your form. This goes directly against one of the main software design principles: DRY (Don't Repeat Yourself)

A much better solution, that scales well and does not duplicate structure and formatting is the use of Javascript in views. When we mark our view content as pass-thru, it is easy to let the view generate a javascript array. When generated, a javascript function will take the array as input and draw the tag cloud on-the-fly, client-side.

The rest of the article will discuss the detailed design of the demo database to demonstrate this approach.

The demo database

To follow along with the rest of this article, you can download the demo database here. Simply extract and deploy the database on your server and open it in Designer. You can also have a look at the online demo here, but that will only show the resulting tag cloud, and not the design.

Detailed design: data entry

Upon opening the database, you see a view that categorizes content documents by tags. From this view, you can create, update and delete documents to test your tag cloud with different inputs. The design of this part is not really worth mentioning, it is an extremely simple form containing two fields, and a categorized view to display the documents by tag:

Example content in the data entry view

Detailed design: generating the javascript array

With the Notes view in the previous screenshot in mind, we now need to create a seperate view for the web. This view will not generate view entries in a table. Instead, it will generate an associative javascript array that maps tags with their counters.

The resulting view is called "vwWebDocsByTag". It should be constructed like this:

  • On the 5th tab of the view property box, enable "Treat view contents as HTML"
  • The view selection must include all documents that use the "Document" form
  • The first (and only) column categorizes tags. The formula of the column is: "tagMap[\"" + Tags + "\"]=" + @DocDescendants + ";" + @NewLine

As you can see, the view simply output javascript statements to build up an array on the web. However, the javascript array is not valid without the proper tags to prefix and suffix it. Therefore, the view is embedded on the form "$$ViewTemplateDefault". Right before the embedded view element you can see the javascript script tag, as well as a statement declaring the named array. Right below the embedded view, you can see an additional statement, and a javascript close tag. It is important to mark these tags as pass-thru HTML.

Detailed design: Styling the content

Before we start transforming the tag counters into font sizes, we will first create the CSS styles for these font sizes. On the "$$ViewTemplateDefault" form, the HTMLHead section contains the styles used in the demo database. There are 6 styles defined. You have liberty in the amount of styles you define and the font-sizes in these styles, yet you need to comply with two basic rules:

  • Your styles must be named sequentially, because the style name will be dynamically applied to your tag entries
  • The larger the sequence number of the style, the larger the font size must be. This will make sure popular tags look bigger

CSS Styles used for the tag cloud

Detailed design: mapping the tag count with the right style

We've come to the most interesting part of our exercise. We need to map the tag count numbers to the correct CSS style. This is not as easy as you think. The count numbers can be in any range and there can be huge differences in counts. Still, the tag cloud must somehow be in visual balance for all possibilities. The best way to explain this part of the design is to go through the order of events that occur. Open the "$$ViewTemplateDefaultForm" to follow along:

  1. Right below the embedded view is the following statement: drawTagCloud(tagMap,6); This will call the drawTagCloud function, which is defined in the JS Header section of the form. The first parameter passes the tagmap array, whilst the second argument states the number of styles used to scale the font size. You can adjust this value to your own needs, as long as it is consistent with the defined styles in the HTML header section of the form.
  2. The drawTagCloud function will first calculate the maximum and minimum count across all tags by looping through the tagmap array. This is important in order to come to a fair division of font sizes across all tags.
  3. Next, the drawTagCloud function will loop through the tagmap array and call the drawTag function for each entry.
  4. The drawTag function contains the alghoritm to calculate the CSS style to use for the tag, given the tag count, maximum tag count, minimum tag count and maximum style number. The result is written to the current document using the javascript document.write function

That's all there is to it. The result will look like this:

Domino tag cloud in action

We reached our goal. Often-occuring tags appear bigger, attracting attention to the user.

Note: The web view must be opened using the "?openview&count=-1" prefix. This will make sure all entries in the view are returned, instead of the 30 that get returned by default.

3D tag clouds

To further dramatize the difference in tag popularity, we can combine the font size with the font color in the CSS styles definition:

"<style type="text/css">" + @NewLine +

".tag1 {" + @NewLine +
"font-size: 1em;" + @NewLine +
"color:#9696FF" + @NewLine +
"}" + @NewLine +

".tag2 {" + @NewLine +
"font-size: 1.2em;" + @NewLine +
"color:#7878FF" + @NewLine +
"}" + @NewLine +

".tag3 {" + @NewLine +
"font-size: 1.4em;" + @NewLine +
"color:#5A5AFF" + @NewLine +
"}" + @NewLine +

".tag4 {" + @NewLine +
"font-size: 1.6em;" + @NewLine +
"color:#3C3CFF" + @NewLine +
"}" + @NewLine +

".tag5 {" + @NewLine +
"font-size: 1.8em;" + @NewLine +
"color:#1E1EFF" + @NewLine +
"}" + @NewLine +

".tag6 {" + @NewLine +
"font-size: 2em;" + @NewLine +
"color:#0000FF" + @NewLine +
"}" + @NewLine +

"</style>"

This leads to the following effect:

Domino 3D tag cloud in action

As you can see, this creates somewhat of a 3D effect, where popular tags appear in the foreground and less popular tags in the background. You may want to play around with the font colors to optimize the effect. You can see the 3D tag cloud live in action here.

Conclusion

The conclusion is simple. Creating a scalable tag cloud in Lotus Domino is easy. With the increasing popularity of tags on the net, I can only encourage developers to include this feature into their design.

Credits

Credit goes to Dave Horak, my co-worker. He came up with the idea of using a view to generate Javascript code. Credit als goes to Volkan, for sharing the tag cloud transformation algorithm. Thanks guys!

Share |

Comments: 15
Reviews: 6
Average rating: rating
Highest rating: 5
Lowest rating: 3

COMMENT: ANDREW BARKER rating

AUG 11, 02:38:17 PM

comment » Ferdy, this is awesome. I was just getting around to building something like this. Ive got a site redesign I am going to roll this into. Very very nice work.

Thanks! «

COMMENT: FERDY

AUG 11, 03:07:11 PM

comment » hi Andrew,

Thanks, man. I just updated the demo database with an improved algorithm. There was about 15 minutes between me publishing the article and me updating the demo database. There is a change that you have downloaded the older demo database. The link in this article now points to the latest and greatest so you may want to redownload the demo 18 «

COMMENT: BEN POOLE emailhomepage

AUG 11, 22:53:03

comment » Excellent, excellent work. Somethig I've been meaning to do for AGES 18 «

COMMENT: THOMAS ADRIAN emailhomepagerating

AUG 11, 23:09:43

comment » Thanks Ferdy.

I made a lotusscript some time ago that creates a tagcloud based on the first categorized column in a view. you can find the script and a live example here:

http://www.notessidan.se/A55B53/blogg.nsf/plink/TADN-6RPTKK

http://www.notessidan.se/A55B53/blogg.nsf/agent?openagent&key=moln

/Thomas «

COMMENT: CHRISTAN MUELLER homepagerating

AUG 20, 09:49:00 PM

comment » Hi there!

Very nice solution! :)

I've made a "cloud tag" for the client via LotusScript an DXL. You could found it there -> http://smoki.atblogs.de/index.php?op=ViewArticle&articleId=772&blogId=82

Cheers!

Chris «

COMMENT: PATRICK KWINTEN homepage

SEP 4, 15:00:25

comment » Hej!

Always nice to see that are enough Domino developers who find building creative, funny solutions worth the effort

21 «

COMMENT: PATRICK KWINTEN emailhomepagerating

SEP 12, 12:35:45

comment » Hej,

I have downloaded the database but I only see as the first 5 categories displayed in the browser:

Blog CSS Domino GUI HTML

What can be the cause of that? «

COMMENT: FERDY

SEP 12, 06:21:50 PM

comment » hi Patrick,

"Note: The web view must be opened using the "?openview&count=-1" prefix. This will make sure all entries in the view are returned, instead of the 30 that get returned by default."

- as mentioned in the article 18

I can imagine its easy to read over it though. Let me know if that works. «

COMMENT: PATRICK KWINTEN

SEP 15, 15:38:48

comment » Hej Ferdy,

stupid me. You are right, you wrote it so easy to understand that I overlooked at it. Thanks for the quick reply! «

COMMENT: ALASTAIR GRANT emailhomepage

NOV 10, 12:32:44

comment » Hi Ferdy,

Have you looked at JSON? www.json.org

You could have returned the the view categories as a javascript set of javascript objects instead.

This gives you a good example of putting a view within a .js file

http://www.vincedimascio.com/vince/vpd.nsf/all/93CFF6FC0D84042388257190007690E0

Regards,

Alastair «

COMMENT: PAUL homepage

FEB 22, 02:33:16 PM

comment » Love the tutorial,

thanks «

COMMENT: FP IMAGES emailhomepagerating

MAR 22, 05:15:00 PM

comment » I like the idea to "color" tags. Just take a main color and "blend" it.

I did the same at

http://www.featurepics.com/editorial/tag-cloud.aspx

The article is great. Just include this feature into your design.

Thanks you «

COMMENT: JASPER rating

APR 28, 22:41:13

comment » Good stuff! 18 «

COMMENT: MARK

DEC 11, 2008 - 23:46:49

comment » Very nice idea! Thanks Ferdy. 28

If you make the vwWebDocsByTag view visible to Notes clients you can set the number of documents to show on the embedded view instead of adding &count=-1 to the URL. «

COMMENT: PIETER

MAR 7, 2009 - 09:05:39 PM

comment » I tried to copy the codeon my page but in my cloud I get a lot of extra 'tags' : each all any collect detect findAll grep include inject invoke max min partition pluck reject sortBy toArray zip inspect find select member entries _reverse _each clear first last compact flatten without call removeDuplicates empty

what I am doing wrong?

just copy the form and view and preview the form shows a correct tagcloud... «

RATE THIS CONTENT (OPTIONAL)
Was this document useful to you?
 
rating Awesome
rating Good
rating Average
rating Poor
rating Useless
CREATE A NEW COMMENT
required field
required field HTML is not allowed. Hyperlinks will automatically be converted.