Geek Answers Handbook

Set tag cloud to available space

Given the words and their frequencies and the area of ​​screen real estate, what are some good approaches to installing a tag cloud in space? I can manipulate two variables:

  • Font size (both absolute and gradient)
  • Word count

All I can think of requires an iteration, for example, setting an upper bound on the number of words, and then a binary search by font size, until the words just fit the area. I would rather have an analytical solution.

One of the complications of my situation is that the clouds are resizable, so the algorithm should be able to handle 100x100 pixels or 1000x1000 pixels quite well.

Edit: I had to say that this is for a rich client application, and not for the Internet (hence the possibility of resizing). In addition, I was hoping to hear some experiences like "no one ever sees more than 100 words in a tag cloud, so don't bother showing them."

+5
user-interface tag-cloud
source share
3 answers

What we do at Software Cartographer

  • have a maximum font size,
  • map Math.sqrt(term.frequency) to this range (since words are 2D areas)
  • only show 30 (or so) terms,
  • exclude any small print, i.e. font size less than 6 points,
  • sort terms in the cloud in alphabetical order.

Alternatives

  • Instead of showing top 30, select top k so that there are no scroll bars.
  • Instead of matching the most common word with the maximum font size, use global matching so that the word size is comparable between the clouds (it depends on your use case).

In my best knowledge there is no empirical research on cloud clouds (perhaps Jonathan Feinberg, fame Worlde, knows more in this regard).

+2
source share

This sounds like a knapsack issue, but inverted and with a lot of variables. There is no trivial complete solution, but most likely you can find a heuristic algorithm that in most cases approaches an optimal solution.

PS: You can do this job reliably only with font sizes measured in pixels. Font sizes, measured in pixels, are a bad thing (TM) in good web design.

0
source share

You can create a predefined set of incident ranges that can then be related to the font size in your cloud. For example:

  • 0 - 100: 1 em
  • 101 - 500: 1.2 em
  • 501 - 1000: 1.4 em bold
  • 1001 - 1500: 1.8 em bold
  • 1501 - 2000: 2.0 em bold italics / underlined / blinking / whatever, etc.

You can scale the cloud by adding a fixed offset to all ranges depending on the size of the container.

0
source share

More articles:


All Articles