A simple treemap implementation using web technologies (DOM nodes, CSS styling and transitions) rather than a big canvas/svg/plugin.
Play with a demo.
-
Create a page with a DOM node (i.e. a
<div>) that will contain your treemap. -
Add the treemap to the node via something like
appendTreemap(document.getElementById('mynode'), mydata); -
Style the treemap using CSS.
The input data (mydata in the overview snippet) is a tree of nodes,
likely imported via a separate JSON file. Each node (including the
root) should contain data in the following format.
{
name: (HTML that is displayed via .innerHTML on the caption),
data: {
"$area": (a number, in arbitrary units)
},
children: (list of child tree nodes)
}
(This strange format for data comes from the the JavaScript InfoVis Toolkit. I might change it in the future.)
The $area of a node should be the sum of the $area of all of its
children.
(At runtime, tree nodes will dynamically will gain two extra
attributes, parent and dom; this is only worth pointing out so
that you don't accidentally conflict with them.)
By default, appendTreemap will sort the tree's children from largest to smallest before placement. To retain the input order, pass an options argument to appendTreemap:
appendTreemap(document.getElementById('mynode'), mydata, {sort: false})
The treemap is constructed with one div per region with a separate
div for the caption. Each div is styleable via the
webtreemap-node CSS class. The captions are stylable as
webtreemap-caption.
Each level of the tree also gets a per-level CSS class,
webtreemap-level0 through webtreemap-level4. These can be
adjusted to e.g. made different levels different colors. To control
the caption on a per-level basis, use a CSS selector like
.webtreemap-level2 > .webtreemap-caption.
Your best bet is to modify the included webtreemap.css, which
contains comments about required and optional CSS attributes.