-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
94 lines (79 loc) · 3.34 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Voronoi Treemaps in D3</title> <meta name="robots"
content="index,follow" /> <link rel="stylesheet" type="text/css"
href="http://courses.cs.washington.edu/courses/cse512/14wi/style.css"/>
</head>
<body>
<div class='content wider'>
<div class='title'>
<a href="http://courses.cs.washington.edu/courses/cse512/14wi/"><strong>CSE512</strong></a>
Projects
<small>(Winter 2014)</small>
</div>
<br/>
<div class='pub' data-spy="scroll" data-target=".navbar">
<h1 class="title">Voronoi Treemaps in D3</h1>
<div class="authors">
<a >Paul Vines</a>,
<a >Peter Henry</a>
</div>
<!--
<div class="figure">
<img src="summary.png" width="100%"/>
<div class="caption">Example of a Voronoi Treemap used to
visualize the same hierarchy used for the D3 example of
the <a href="http://strongriley.github.io/d3/ex/treemap.html">Rectangular
Treemap</a>.</div>
</div>
-->
<div class="figure">
<img src="summary_image.png" width="100%"/>
<div class="caption">A Voronoi Treemap created with our software, using the same dataset as this <a href="http://bl.ocks.org/mbostock/4063582">D3 Standard Treemap</a>.</div>
</div>
<h2>Abstract</h2>
<p>
Voronoi treemaps are an alternative to traditional
rectangular treemaps for visualizing hierarchical data. Like
rectangular treemaps, Voronoi treemaps represent
hierarchical data by dividing the canvas region into cells
for each node at the top of the hierarchy, and then further
dividing each of these cells for the children of those
nodes. The organic shapes created by the Voronoi treemap can
be easier to distinguish sibling nodes from nodes in other
branches of the hierarchy. Voronoi treemaps can also be fit
to non-rectangular canvases, and are often more
aesthetically pleasing.
</p>
<h2>Software</h2>
<p>
We implemented the fastest known version in
javascript and gave it a D3 API so you can incorporate it into
your favorite D3 application. Use d3.layout.voronoitreemap()
the same way you would any other d3.layout for hierarchical
data. If your dataset is deeper than three or four levels it
is recommended you set a maximum depth as the Voronoi treemap
computations can get pretty heavy.
</p>
<p>
A demo of our software is available <a href="demo.html">here</a>.
The page source for this demo also demonstrates the use of our software.
</p>
<h2>Materials</h2>
<div class="links">
<a href="final/paper-plvines-djpeter.pdf" >PDF</a>
|
<a href="final/poster-plvines-djpeter.pdf" >Poster</a>
</div>
<div class='footer'>
<a href='http://cs.washington.edu'>Computer Science & Engineering</a> -
<a href='http://www.washington.edu'>University of Washington</a>
</div>
</div>
<br/>
<br/>
</div>
</body>
</html>