MAIN « newer: "Sorting the mess in tags sorting the mess in the Net"
"Toyota Prius taxis in Tokyo": older »  
The Spread of Weighted Lists
| 25/01 | Filed under: Interaction

weighted list

[SvN] All items in a list are not created equally. That’s the idea behind weighted lists that, via font size, emphasize popular items and minimize unpopular ones. The cool thing is that by merely altering font sizes, these lists suddenly gain a dimension; You can still find items alphabetically but you can also use visual weight to find the most requested items. My guess is we’ll be seeing a lot more of these weighted lists.


Indeed, since this post, 2 months ago, Technorati and Metafilter have added tags to their sites and launched their own weighted lists.
And I did too!

I don't really have enough categories for this presentation to feel useful, especially since I already have the number of post for each category printed (next) to the keywords... but in fact, it instantly informs the reader on which are the more popular issues discussed on this site (saving him from comparing the numbers to find it out).

Here is the source code I used on this Movable Type installation 2.6xx. With the help of Tim Lawrenz and Max Paccagnella and Régine of We Make Money Not Art fame. Thank you guys!

<!-- setting base variables. if you have more than 100000 entries in a category, please increase $iMin below -->

<?php
$iMax = -1;
$iMin = 100000;
?>

<!-- first run through all categories to know the smallest and largest number of posts in the categories.
nothing will be printed out here, it's just for calculation. -->

<MTCategories>
<?php
if (<$MTCategoryCount$> > $iMax) { $iMax = <$MTCategoryCount$>; }
if (<$MTCategoryCount$> < $iMin) { $iMin = <$MTCategoryCount$>; }
?>
</MTCategories>

<!-- calculating the relative steps assuming that you want to have 5
different font-sizes. -->

<?php
$fSteps = ($iMax - $iMin) / 5;
?>

<!-- second run through the categories, now assigning font-sizes. -->

<MTCategories>
<?php
if (<$MTCategoryCount$> < $iMin + $fSteps) { $css = 'g1'; }
elseif (<$MTCategoryCount$> >= ($iMin + ($fSteps * 1)) && <$MTCategoryCount$> < ($iMin + ($fSteps * 2))) { $css = 'g2'; }
elseif (<$MTCategoryCount$> >= ($iMin + ($fSteps * 2)) && <$MTCategoryCount$> < ($iMin + ($fSteps * 3))) { $css = 'g3'; }
elseif (<$MTCategoryCount$> >= ($iMin + ($fSteps * 3)) && <$MTCategoryCount$> < ($iMin + ($fSteps * 4))) { $css = 'g4'; }
elseif (<$MTCategoryCount$> >= ($iMin + ($fSteps * 4))) { $css = 'g5'; }
?>

<!-- printing the categories on the page -->

<span class="<?php print($css)?>"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a> (<$MTCategoryCount$>)</span> |
</MTCategories></div>


and the CSS looks like:

.g1 {
font-size: 10px;
}

.g2 {
font-size: 13px;
}

.g3 {
font-size: 16px;
}

.g4 {
font-size: 19px;
}

.g5 {
font-size: 22px;
}

Let me know what you think?

Find below a list of other weighted lists:
- Near Near Future
- MetaFilter tags
- Craiglist cities
- Flickr tags
- 43 Things
- porn-a-licious
- Everything Burns: Zeitgeist
- extisp.icio.us
- Technorati tags

5 most recent entries
15/03 | Hitotoki spreading! | Japan
If you haven't visited our project hitotoki.org recently, then now is the time. The small literary website building an emotional map of Tokyo is growing faster than we ever imagined,...
15/03 | Best anime of 2008 | Japan
Bokurano Without a doubt!! Great story, great character dvpt, no moe BS. But careful though, it's gloomy!! gloo-my!! As the series progresses, you discover all the hardships that those kids... details...
15/03 | Restarting? | Blogging
OK, I deleted all my comments by mistakes months ago and was hoping to be able to restore everything; but as this is going nowhere and new entries are piling...
09/09 | Thoughts on Casio's W53CA for AU | Interaction Japan Mobility
After my recent announce of the new AU Summer Collection, I had to wait a couple months before the official release of the Casio W53CA phone. I got the phone... details...
08/09 | Help Find Steve Fossett | Mobility Personal
So I've spent the past couple hours helping find Steve Fossett. I have become a Mechanical Turk for Amazon and have been reviewing satellite imagery of the area where Steve... details...
> Main Page

^ Back to Top ^