adding a simple tag cloud

in harpjs, blog, jade, tag-cloud

After having my blog running with harpjs for about a week and having pushed the basic structure to github for everybody to use as they wish (if they wish to…), I found it would be great to organize my tags in a tag cloud rather than showing them in an unhandy list - as the amount of tags used grows, this list view is not useful at all to anybody (unless you are searching the page with the browsers built-in search functionality). I still have the list style active on my archived blog in German if you like to see an example.

Getting inspired by the great posting on creating a sitemap by Kevin Saliou, I thought it should not be too hard doing something similar to create a tag cloud. This is the first (and current) solution I came up with:

(As I am still pretty new to javascript, there probably are a lot of things that can be done better or more elegant - even in these few lines of code. Sorry for this…)

public/tags/index.jade
h2 tag cloud
- var data = public.posts.data;
- var tags = {};
- for (var name in data) {
-		if (name[0] != '_') {
-			var ts = data[name].tags;
-			for (var i in ts) {
-				tags[ts[i]] = tags[ts[i]] === undefined ? 1 : tags[ts[i]] += 1;
-			}
-		}
- }

- var sortedTags = {};
- var helperArray = [];
- var maxAppearances = 0;
- for (var i in tags) {
- 	helperArray.push(i);
- }

- helperArray.sort(function randOrd(){
-		return (Math.round(Math.random())-0.5);
-	});
- for (var i in helperArray) {
- 	sortedTags[helperArray[i]] = tags[helperArray[i]];
- 	maxAppearances = maxAppearances < tags[helperArray[i]] ? tags[helperArray[i]] : maxAppearances;
- }
#tcloud
	each index, tag in sortedTags
		- var fontSize = (1.6 * ((index - minimum_apearances_for_tagcloud_greater_than)/(maxAppearances - minimum_apearances_for_tagcloud_greater_than)));
		if (fontSize > 0)
			- var tagClass = "tc" + fontSize.toFixed(1).replace('.', '');
			a(href='/tags/' + tag.toLowerCase().replace(/ /g,''), title='#{ index }', class='#{ tagClass }') #{ tag }

I simply iterated over the tags defined in my _data.json-file for each post and sum them up in a new object. Next I am pushing the content to an array and use a small function to randomize the order of tags for displaying. Before doing a standard calculation for retrieving the target style of a tag in the tag cloud, the (randomly sorted) array content is pushed to a new object. As you can see, using three collections to perform this task is not ideal. It is - as I wrote before - my first take on solving this ‘issue’.

I have declared some style definitions in my less-file to make the visual differentiation according to the count of appearances of tags. Also, I set up the global harp variable minimum_apearances_for_tagcloud_greater_than to be able to easily adjust the minimum number of usages of a tag to be included in the cloud as the overall count of tags goes up.

This is how the result looks like (for the tags used on my German blog):

tag cloud