Building a “Tag Cloud” in PHP

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Dear Reader,

Just a few more and I promise I’ll get off the programming kick. I was working on my AJAX based resume last night (what, doesn’t everybody have one?) and got everything but the Skill Cloud” done. My idea of a skill cloud comes from the latest toy that people are deploying on the web, tag clouds. It seemed to me that it should be pretty straight forward to create one and so I dove off the board before making sure there was water in the pool.

Not being very good at math, I was struggling with how to take my list of x skills and evenly space them into a maximum of 10 categories. (tagcloud_1 – tagcloud_10) Here’s a quick rundown of what I came up with.

My data set is my list of skills deployed at a given company. Each bullet point for a company has a list of skills attached to it. Each skill has a weight that is determined by how proficient I am at that particular skill. (1=nubie…10=demigod) For each company, I gather the list of skills I used and sum their weights. For those of you in the valley, I will explain. If I used FoxPro on 3 bullet points in a job and my FoxPro weight is 10 (which it is) then my FoxPro score for this job will be 30. If I also used Java on 1 bullet point at this job and my Java weight is 1 (which it is) then my Java weight for this job will be 1.


$ceiling = 1;
$floor   = 99999999;

First, compute the boundaries of the current weights. I thought about using array_walk in this situation but I eventually want to OOpify it and I’m not sure if array_walk can play nice in an OOP world.


for($lcvA=0;$lcvA<count ($rsArray);$lcvA++)
{
	$ceiling = ($rsArray[$lcvA]['weight']>$celing
		?$rsArray[$lcvA]['weight']
		:$ceiling);
	$floor  = ($rsArray[$lcvA]['weight']<$floor
		?$rsArray[$lcvA]['weight']
		:$floor);
} // for($lcvA=0;$lcvA<count($rsArray);$lcvA++)

Now get the spread. The spread is the difference between the ceiling and the floor.


$difference = ($ceiling-$floor);

Ok, now break the spread into 9 different buckets. We already know what 1 is, it’s the floor. Since we want a total of 10 total categories we divide the spread by 9.


$increment = $difference/9;

Finally, take the current weight for each item and shove it into the proper bucket.


for($lcvA=0;$lcvA<count ($rsArray);$lcvA++)
{
	$rsArray[$lcvA]['weight'] =
		intval(($rsArray[$lcvA]['weight']-$floor)/$increment)+1;
} // for($lcvA=0;$lcvA<count($rsArray);$lcvA++)

That’s it. Now the array contains weights that are comparable to their original weights but are in the range of 1-10. Now in the output, I use a span tag to wrap each skill and the ID of the span tag is tagcloud_x where X is the weight. Add 10 IDs to my style sheet and it’s done. This code is overly verbose mainly because I’m using it as an example. Also, please forgive my lack of OOP. Version 2 will be OOpier, I promise!

Here are the styles I added to mine for reference.


#tagcloud_1
{
	font-family: Arial, verdana, sans-serif;
	font-size:16;
} 

#tagcloud_2
{
	font-family: Arial, verdana, sans-serif;
	font-size:16;
	font-weight: bold;
} 

#tagcloud_3
{
	font-family: Arial, verdana, sans-serif;
	font-size:16;
	font-style: italic;
	font-weight: bold;
} 

#tagcloud_4
{
	font-family: Arial, verdana, sans-serif;
	font-size:20;
} 

#tagcloud_5
{
	font-family: Arial, verdana, sans-serif;
	font-size:20;
	font-weight: bold;
} 

#tagcloud_6
{
	font-family: Arial, verdana, sans-serif;
	font-size:20;
	font-style: italic;
	font-weight: bold;
} 

#tagcloud_7
{
	font-family: Arial, verdana, sans-serif;
	font-size:24;
} 

#tagcloud_8
{
	font-family: Arial, verdana, sans-serif;
	font-size:24;
	font-weight: bold;
} 

#tagcloud_9
{
	font-family: Arial, verdana, sans-serif;
	font-size:24;
	font-style: italic;
	font-weight: bold;
} 

#tagcloud_10
{
	font-family: Arial, verdana, sans-serif;
	font-size:28;
}

Until next time, love you bunches,
(l)(k)(bunny)
=C=

This entry was posted on Tuesday, December 6th, 2005 at 8:15 am and is filed under PHP. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

4 Responses to “Building a “Tag Cloud” in PHP”

gphat Says:
December 6th, 2005 at 4:32 pm
And I thought Perl could be ugly. Blech! That for loop is deplorable!
Cal Evans Says:
December 6th, 2005 at 4:48 pm
Naw…the loop is fine, my ability to properly format blog sucks. :)
/me waves hi @ G!
jaxn Says:
December 7th, 2005 at 12:44 pm
Just a thought, but you could set the font-size to a percentage with an inline style. This would mean that you would have unlimited buckets and would not have to create styles.

That is how I have done it, using the $difference to make sure that fonts are between 100% and 300%.

As for the loop, why not use:
foreach ( $rsArray as $rs) {
}

That still works with objects as long as you implement the proper Array interface, and then gphat is left admiting that Perl is ugly ;)
Cal Evans Says:
December 7th, 2005 at 1:10 pm
Jackson,

I’ve fixed the problem G was griping about. I forgot to use & lt ; and & gt ; in my code so pieces of it were missing. Made for a really ugly looking for condition. :)

I don’t use FOREACH mainly out of habit. I do use it sometimes but in most cases I still use old-school FOR.

I thought of that but I wanted more than just the font-size changing. (bold, italics, etc.) One thing I would have loved to do (but I’ve moved on to my next AJAX project) is the use both class and ID style sheets so I could have a tagcloud stylesheet class that gives the basics and an id 0-10 that would be the actual modifies. It just seems cleaner to me.

Thanks for the suggestions though. I’ve got to start using things like FOREACH and other PHP specific commands more often. Just been doing it too long. :)

=C=

Postcards From My Life