The site is currently being redesigned, please accept my apologies for the non updated logo: "Seb in Paris" is coming soon :)
 How to make a Search Cloud ? (January 18, 2007)
Filed under: Summer 2006 — Sebastien @ 12:24 pm

Introduction

A feature that can be often found on website that are part of the “Web 2.0″ trend is the search cloud, also often called cloud view, tags view … The Search Cloud module exaggerates the display of search words or phrases that have been searched for most frequently, giving new visitors to your site a better idea of what others have found interesting or have been looking for. It is a visual representation of other users activity on your site.

Here is an example of Search Cloud:
A sample Search Cloud

Requirements

Installation: mysql database

We create a table to store all search queries from users. For conveniency, we have chosen to keep this table in memory, so every time the server is restarted the table is reseted. However, you can also choose to keep the table on the server by changing the type from HEAP to MyIsam

CREATE TABLE `recent_searches` (
`search` varchar(255) NOT NULL default ”,
`date` datetime NOT NULL
) ENGINE=MEMORY;

The PHP code

We use one function called search_cloud() to display the Search Cloud. This function can take up to two parameters, although it can also be called without:

  • the first one, $size_levels is the number of different font sizes to appear in the cloud

  • the second one, $max_results is the maximum number of words to display in the cloud

// Search Cloud function by BORGET Sébastien
// www.borget.info
function search_cloud($size_levels = 4, $max_results = “all”)
{
switch ($max_results)
{
case “all”:
$sql_limit = “”;
break;
default:
$sql_limit = ” LIMIT “.$max_results.” “;
break;
}

// not possible
if ($size_levels > $max_results && $max_results != “all”)
return “”;

$str_result = ‘

‘; // or use a class

$searches = array();
$query = mysql_query(”SELECT DISTINCT search, COUNT(search) AS ratio FROM `recent_searches` “.$sql_limit.” GROUP BY search”);
while ($result = mysql_fetch_array($query))
{
$searches[$result[’search’]] = $result[’ratio’];
}

if (count($searches) == 0)
return “”;
else
{
$average = array_sum(array_values($searches)) / count($searches);
$min = min(array_values($searches));
$max = max(array_values($searches));

if ($min == $max)
return “”;
else
{
$pas = ($max - $min) / $size_levels;
$cnt = 0;
foreach ($searches as $name => $ratio )
{
for($i = 0; $i < $size_levels; $i++)
{
if ($ratio >= ($min + $i * $pas) && $ratio <= ($min + ($i+1) * $pas))
{
$font_size = 100 + ($ratio-$min)*250/($max-$min);
$font_color = cloud_color(128-($ratio-$min)*100/($max-$min));
$str_result .= ' ’.$name.’ ‘; // exact font size need to be better computed
$cnt++;
if ($cnt % rand(4,8) == 0) $str_result .= ”
“;
break;
}
}
}
$str_result .= ‘

‘;
return $str_result;
}
}
}
 

Comments

This implementation of the search cloud is very easy and relies only the ratio of appearance of each word. If we set a limited number of words (let’s say X) to appear in the cloud, then the output cloud is based only on the X latest entries in the table, instead of the X entries with the highest ratio in the whole table.

Conclusion

I hope this article will be useful to you, please do not hesitate to leave any comment about it !


Comments

3 Comments »

1. Pingback by Borget.info: Seb in Paris, back from Hong-Kong ! My life, my friends, my softwares … » New technical article: how to make a Search Cloud ? — January 18, 2007 @ 12:32 pm

[…] For those of you who are interested in reading it, please click on the following link […]

2. Comment by BetterThanLife — April 2, 2007 @ 5:38 pm

where is the cloud_color() function code?

3. Comment by Sebastien — April 9, 2007 @ 9:16 pm

You can replace the cloud_color() with a fixed color or anything that will output a different color according to the importance of the word.

RSS feed for comments on this post. TrackBack URI

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>