forked from carvil/education-vis
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
102 lines (92 loc) · 2.39 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
<!DOCTYPE html>
<style>
text{
font-size:12px;
}
.mainBars rect{
shape-rendering: auto;
fill-opacity: 0;
stroke-width: 0.5px;
stroke: rgb(0, 0, 0);
stroke-opacity: 0;
}
.subBars{
shape-rendering:crispEdges;
}
.edges{
stroke:none;
fill-opacity:0.5;
}
.header{
text-anchor:middle;
font-size:16px;
}
line{
stroke:grey;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/2609804/viz.v1.1.0.min.js"></script>
<script>
<!-- TODO: generate these colors automatically -->
var color = {
"collections": "#da4480",
"finder-frontend": "#5ab449",
"frontend": "#7f5acd",
"government-frontend": "#aab740",
"manuals-frontend": "#ce58c0",
"smartanswers": "#50a26e",
"whitehall": "#d1434b",
"whitehall-frontend": "#45c0bc"
};
d3.json('output/education_data.json', function(error, data) {
var svg = d3.select("body").append("svg").attr("width", 1200).attr("height", 2016);
svg.append("text").attr("x",150).attr("y",70)
.attr("class","header").text("Where Education content is rendered");
var g =[svg.append("g").attr("transform","translate(150,100)")
,svg.append("g").attr("transform","translate(650,100)")];
var bp=[ viz.bP()
.data(data)
.min(12)
.pad(1)
.height(1680)
.width(560)
.barSize(35)
.fill(d=>color[d.primary])
];
[0,1].forEach(function(i){
g[i].call(bp[i])
g[i]
.append("text")
.attr("x",-50)
.attr("y",-8)
.style("text-anchor","middle")
.text("Application");
g[i]
.append("text")
.attr("x", 600)
.attr("y",-8)
.style("text-anchor","middle")
.text("Document Type");
g[i]
.selectAll(".mainBars")
.append("text")
.attr("class","label")
.attr("x",d=>(d.part=="primary"? -30: 30))
.attr("y",d=>+6)
.text(d=>d.key)
.attr("text-anchor",d=>(d.part=="primary"? "end": "start"));
g[i]
.selectAll(".mainBars")
.append("text")
.attr("class","perc")
.attr("x",d=>(d.part=="primary"? -140: 200))
.attr("y",d=>+6)
.text(function(d){ return d.value})
.attr("text-anchor",d=>(d.part=="primary"? "end": "start"));
});
});
</script>
</body>
</html>