-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (106 loc) · 3.02 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
118
119
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Hello SVG.js!</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.min.js"></script>
<style media="screen">
svg text{
font-size:15px;
}
svg rect{
}
svg .legend{
font-size: 10px;
}
</style>
</head>
<body>
<h1>ACT vs Aus Education Percentage</h1>
<div id="drawing">
</div>
<script type="text/javascript">
var draw = SVG('drawing').size(800, 600);
var data = [
{
"Education": "Preschool",
"ACT": 4.5,
"Aus": 4.8
},
{
"Education": "Primary - Government",
"ACT": 15.7,
"Aus": 18.2
},
{
"Education": "Primary - Catholic",
"ACT": 6.2,
"Aus": 5.3
},
{
"Education": "Primary - other",
"ACT": 3,
"Aus": 3.2
},
{
"Education": "Secondary - Government",
"ACT": 10.3,
"Aus": 11.5
},
{
"Education": "Secondary - Catholic",
"ACT": 4.8,
"Aus": 4.7
},
{
"Education": "Secondary - other",
"ACT": 3.2,
"Aus": 3.9
},
{
"Education": "Technical or further education",
"ACT": 6.2,
"Aus": 5.9
},
{
"Education": "University or tertiary",
"ACT": 26,
"Aus": 16.1
},
{
"Education": "Other",
"ACT": 2.4,
"Aus": 2.8
},
{
"Education": "Not stated",
"ACT": 17.6,
"Aus": 23.7
}
]
var barspacing = 25;
var barheight = 20;
var xmargin = 200;
var xscale = 15;
for (var i = 0; i < data.length; i++) {
var d = data[i];
draw.rect(d.ACT * xscale, barheight/2).move(xmargin, i*barspacing);
draw.text(d.Education).move(190, i*barspacing).attr({'text-anchor': "end"});
}
for (var i=0; i < data.length; i++) {
var d= data[i];
draw.rect(d.Aus * xscale, barheight/2).move(xmargin, i*barspacing+barheight/2).fill("red");
}
draw.line(xmargin, 280, 600, 280).stroke('black');
var ticks = [0, 5, 10, 15, 20, 25, 30];
for (var i = 0; i < ticks.length; i++) {
draw.line(0, 0, 0, 10).move(xmargin + ticks[i]*xscale, 275).stroke('black');
draw.text(ticks[i] + "%").move(xmargin + ticks[i]*xscale, 285);
}
draw.rect(10,10).move(550,5);
draw.text("ACT").move(565,0).addClass('legend');
draw.rect(10,10).move(550,15).fill("red");
draw.text("Aus").move(565,10).addClass('legend');
</script>
</body>
</html>