Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(132)

Unified Diff: third_party/webtreemap/src/README.markdown

Issue 131463006: Add third-party library 'webtreemap' for use in tools. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Delete demo directory Created 6 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « third_party/webtreemap/src/COPYING ('k') | third_party/webtreemap/src/webtreemap.css » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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/
« no previous file with comments | « third_party/webtreemap/src/COPYING ('k') | third_party/webtreemap/src/webtreemap.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698