| Index: third_party/webtreemap/src/README.markdown
|
| diff --git a/third_party/webtreemap/src/README.markdown b/third_party/webtreemap/src/README.markdown
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..78903ba68b6d3bab214844ef165230f68ca2430c
|
| --- /dev/null
|
| +++ b/third_party/webtreemap/src/README.markdown
|
| @@ -0,0 +1,63 @@
|
| +# webtreemap
|
| +
|
| +A simple treemap implementation using web technologies (DOM nodes, CSS
|
| +styling and transitions) rather than a big canvas/svg/plugin.
|
| +
|
| +Play with a [demo][].
|
| +
|
| +[demo]: http://martine.github.com/webtreemap/demo/demo.html
|
| +
|
| +## Creating your own
|
| +
|
| +1. Create a page with a DOM node (i.e. a `<div>`) that will contain
|
| + your treemap.
|
| +2. Add the treemap to the node via something like
|
| +
|
| + appendTreemap(document.getElementById('mynode'), mydata);
|
| +3. Style the treemap using CSS.
|
| +
|
| +### Input format
|
| +
|
| +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][thejit]. 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.)
|
| +
|
| +### CSS styling
|
| +
|
| +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.
|
| +
|
| +## Related projects
|
| +
|
| +* [JavaScript InfoVis Toolkit][thejit]
|
| +
|
| +[thejit]: http://thejit.org/
|
|
|