Building “Tag Cloud” in Rails

Posted by blainegarrett on Sep 28th, 2007 | 5 comments

I am working on the new search engine for Adamantine Arts and wanted to display the top 25 queries. I thought it would be nice to display the searches in the cool tag cloud form where the more popular the search the larger the text.

So quick tutorial on how to build a tag cloud in Rails. Hurray for logarithms lately. They are all over the search code.

Criteria :
- Use percent based fonts to display size
- Sizes should be relative (high search popularity doesn’t make HUGE text)
- Top 25 should be displayed randomly, even though we are sorting by the most popular.

So here goes:

In your controller, get your search:

@popular_searches = Search.find(:all, :limit => 25,  rder => 'popularity DESC')
@popular_searches = @popular_searches.sort_by { rand }

The last line shuffles/randomizes the entries even though we sorted by popularity.

Next for the view. The min/max could probably stand to be in the controller, but since it is just for display, I have no qualms putting it in the view.

<%
pmin = 100 # Minimum font size
pmax = 400 #Maximum font size
vmin = 10000000000000 #Super large number to init min
vmax = -1000000000000 #Super small number to init max
for search in @popular_searches
	if (search.popularity  vmax)
		vmax = search.popularity
	end
end
%>

<a href="/search/?q="
style="font-size:%"
title="Search"&gt;</a>

So the tag font size is a function of the min popularity, the max popularity, the maximum size, minimum size, and the popularity for the specific tag. This will generate you a nice little tag list.

Sources: Tagging math, randomizing Active Record set
The finished product is in beta on the Adamantine Arts search

5 Responses

1. Brecht Monkerhey says:

   June 8, 2008 at 10:00 am

   Nice! Simple yet works flawless and saved me half an hour of trying and testing to get that size right. Thanks a lot.
2. Eduardo Mucelli says:

   November 3, 2008 at 9:20 am

   Inspite of:

   pmin = 100 # Minimum font size
   pmax = 400 #Maximum font size
   vmin = 10000000000000 #Super large number to init min
   vmax = -1000000000000 #Super small number to init max
   for search in @popular_searches
   if (search.popularity vmax)
   vmax = search.popularity
   end
   end

   You could write in 2 lines:

   vmin = @popular_searches.sort! {|x,y| x.popularity y.popularity }.first
   vmax = @popular_searches.sort! {|x,y| x.popularity y.popularity }.last
3. Eduardo Mucelli says:

   November 3, 2008 at 9:22 am

   In the last post the html parser ate some code:

   Inspite of:

   |x,y| x.popularity y.popularity

   should be:

   |x,y| x.popularity (LESS EQUAL GREATER simbols) y.popularity
4. Eduardo Mucelli says:

   November 3, 2008 at 9:24 am

   In the last post the html parser ate some of my code:

   Inspite of:

   |x,y| x.popularity y.popularity

   should be:

   |x,y| x.popularity (LESS EQUAL GREATER simbols) y.popularity
5. Eduardo Mucelli says:

   November 3, 2008 at 9:26 am

   Inspite of:

   pmin = 100 # Minimum font size
   pmax = 400 #Maximum font size
   vmin = 10000000000000 #Super large number to init min
   vmax = -1000000000000 #Super small number to init max
   for search in @popular_searches
   if (search.popularity vmax)
   vmax = search.popularity
   end
   end

   You could write in 2 lines:

   vmin = @popular_searches.sort! {|x,y| x.popularity (LESS EQUAL GREATER simbols) y.popularity }.first
   vmax = @popular_searches.sort! {|x,y| x.popularity (LESS EQUAL GREATER simbols) y.popularity }.last

Leave a Reply

Click here to cancel reply.

Name (required)

Mail (will not be published) (required)

Website