/
pop2010-svg.html
119 lines (119 loc) · 3.05 KB
/
pop2010-svg.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>
<head>
<meta charset="utf-8" />
<style>
body {
font-family: Helvetica, "Gill Sans", Arial;
}
svg {
width: 500px;
height: 500px;
}
.top-label {
font-size: 13px;
font-style: italic;
text-transform: uppercase;
float: left;
}
.age-label {
text-align: right;
font-weight: bold;
width: 90px;
padding-right: 10px;
}
.clearfix {
clear: both;
}
.bar {
fill: DarkSlateBlue;
}
.bar-label {
text-anchor: end;
}
.axis-label {
text-anchor: middle;
font-size: 13px;
}
</style>
</head>
<body>
<h2>Age distribution of the world, 2010</h2>
<div class="top-label age-label">
<p>age group</p>
</div>
<div class="top-label">
<p>portion of the population</p>
</div>
<div class="clearfix"></div>
<svg>
<g transform="translate(100,30) scale(43.1,1)" class="bar">
<!-- 80 and up -->
<rect x="0" y="0" height="20" width="1.6" />
<!-- 75-79 -->
<rect x="0" y="25" height="20" width="1.5" />
<!-- 70-74 -->
<rect x="0" y="50" height="20" width="2.1" />
<!-- 65-69 -->
<rect x="0" y="75" height="20" width="2.6" />
<!-- 60-64 -->
<rect x="0" y="100" height="20" width="3.4" />
<!-- 55-59 -->
<rect x="0" y="125" height="20" width="4.5" />
<!-- 50-54 -->
<rect x="0" y="150" height="20" width="5.1" />
<!-- 45-49 -->
<rect x="0" y="175" height="20" width="6.0" />
<!-- 40-44 -->
<rect x="0" y="200" height="20" width="6.6" />
<!-- 35-39 -->
<rect x="0" y="225" height="20" width="7.1" />
<!-- 30-34 -->
<rect x="0" y="250" height="20" width="7.3" />
<!-- 25-29 -->
<rect x="0" y="275" height="20" width="8.1" />
<!-- 20-24 -->
<rect x="0" y="300" height="20" width="8.9" />
<!-- 15-19 -->
<rect x="0" y="325" height="20" width="8.8" />
<!-- 10-14 -->
<rect x="0" y="350" height="20" width="8.6" />
<!-- 5-9 -->
<rect x="0" y="375" height="20" width="8.8" />
<!-- 0-4 -->
<rect x="0" y="400" height="20" width="9.3" />
</g>
<g class="bar-label">
<text x="90" y="45">80 and up</text>
<text x="90" y="70">75-79</text>
<text x="90" y="95">70-74</text>
<text x="90" y="120">65-69</text>
<text x="90" y="145">60-64</text>
<text x="90" y="170">55-59</text>
<text x="90" y="195">50-54</text>
<text x="90" y="220">45-49</text>
<text x="90" y="245">40-44</text>
<text x="90" y="270">35-39</text>
<text x="90" y="295">30-34</text>
<text x="90" y="320">25-29</text>
<text x="90" y="345">20-24</text>
<text x="90" y="370">15-19</text>
<text x="90" y="395">10-14</text>
<text x="90" y="420">5-9</text>
<text x="90" y="445">0-4</text>
</g>
<g transform="translate(100,30)" stroke="white">
<line x1="0" y1="0" x2="0" y2="420" />
<line x1="107.75" y1="0" x2="107.75" y2="420" />
<line x1="215.5" y1="0" x2="215.5" y2="420" />
<line x1="323.25" y1="0" x2="323.25" y2="420" />
</g>
<g transform="translate(100,30)" class="axis-label">
<text x="0" y="-5">0.0%</text>
<text x="107.75" y="-5">2.5%</text>
<text x="215.5" y="-5">5.0%</text>
<text x="323.25" y="-5">7.5%</text>
</g>
</svg>
</body>
</html>