forked from code4policy/conversions
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (97 loc) · 2.84 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<style>
svg {
font: 10px sans-serif;
}
a:hover tspan:first-child {
text-decoration: underline;
}
tspan:last-child {
font-size: 9px;
fill-opacity: 0.7;
}
</style>
<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var format = d3.format(",d");
var treemap = d3.treemap()
.size([width, height])
.round(true)
.padding(1);
var version = {
"d3-array": "1.0.2",
"d3-axis": "1.0.4",
"d3-brush": "1.0.3",
"d3-chord": "1.0.3",
"d3-collection": "1.0.2",
"d3-color": "1.0.2",
"d3-dispatch": "1.0.2",
"d3-drag": "1.0.2",
"d3-dsv": "1.0.3",
"d3-ease": "1.0.2",
"d3-force": "1.0.4",
"d3-format": "1.0.2",
"d3-geo": "1.4.0",
"d3-hierarchy": "1.0.3",
"d3-interpolate": "1.1.2",
"d3-path": "1.0.3",
"d3-polygon": "1.0.2",
"d3-quadtree": "1.0.2",
"d3-queue": "3.0.3",
"d3-random": "1.0.2",
"d3-request": "1.0.3",
"d3-scale": "1.0.4",
"d3-selection": "1.0.3",
"d3-shape": "1.0.4",
"d3-time": "1.0.4",
"d3-time-format": "2.0.3",
"d3-timer": "1.0.3",
"d3-transition": "1.0.3",
"d3-voronoi": "1.1.0",
"d3-zoom": "1.1.0"
};
d3.csv("dummy.csv", function(d) {
d.size = +d.size;
return d;
}, function(error, data) {
if (error) throw error;
var root = d3.stratify()
.id(function(d) { return d.path; })
.parentId(function(d) { return d.path.substring(0, d.path.lastIndexOf("/")); })
(data)
.sum(function(d) { return d.size; })
.sort(function(a, b) { return b.height - a.height || b.value - a.value; });
treemap(root);
var cell = svg.selectAll("a")
.data(root.leaves())
.enter().append("a")
.attr("target", "_blank")
.attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; });
cell.append("rect")
.attr("id", function(d) { return d.id; })
.attr("width", function(d) { return d.x1 - d.x0; })
.attr("height", function(d) { return d.y1 - d.y0; })
.attr("fill", function(d) { var a = d.ancestors(); return color(a[a.length - 2].id); });
cell.append("clipPath")
.attr("id", function(d) { return "clip-" + d.id; })
.append("use")
.attr("xlink:href", function(d) { return "#" + d.id; });
var label = cell.append("text")
.attr("clip-path", function(d) { return "url(#clip-" + d.id + ")"; });
label.append("tspan")
.attr("x", 4)
.attr("y", 13)
.text(function(d) { return d.data.path.substring(d.data.path.lastIndexOf("/") + 1, d.data.path.lastIndexOf(".")); });
label.append("tspan")
.attr("x", 4)
.attr("y", 25)
.text(function(d) { return format(d.value); });
cell.append("title")
.text(function(d) { return d.id + "\n" + format(d.value); });
});
</script>