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

Side by Side 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 unified diff | 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 »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 # webtreemap
2
3 A simple treemap implementation using web technologies (DOM nodes, CSS
4 styling and transitions) rather than a big canvas/svg/plugin.
5
6 Play with a [demo][].
7
8 [demo]: http://martine.github.com/webtreemap/demo/demo.html
9
10 ## Creating your own
11
12 1. Create a page with a DOM node (i.e. a `<div>`) that will contain
13 your treemap.
14 2. Add the treemap to the node via something like
15
16 appendTreemap(document.getElementById('mynode'), mydata);
17 3. Style the treemap using CSS.
18
19 ### Input format
20
21 The input data (`mydata` in the overview snippet) is a tree of nodes,
22 likely imported via a separate JSON file. Each node (including the
23 root) should contain data in the following format.
24
25 {
26 name: (HTML that is displayed via .innerHTML on the caption),
27 data: {
28 "$area": (a number, in arbitrary units)
29 },
30 children: (list of child tree nodes)
31 }
32
33 (This strange format for data comes from the the [JavaScript InfoVis
34 Toolkit][thejit]. I might change it in the future.)
35
36 The `$area` of a node should be the sum of the `$area` of all of its
37 `children`.
38
39 (At runtime, tree nodes will dynamically will gain two extra
40 attributes, `parent` and `dom`; this is only worth pointing out so
41 that you don't accidentally conflict with them.)
42
43 ### CSS styling
44
45 The treemap is constructed with one `div` per region with a separate
46 `div` for the caption. Each div is styleable via the
47 `webtreemap-node` CSS class. The captions are stylable as
48 `webtreemap-caption`.
49
50 Each level of the tree also gets a per-level CSS class,
51 `webtreemap-level0` through `webtreemap-level4`. These can be
52 adjusted to e.g. made different levels different colors. To control
53 the caption on a per-level basis, use a CSS selector like
54 `.webtreemap-level2 > .webtreemap-caption`.
55
56 Your best bet is to modify the included `webtreemap.css`, which
57 contains comments about required and optional CSS attributes.
58
59 ## Related projects
60
61 * [JavaScript InfoVis Toolkit][thejit]
62
63 [thejit]: http://thejit.org/
OLDNEW
« 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