How to dynamically piece page elements together to form a square?

Question

I have a number of items with different values. I'd like to represent each item as a square with its size corresponding to its value, where each square is a component of a larger square. All the squares of different sizes fit together to make a larger, perfect square.

Is it possible to do something like this with HTML/CSS? Does anyone know of any resources I that might get me started with the right techniques?

Or would this be better suited to JavaScript or something else?

Answer 1

Take a look at ted.com and see how they're doing something similar. It's pretty cool.

Answer 2

Sounds like a treemap. There seems to be a number of Javascript libraries for accomplishing this kind of visualization, for example the Javascript InfoVis Toolkit or this jQuery plugin.