Comments on jMar's Blog: Efficient Tag Cloud Algorithm

Thanks! I have been trying to come up with a good ...

2012-02-07T18:46:14.261-08:00

Thanks! I have been trying to come up with a good way to do this for a long time.

great demonstration... can i use this to my premiu...

2012-01-14T22:37:49.848-08:00

great demonstration... can i use this to my premium template?

Nice Plug-in and demonstration!

2011-05-26T10:47:14.354-07:00

Nice Plug-in and demonstration!

big think it was exactly what I searched, with a m...

2011-05-06T03:12:30.972-07:00

big think it was exactly what I searched, with a min and max!

I did it in PHP but will perhaps look after to make in JQuery because it's display work

think again!

Whoops...

make that:

var retrieveCou...

2008-10-30T14:39:00.000-07:00

Whoops...

make that:

var retrieveCount = options['retrieveCount'] || function(element){return element.getProperty('count').toInt()};

Keep forgetting that the return statement is required in JavaScript. Lazy!

Here is a mootools/functional programming variant....

2008-10-30T04:42:00.000-07:00

Here is a mootools/functional programming variant. Tidies away all the variables into its own namespace:

var TagCloud = {
apply: function(selector, options) {
options = options || {};

var maxPercent = options['maxPercent'] || 150;
var minPercent = options['minPercent'] || 100;
var retrieveCount = options['retrieveCount'] || function(element){element.getAttribute('count').toInt()};
var apply = options['apply'] || function(element, size){element.setStyle('font-size', size + '%')};

var max = null;
var min = null;

var tagElements = $$(selector);

tagElements.each(function(element)
{
count = retrieveCount(element);
max = (max == null || count > max ? count : max);
min = (min == null || min > count ? count : min);
});

var multiplier = (maxPercent-minPercent)/(max-min);

tagElements.each(function(element)
{
count = retrieveCount(count);
size = (minPercent + (count - min) * multiplier);
apply(element, size);
});
}
};

TagCloud.apply('ul#tags > li');

I liked the idea, but I have a large set of data, ...

2008-09-27T00:48:00.000-07:00

I liked the idea, but I have a large set of data, the distribution is such that I have a lot of rare tags and a few very common ones - with hardly anything in between - I'm looking at product sales from a large inventory.

Some products sell 1 unit, others 50, 100, 500, 1000, etc... but one product sells 250,000 which means your algorithm gives me a few enormous tag and maps everything else down to the mininium size.

I need to be able to pull out the detail at both ends of the scale.

Using Log10(Count) worked really well and produces really compelling sales charts.

Thanks for the idea - 10 minute metrics - Mwhahahaha!

Just to think for. It could not be this vast effor...

2008-09-18T23:50:00.000-07:00

Just to think for. It could not be this vast effort to implement it this way.

Thank you very much for the article. It took me ab...

2008-09-12T09:54:00.000-07:00

Thank you very much for the article. It took me about 25 mins to apply it, not on the client side but server side using php. Your article is the simplest tutorial that I have found on the net. Special thanks go to Ken, as I used his refined version.

This is great. Playing with it now. As for markup,...

2008-07-10T16:10:00.000-07:00

This is great. Playing with it now. As for markup, maybe something simple like class="cloudable" rel="rank"?

I Personally prefer the rank/weight indicator to be in an attrib.

@Jacob
Uh... so it does. I swear, this post is...

2008-06-26T09:22:00.000-07:00

@Jacob
Uh... so it does. I swear, this post is taking me to school... Thanks for pointing that out!

Your algorithm has a problem if all of the tags ha...

2008-06-26T09:10:00.000-07:00

Your algorithm has a problem if all of the tags have exactly the same number of occurrences. In this case max=min and you would get a divide by zero error.

@Ken
Thanks for that very thorough explanation!...

2008-05-19T07:28:00.000-07:00

@Ken
Thanks for that very thorough explanation! I guess I was too hasty in my response to the 3/21 comment. Didn't we learn that stuff in like 5th grade or something...? I'll add this to my growing list of updates - too many smart people correcting me, not enough time...

Jeremy--

Thanks for this post. I had the sa...

2008-05-19T07:20:00.000-07:00

Jeremy--

Thanks for this post. I had the same thought as the March 21 anonymous regarding the ((max-(max-(count-min))). You said efficiency was a concern, so here's my two bits on optimzing the size calculation in the loop:

Just distribute the minuses out to the terms in the parenthesis, and you'll see it works out, even though "count" changes on each iteration. Here it is step-by-step (perhaps a little more verbose than needed).

a) ((max - (max - (count - min)))
b) ((max - (max - count + min))
c) (max - max + count - min)

"C" will give you the exact same result as "A", and since the "max-max" cancels out, you can further simiplify it to be:

d) count - min

That leaves your code as the following:

var multiplier = (maxPercent-minPercent)/(max-min);
var size = minPercent + (count-min)*multiplier;

The nice thing about the above code is that math-minded folks will instantly recognize you're doing a linear interpolation of "count" between two numbers ("maxPercent" and "minPercent"). That was a bit obscured in the original code.

With a bit of explanation to someone of what interpolation is, you can even easily visualize in your minds-eye what is happening in the above code.

This is the easiest to understand version of the code, but you can introduce another variable optimize the loop further:

a) var size = minPercent + (count-min)*multiplier;
b) var size = minPercent + count*multiplier - min*multiplier;
c) var size = (minPercent - min*multiplier) + count*multiplier;
d) var offset = minPercent - min*multiplier; var size = offset + count*multiplier;

with "offset" being calculated outside of the loop (note that no terms in "offset" use "count" so this is safe to do). This means that inside of the loop we have 1 multiplication and 1 addition, whereas it used to be 4 additions/subtractions and 1 multiplication. Notice that the only things we're pulling out of the loop are the constants. Anything involving "count" stays in the loop.

This leaves your code as the following

var multiplier = (maxPercent-minPercent)/(max-min);
var offset = minPercent - min*multiplier;
var size = count*multiplier + offset;

A little harder to visualize what's going on in this version, but it is fine with a comment.

Try this; it will work. What your algorithm is basically doing is a linear interpolation.

I would be very happy, if you could add an alterna...

2008-03-30T16:57:00.000-07:00

I would be very happy, if you could add an alternative routine to get the data for the cloud.

Like a text-file or data from JSON. The reason is, that not all people who use jQuery use it for HTML ;-)
Personally I use it for XUL (Firefox extension, etc.) as well.

Right now I am trying to create a GTD add-on for an application based on Mozilla and thus I am in need for a tag-clound jQuery plugin, that reads the tags from a database and then creates the tag-cloud from it.

@Anonymous
Since count is updated during each i...

2008-03-25T09:56:00.000-07:00

@Anonymous
Since count is updated during each iteration, I can't extract any expressions that contain count outside of the loop.

While you're optimising your loop why don't you si...

2008-03-21T16:31:00.000-07:00

While you're optimising your loop why don't you simplify
((max-(max-(count-min)))

to just

(count - min)?

Or do you have a typo in there somewhere?

I agree that it would be ideal to let the user det...

2008-03-19T05:41:00.000-07:00

I agree that it would be ideal to let the user determine the markup - just not sure yet on how to let them specify that in a flexible way...

Why give it to the plugin users choice and let him...

2008-03-19T03:04:00.000-07:00

Why give it to the plugin users choice and let him define via plugin constructor the way he wants his tag to be.

Just to think for. It could not be this vast effort to implement it this way.

Best regards,
Skyborg

Wonderful and a jquery plugin would be awesome.I p...

2008-03-10T07:26:00.000-07:00

Wonderful and a jquery plugin would be awesome.I personally feel you can choose any markup that makes things simple for you.

Comments on jMar's Blog: Efficient Tag Cloud Algorithm

Thanks! I have been trying to come up with a good ...

great demonstration... can i use this to my premiu...

Nice Plug-in and demonstration!

big think it was exactly what I searched, with a m...

Whoops...make that:var retrieveCou...

Here is a mootools/functional programming variant....

I liked the idea, but I have a large set of data, ...

Just to think for. It could not be this vast effor...

Thank you very much for the article. It took me ab...

This is great. Playing with it now. As for markup,...

@JacobUh... so it does. I swear, this post is...

Your algorithm has a problem if all of the tags ha...

@KenThanks for that very thorough explanation!...

Jeremy--Thanks for this post. I had the sa...

I would be very happy, if you could add an alterna...

@AnonymousSince count is updated during each i...

While you're optimising your loop why don't you si...

I agree that it would be ideal to let the user det...

Why give it to the plugin users choice and let him...

Wonderful and a jquery plugin would be awesome.I p...

Whoops...

make that:

var retrieveCou...

@Jacob
Uh... so it does. I swear, this post is...

@Ken
Thanks for that very thorough explanation!...

Jeremy--

Thanks for this post. I had the sa...

@Anonymous
Since count is updated during each i...