-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvisualization.html
More file actions
217 lines (215 loc) · 7.63 KB
/
visualization.html
File metadata and controls
217 lines (215 loc) · 7.63 KB
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE html>
<html>
<head>
<title>Data visualization</title>
<script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.1.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script>
<script src="utils.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
</head>
<body>
<h1>Income disparity in Australia</h1>
<table class='stats-table'>
<tr>
<td>Australia's <em>GDP</em> is the <strong>13</strong><sup>th</sup> <em>highest</em> out of <strong>190</strong> countries</td>
<td>The <em>top</em> <strong>20%</strong> of Australians have <strong>90</strong> <em>times</em> more wealth than the <em>bottom</em> <strong>20%</strong></td>
<td><em>Low income</em> can have impacts on outcomes such as <em>health</em>, <em>education</em> and <em>quality of life</em></td>
</tr>
</table>
<div style="padding-bottom: 200px"></div>
<div class="main_grid">
<div class="grid_row">
<div></div>
<div class="body-text">
<div>
<h2>Regional population</h2>
<br />
<p>
Australia's <em>population</em> is
<em>not evenly distributed</em>.
</p>
<ul>
<li>
<em>Most</em> Australians live in the <em>cooler</em>,
<em>less arid coastal</em> regions
</li>
<li>
Australia's <em>five largest cities</em> hold
<strong>65%</strong> of the <em>population</em> but take up only
<strong>0.6%</strong> of the total
<em>area</em>
</li>
</ul>
</div>
<div>
<p>
<i class="fas fa-hand-pointer click-icon"></i> Drag on the lower
graph to filter the map.
</p>
</div>
</div>
<div></div>
<div id="pop_density"></div>
<div></div>
</div>
<div style="padding-top: 350px">
<div class="grid_row">
<div></div>
<div class="body-text">
<div>
<h2>Regional income</h2>
<br />
<p>
<em>Urban</em> regions are defined by the
<em>European Commission</em> as settlements with:
</p>
<ul>
<li><strong>5,000</strong> <em>inhabitants</em></li>
<li><strong>300</strong> <em>people per square km</em></li>
</ul>
<br />
<br />
<p>
<i class="fas fa-hand-pointer click-icon"></i> Use the controls
below to highlight urban regions.
</p>
<div id="show-urban-overview" style="padding-left: 25px"></div>
<div id="show-urban-zoomed" style="padding-left: 25px"></div>
</div>
</div>
<div></div>
<div id="annual_income"></div>
<div></div>
</div>
<div class="grid_row">
<div></div>
<div class="body-text">
<p>
Many of the regions with very <em>high average incomes</em> in
Australia are in large <em>cities</em>. For example,
<em>Sydney</em> is Australia's <em>largest</em> city with over
<strong>5.3M</strong> people. The
<em>average annual family income</em> in <em>urban Sydney</em> is
<strong>140k</strong>, while the <em>national average</em> is
<strong>120k</strong>. That means the average in
<em>Sydney</em> is <strong>16%</strong> <em>higher</em> than the
<em>national</em> average.
</p>
</div>
<div></div>
<div id="annual_income_zoomed"></div>
<div></div>
</div>
</div>
<div class="grid_row" style="padding-top: 200px">
<div></div>
<div class="body-text">
<div>
<h2>Income distribution</h2>
<br />
<p>
The income vs population density chart on the right highlights
some important features:
</p>
<ul>
<li>
Most <em>rural</em> regions have a <em>similar</em> average
income
</li>
<li>
There is a <em>sharp increase</em> in income in
<em>urban</em> regions
</li>
<li>
<em>Rural</em> regions are in a <em>wider band</em> since their
<em>low population</em> totals cause
<em>increased statistical uncertainty</em>
</li>
</ul>
</div>
</div>
<div></div>
<div id="income"></div>
<div></div>
</div>
<div class="grid_row" style="padding-top: 320px">
<div></div>
<div class="body-text">
<div>
<h2>Industry distribution</h2>
<br />
<p>
Looking at the largest industry in each region can help understand
the income disparity:
</p>
<ul>
<li>
<em>Higher paying jobs</em> such as utility services or
scientific and technical services are <em>more common</em> in
<em>more populated</em> regions
</li>
<li>
<em>Rural</em> areas have alot of <em>agriculture</em> jobs,
which are the <em>worst paying</em> jobs
</li>
<li>
<em>Rural</em> jobs are more <emm>volatile</emm>, for example:
<ul>
<li>
<em>Agriculture</em> is dependent on the <em>season</em>
</li>
<li>
<em>Mining</em> is dependent on the demand from
<em>international markets</em>
</li>
</ul>
</li>
</ul>
</div>
<div>
<p>
<i class="fas fa-hand-pointer click-icon"></i> Use the lower graph to filter by industry:
</p>
<div style="padding-left: 50px">Click to select</div>
<div style="padding-left: 50px">Shift + click to select multiple</div>
<div style="padding-left: 50px">Double click to select all</div>
</div>
</div>
<div></div>
<div id="largest_industries"></div>
<div></div>
</div>
</div>
<div class="copyright">
Income in Australia.
<br>
Copyright (C) 2021 Daniel Jacks.
<br>
This work is accessible under the GNU General Public License.
</div>
</body>
<script type="text/javascript">
render_graph("pop_density", "vega_lite/pop_density.vg.json");
render_graph("annual_income", "vega_lite/annual_income.vg.json");
render_graph(
"annual_income_zoomed",
"vega_lite/annual_income_zoomed.vg.json"
);
render_graph("income", "vega_lite/income.vg.json");
render_graph(
"largest_industries",
"vega_lite/largest_industries.vg.json"
);
</script>
</html>