-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
445 lines (405 loc) · 25 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
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
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Non-Medical Determinants of Health</title>
<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=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="js/charts.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<!-- AOS CSS -->
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light">
<div class="container">
<a class="navbar-brand" href="#"><img src="images/logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#visualisation">VISUALIZATION</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
CHARTS
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#body-chart1">Chart1</a></li>
<li><a class="dropdown-item" href="#body-chart2">Chart2</a></li>
<li><a class="dropdown-item" href="#body-chart3">Chart3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="title">
<h1>Determinants of Health</h1>
</div>
<div class="intro">
<div class="intro-content">
<p> <p> Numerous variables have contributed significantly to our overall health and well-being over time. These variables include biological, behavioural, social-economic, cultural, environmental, and healthcare service accessibility, among many others.
Understanding the impact of these determinants is essential for formulating effective public health policies and interventions.
Our study explicitly aims to visualise the impact of three major determinants: socioeconomic status, behavioural characteristics, and health service accessibility.
Individual health outcomes are strongly impacted by behavioural factors, which encompass lifestyle decisions like nutrition, physical exercise, smoking, and alcohol usage. Socioeconomic variables, such as employment status, income, and education, affect stress levels, living conditions, and resource accessibility, all of which have an impact on health.
Access to health services, such as the availability of medical care, preventive services, and health insurance, plays a pivotal role in maintaining and improving health.
</p>
</div>
<div class="intro-content">
<p> We will use data from the OECD Health Database to arrive at a thorough understanding. T
his comprehensive dataset offers a wealth of data on numerous health-related indicators from many nations and eras.
We can produce visualisations that show trends, disparities, and relationships between these important health variables by analysing and charting this data.
Graphs and charts that show how access to healthcare, socioeconomic status, and behavioural habits impact health outcomes will be included in our visualisations.
With the use of these graphic tools, we will be able to spot important patterns and connections, giving academics, policymakers, and healthcare professionals insightful information.
Ultimately, our goal is to contribute to the development of strategies that promote better health and well-being for populations worldwide.</p>
</div>
<div>
<img src="images/hero.png" alt="">
</div>
</div>
</header>
<!-- About Section -->
<main>
<section id="about" class="about">
<div class="content">
<h2>About This Project</h2>
<div class="row">
<div class="col" data-aos="fade-right" data-aos-delay="1000">
<h3>Overview</h3>
This project is designed specifically for university students pursuing degrees in public health,
sociology,
environmental studies, and data science. Through the use of comprehensive data visualizations,
our
goal is
to provide a deep understanding of the non-medical determinants of health. These visualizations
explore the
intricate relationships and trends within various health-related data sets, offering students a
practical,
engaging, and educational experience.
</p>
</div>
<div class="col" data-aos="fade-left" data-aos-delay="1200">
<h3>Educational Benefits</h3>
<p>By engaging with these visualizations, students can enhance their educational experience,
supporting
their coursework and research projects. The insights gained are designed to aid in
evidence-based
decision-making and foster a deeper understanding of the factors that influence public
health.
This initiative not only benefits individual learning but also contributes to the broader
academic
community by providing valuable data and insights that can influence future public health
policies and
interventions.</p>
</div>
</div>
</div>
</section>
<!-- Visualization Section -->
<section id="visualisation" class="visualisation">
<div class="content">
<h2>Visualisation</h2>
<h3>Purpose of the Visualizations</h3>
<p>The visualizations in this project serve to illuminate the complex dynamics of health determinants
through three main types of analysis:</p><br>
<div class="card-section">
<div class="card-group">
<div class="card">
<img src="images/linechart1.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Time Series Analysis</h5>
<ul>
<li>Explore how tobacco and alcohol consumption have evolved over the years and
investigate the
factors influencing these trends.</li>
<li>Examine changes in nutritional intake over time and assess how these changes
align with
recommended dietary guidelines.</li>
</ul>
</div>
</div>
<div class="card">
<img src="images/heatmap.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Correlation Visualizations</h5>
<ul>
<li>Investigate the relationship between tobacco and alcohol consumption and health
outcomes,
analyzing how these relationships vary over time and across different
demographics.
</li>
<li>Delve into the correlations between nutritional intake and obesity rates,
exploring
variations by year and demographic factors.</li>
</ul>
</div>
</div>
<div class="card">
<img src="images/stacked.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Comparative Analysis</h5>
<ul>
<li>Analyze differences in health behaviors and outcomes across genders and over
time, providing
insights into the impact of these disparities on public health.
</li>
<li>Review annual changes in key health indicators like smoking rates, alcohol
consumption, and
obesity rates to gauge the effectiveness of public health interventions.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Line chart -->
<section id="body-chart1" class="container">
<h2>Trends in Health-Related Lifestyle Choices</h2>
<div class="map-background">
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-1 btn-check" name="btnradio" id="btnradio1" autocomplete="off"
checked>
<label class="btn btn-outline-primary" for="btnradio1">FoodFat</label>
<input type="radio" class="btn-2 btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Alcohol</label>
<input type="radio" class="btn-3 btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Tobacco</label>
<input type="radio" class="btn-4 btn-check" name="btnradio" id="btnradio4" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio4">Fruit</label>
<input type="radio" class="btn-5 btn-check" name="btnradio" id="btnradio5" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio5">Vegetables</label>
<input type="radio" class="btn-6 btn-check" name="btnradio" id="btnradio6" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio6">Obesity</label>
</div>
<div id="chart1"></div>
</div>
<div class="body-chart1-text" data-aos="fade-right" data-aos-delay="1400">
<h3>Purpose</h3>
<p>
The chart aims to compare critical health factors over the last decade. These factors include the
consumption of alcohol, tobacco, obesity, junk food, etc.
</p>
</div>
<div class="body-chart1 row" data-aos="fade-up" data-aos-delay="1600">
<div class="col">
<h3>Data Representation</h3>
<ul>
<li>X-Axis: Represents time, labeled by years.</li>
<li>Y-Axis: Represents the quantity of each factor, measured in grams per capita per day. The
Y-axis
scale will change based on the factor being displayed.</li>
</ul>
</div>
<div class="col" data-aos="fade-left" data-aos-delay="1800">
<h3>Line Characteristics</h3>
<ul>
<li>Each line on the chart represents a different health factor, such as tobacco, alcohol,
fruits,
vegetables, sugar, protein, calories, and vaping.</li>
<li>The lines are color-coded to match the labels for each factor, helping differentiate between
them.
</li>
</ul>
</div>
</div>
</section>
<!-- Heat Map -->
<section id="body-chart2">
<h2>Heatmap of Deaths by Disease and Country</h2>
<div class="map-background">
<div class="aside">
<label style="padding-right: 10px;" for="yearSelect2">Select Year:
<select id="yearSelect2" style="width: 200px;"">
<option value="">Select Year</option>
<option value=" 2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select></label>
</div>
<div class="chart">
<div id="selectedCountryList" class="country-list"></div>
<div id="chart2"></div>
<div class="tooltip" id="tooltip" style="opacity:0;"></div>
</div>
</div>
<div class="body-chart2-text" data-aos="fade-up" data-aos-delay="2000">
<h3>Purpose</h3>
<p>The aim of this visualization is to illustrate the intricate relationship between dietary habits and
various diseases, emphasizing the importance of food choices in preventing and managing health
conditions.
The heatmap visualizes the number of deaths caused by various diseases across different countries
for selected years, allowing for an analysis of mortality patterns.</p>
</div>
<div class="body-chart2 row" data-aos="fade-right" data-aos-delay="2200">
<div class="col">
<h3>Disease Covered</h3>
<ul>
<li><strong>Pneumonia:</strong> Poor nutrition weakens immunity, increasing infection risks.
</li>
<li><strong>Malignant Neoplasms:</strong> Diets high in processed meats and alcohol increase
cancer risks, while fruits and vegetables lower them.</li>
<li><strong>Diabetes Mellitus:</strong> High sugar and fat diets lead to type 2 diabetes;
healthy eating and weight management are crucial.</li>
<li><strong>Diseases of the Circulatory System:</strong> High intake of unhealthy fats and
sodium raises heart disease risks; a diet rich in fruits, vegetables, and whole grains
reduces these risks.</li>
</ul>
<br>
<h3>Proven Evidence</h3>
<ul>
<li><strong>Type 2 Diabetes:</strong> Diet influences weight, glycaemia, and cardiovascular
complications. Evidence supports diets high in vegetables, fruits, and whole grains for
diabetes management.</li>
<li><strong>Cardiovascular Diseases:</strong> High intake of unhealthy fats and sodium is linked
to heart diseases. The Mediterranean diet, rich in healthy fats, fruits, and vegetables, is
beneficial.</li>
<li><strong>Cancer:</strong> Diets high in processed meats and alcohol, and low in fruits and
vegetables, are associated with higher cancer risks.</li>
<li><strong>Obesity:</strong> Poor dietary choices lead to obesity, which is a risk factor for
many chronic diseases.</li>
<li>Reference: <a href="https://www.bmj.com/content/361/bmj.k2234" target="_blank">BMJ</a>.</li>
</ul>
</div>
<div class="col" data-aos="fade-left" data-aos-delay="2400">
<h3>Data Representation</h3>
<ul>
<li><strong>X-Axis:</strong> Represents different causes of death, such as Pneumonia, Malignant
neoplasms, Diabetes mellitus, and Diseases of the circulatory system.</li>
<li><strong>Y-Axis:</strong> Represents the selected countries from the dataset.</li>
</ul>
<br>
<h3>Plot Characteristics</h3>
<ul>
<li><strong>Data Points:</strong> Each cell in the heatmap represents the number of deaths for a
specific disease in a specific country, with the color intensity indicating the death count.
</li>
<li><strong>Color Coding:</strong> The background color of each cell varies based on the value
of deaths:
</li>
<li><strong>Interactivity:</strong> Hovering over a cell shows a tooltip with detailed
information about the country, disease, and number of deaths.</li>
</ul>
</div>
</div>
</section>
<section id="body-chart3">
<h2>Comparative Analysis of Key Economic Indicators</h2>
<div class="map-background">
<div class="aside">
<label style="padding-right: 10px;" for="yearSelect3">Select Year:
<select id="yearSelect3" style="width: 200px;"">
<option value="">Select Year</option>
<option value=" 2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select></label>
</div>
<div class="chart">
<div id="selectedCountryList3" class="country-list"></div>
<div id="chart3"></div>
<div class="tooltip3" id="tooltip" style="opacity:0;"></div>
</div>
</div>
<div class="body-chart3-text" data-aos="fade-up" data-aos-delay="2600">
<h3>Purpose</h3>
<p>
The aim of this visualization is to illustrate the economic performance of various countries by
displaying key economic indicators through a stacked bar chart. This chart emphasizes the importance
of comparing multiple economic factors to gain a comprehensive understanding of a country's economic
health and performance. The visualization allows users to analyze trends and differences in economic
indicators across different countries and selected years.
</p>
</div>
<div class="row">
<div class="col" data-aos="fade-right" data-aos-delay="2800">
<h3>Economic Indicators Covered</h3>
<ul>
<li><strong>GDP (ECONPIBN):</strong> Gross Domestic Product, representing the overall economic
output of a country.</li>
<li><strong>Consumption (ECONAICO):</strong> Reflects the total consumption of goods and
services within a country.</li>
<li><strong>Exports (ECONFCEX):</strong> Represents the total value of goods and services
exported by a country.</li>
</ul>
</div>
<div class="col" data-aos="fade-left" data-aos-delay="3000">
<h3>Data Representation</h3>
<ul>
<li><strong>X-Axis:</strong>Represents the selected countries from the dataset.</li>
<li><strong>Y-Axis:</strong> Represents the economic indices (GDP, Consumption, Exports) in the
unit INDICEIP.</li>
</ul>
<h3>Stacked Bar Characteristics</h3>
<ul>
<li><strong>Data Points:</strong> Each bar in the stacked bar chart represents the economic
indicators for a specific country in a selected year. The height of each segment in the bar
indicates the value of the respective economic indicator.</li>
<li><strong>Color Coding:</strong> Each economic indicator (GDP, Consumption, Exports) is
represented by a distinct color to differentiate between them. The colors are consistent
across all countries for easy comparison.
</li>
<li><strong>Interactivity:</strong> Hovering over a bar segment shows a tooltip with detailed
information about the country, the economic indicator, and its value, formatted to one
decimal place.</li>
</ul>
</div>
</div>
</section>
</main>
<footer>
<p>© TEAM CL03_T04. 2024 Swinburne University of Technology</p>
</footer>
</body>
<!-- AOS.js -->
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
// AOS.init();
AOS.init({
delay: 100, // values from 0 to 3000, with step 50ms
duration: 1200, // values from 0 to 3000, with step 50ms
once: false, // whether animation should happen only once - while scrolling down
mirror: false, // whether elements should animate out while scrolling past them
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.1/typed.min.js"></script>
</html>