Stuff about programming
Squarified Treemaps with HTML5.
Bookmark and Share

I like Treemaps. That's why I've started writing a Treemap plugin in HTML5. I've implemented the Treemap-layout algorithm, based on squarified treemaps. An example of the plugin in-use is shown in the Treemap below. The map is rendered onto an HTML5 canvas using KineticJS. However, the plugin separates the rendering of the rectangles from the layout. For example, a renderer using a different HTML5 canvas API, or HTML5 directly, or even a non-HTML5 renderer can be used. Separation between the rendering and layout in the plugin is achieved using a callback function, which does the rendering. i.e. a callback function with signature render(x, y, width, height) for rendering a width × height rectangle at point (x,y).

This map shown above is generated from the areas,

[200,100,50,30,32,35,25,15,13,20,12,10,8,6,6,5,4,3,2,2,1]

and scaled to a 800px × 400px canvas.

I still need to implement labels for the rectangles and the recursive layout of hierarchies.

blog comments powered by Disqus
Website created by Nicholas Nguyen.