-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtreemap.html
62 lines (52 loc) · 1.42 KB
/
treemap.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
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Treemap</title>
<!-- Based on d3indepth's https://bl.ocks.org/d3indepth/96649ce5ef72d53386790908fe785a6a -->
<script src="js/d3.v4.min.js"></script>
</head>
<style>
rect {
stroke: white;
fill: #05668D;
opacity: 0.3;
}
</style>
<svg>
<g></g>
</svg>
<script>
// My variables
var vWidth = 350;
var vHeight = 200;
var myData = {
"name": "Rooooot",
"children": [{
"name": "Topic X",
"children": [{"name": "Sub X1", "size": 300}]
}, {
"name": "Topic Y",
"children": [{"name": "Sub Y1", "size": 200}, {"name": "Sub Y2", "size": 200}]
}, {
"name": "Topic Z",
"size": 400
}]
};
d3.select('svg')
.attr('width', vWidth)
.attr('height', vHeight);
// d3 setup
var root = d3.hierarchy(myData);
root.sum(function (d) { return d.size; });
var treemapLayout = d3.treemap()
.size([350, 200])
.paddingOuter(10);
treemapLayout(root);
d3.select('svg g')
.selectAll('rect').data(root.descendants()).enter()
.append('rect')
.attr('x', function (d) { return d.x0; })
.attr('y', function (d) { return d.y0; })
.attr('width', function (d) { return d.x1 - d.x0; })
.attr('height', function (d) { return d.y1 - d.y0; })
</script>