-
Notifications
You must be signed in to change notification settings - Fork 0
/
newIndex.html
275 lines (243 loc) · 18 KB
/
newIndex.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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="static/css/style.css">
<link rel="stylesheet" href="static/css/style1.css">
<link rel="stylesheet" href="static/css/d3Style.css">
<link href="static/css/c3.css" rel="stylesheet">
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
</head>
<title>Global Suicide Rates</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<style>
body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif}
body {font-size:16px;}
.w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
.w3-half img:hover{opacity:1}
</style>
<body>
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-red w3-collapse w3-top w3-large w3-padding" style="z-index:3;width:300px;font-weight:bold;" id="mySidebar"><br>
<a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-hide-large w3-display-topleft" style="width:100%;font-size:22px">Close Menu</a>
<div class="w3-container">
<h3 class="w3-padding-64"><b>Global<br>Suicide Rates</b></h3>
</div>
<div class="w3-bar-block">
<a href="#" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Home</a>
<a href="#data" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Data</a>
<a href="#intro" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Introduction</a>
<a href="#bubble" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Bubble Chart</a>
<a href="#bar" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Bar Chart</a>
<a href="#Map" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Map</a>
<a href="#model" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Model</a>
<a href="#findings" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Findings</a>
<a href="#conclusion" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Conclusion</a>
</div>
</nav>
<!-- Top menu on small screens -->
<header class="w3-container w3-top w3-hide-large w3-red w3-xlarge w3-padding">
<a href="javascript:void(0)" class="w3-button w3-red w3-margin-right" onclick="w3_open()">☰</a>
<span>Suicide Rates</span>
</header>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:340px;margin-right:40px">
<!-- Header -->
<div class="w3-container" style="margin-top:80px" id="data">
<h1 class="w3-jumbo"><b>Global Suicide Rate Analysis</b></h1>
<p>800,000 people die from suicide every year. That accounts for about 1.4% of total global deaths annually. The trend is heading downward in much of the developed world. In some select countries suicide is taboo and even illegal which seems a bit ridiculous. Those nations that have punishments for attempted suicides tend to be in Asia and Africa. While some do still exist in other parts of the world. Because of these negative views on suicide and attempted suicide the rates tend to be underreported as cause of death is covered up or never reported. </p>
<p> What are the indicators of suicide rates globally?</p>
<h1 class="w3-xxxlarge w3-text-red"><b>Dataset.</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
</div>
<!-- Datatable -->
<div class="w3-row-padding">
<div class="row" style='height:750px;overflow:auto;'>
<div class="col-md-12">
<table class="sortable">
<thead>
<tr><th>Country </th> <th class='sorttable_numeric'>GDP per Capita</th> <th class='sorttable_numeric'>Suicides per 100k</th> <th class='sorttable_numeric'>Happiness Index Score</th> <th class='sorttable_numeric'>Human Development Index</th> <th class='sorttable_numeric'>Happiness Rank</th> <th class='sorttable_numeric'>HDI Rank</th> <th class='sorttable_numeric'>Private Debt (% of GDP)</th> <th class='sorttable_numeric'>Health Spending per Capita</th> <th class='sorttable_numeric'>Alcohol Consumption per Capita</th></tr>
</thead>
<tbody class='dataset'></tbody>
</table>
</div>
</div>
</div>
<!-- Modal for full size images on click-->
<div id="modal01" class="w3-modal w3-black" style="padding-top:0" onclick="this.style.display='none'">
<span class="w3-button w3-black w3-xxlarge w3-display-topright">×</span>
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
<img id="img01" class="w3-image">
<p id="caption"></p>
</div>
</div>
<!-- Introduction -->
<div class="w3-container" id="intro" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-red"><b>Introduction.</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
<p>The purpose behind this project was to look at different global indexes and see if there is a correlation between these different indexes and suicide rates globally. This could show how developing nations can prioritize certain aspects of their economy and/or society in order to lower suicide rates amongst its population.</p>
<p><strong>Suicide Rates:</strong> For this analysis we will be looking at the number of suicides per 100,000 people in the population.</p>
<p><strong>Human Development Index (HDI):</strong> HDI attempts to create an index that looks beyond GDP for determining a countries capabilities. The Human Development Index is a summary of key dimensions in human development. Those dimensions include: life expectancy, education (number of years of education), and standard of living (GNI per Capita). HDI is measure between 0 and 1 with 1 being the highest and most developed and 0 being the least developed nations.</p>
<p><strong>Happiness Index: </strong> The report is primarily based on individual respondent ratings. This provides some difficulty in gathering data and reports as this index is done entirely by survey. Rated out of 10 with 10 being the happiest life and 0 being the saddest.</p>
<p><strong>GDP per Capita: </strong>GDP or Gross Domestic Product is a measure of a country's economic output. It measures the added value from the production of goods and services in a given country over a certain period of time, typically a year. Per capita means it accounts for each individual in a population. </p>
<p><strong>Private Debt: </strong>Measured as a percentage of GDP and taken from the International Monetary Funds website. Described as the total stock of loans and debt securities issued by household and nonfinancial corporations as a share of GDP.</p>
<p><strong>Health Spending per Capita: </strong>Measures the final consumption of health care goods and services including personal health care and collective ervices. This indicator is measured as a share of GDP, as a share of total health spending and in USD per capita. </p>
<p><strong>Alcohol Consumption per Capita: </strong>Defined as the annual sales of pure alcohol in litres per person aged 15 years and older. This indicator is meased in litres per capita.</p>
</div>
<!-- Bubble Chart -->
<div class="w3-container" id="bubble" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-red"><b>Bubble Chart.</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
<p>Suicide Rates vs. Features</p>
<div class="w3-row-padding">
<div class="chart"></div>
</div>
<!-- Bar Chart -->
<div class="w3-container" id="bar" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-red"><b>Bar Chart.</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
<p>Data grouped by region and averaged. Bar chart shows differeneces betweent the ten major regions.</p>
</div>
<div id="chart"></div>
<!-- Map -->
<!-- Header -->
<div class="w3-container" style="margin-top:80px" id="Map">
<h1 class="w3-xxxlarge w3-text-red"><b>Map.</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
</div>
<!-- Map -->
<div class="w3-row-padding">
<div id = 'map'></div>
</div>
<!-- Model -->
<div class="w3-container" id="model" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-red"><b>Models.</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
<p>A linear regression model as well as a deep neural network model were used to predict suicide rates based off the features discussed before.</p>
</div>
<!-- Model Table -->
<div class="w3-row-padding">
<div class="row" style='height:350px;overflow:auto;'>
<div class="col-md-12">
<table class="table">
<thead>
<tr><th>Model </th> <th>Mean Absolute Error</th> <th>Mean Squared Error</th>
</thead>
<tbody class='predictions'></tbody>
</table>
</div>
</div>
</div>
<!-- Model Table -->
<!-- <div class="w3-row-padding">
<div class="row" style='height:1200px;overflow:auto;'>
<div class="col-md-12">
<p><strong>Comparison between all of the features</strong></p>
<img class='comparison' src='visuals/feature_v_feature.jpg' alt='feature v feature'>
</div>
</div>
</div> -->
<!-- Model comparison -->
<div class="w3-row-padding">
<div class="w3-half w3-margin-bottom">
<ul class="w3-ul w3-light-grey w3-center">
<li class="w3-grey w3-xlarge w3-padding-32">Tensorflow Linear Model</li>
<li class="w3-padding-16">Linear Model Loss</li>
<li> <img class='Modelpics' src='visuals/linear_model_loss.jpg' alt='linear model loss'> </li>
<li class="w3-padding-16">Linear Model Predictions</li>
<li> <img class='Modelpics' src='visuals/linear_model_predictions.jpg' alt='linear model predictions'></li>
<li class="w3-padding-16">Linear Model Error</li>
<li> <img class='Modelpics' class ='errorModel' src='visuals/linear_model_error.jpg' alt='linear model error'></li>
</ul>
</div>
<!-- <div class="w3-third">
<ul class="w3-ul w3-light-grey w3-center">
<li class="w3-dark-grey w3-xlarge w3-padding-32">SKlearn Linear Model</li>
<li class="w3-padding-16">Training and Testing Scores</li>
<li><img class='Modelpics' src='visuals/dnn_model_loss.jpg' alt='linear model loss'></li>
<li class="w3-padding-16">DNN Model Predictions</li>
<li> <img class='Modelpics' src='visuals/dnn_model_predictions.jpg' alt='linear model loss'></li>
<li class="w3-padding-16">DNN Model Error </li>
<li><img class='Modelpics' src='visuals/dnn_model_error.jpg' alt='linear model loss'></li>
</ul>
</div> -->
<div class="w3-half">
<ul class="w3-ul w3-light-grey w3-center">
<li class="w3-red w3-xlarge w3-padding-32">DNN Model</li>
<li class="w3-padding-16">DNN Model Loss</li>
<li><img class='Modelpics' src='visuals/dnn_model_loss.jpg' alt='linear model loss'></li>
<li class="w3-padding-16">DNN Model Predictions</li>
<li> <img class='Modelpics' src='visuals/dnn_model_predictions.jpg' alt='linear model loss'></li>
<li class="w3-padding-16">DNN Model Error </li>
<li><img class='Modelpics' src='visuals/dnn_model_error.jpg' alt='linear model loss'></li>
</ul>
</div>
<br>
</div>
<!-- Findings -->
<div class="w3-container" id="findings" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-red"><b>Findings.</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
<p><strong>MSE vs. MAE </strong></p>
<p>Mean Squared Error: With the nature of the data and using real world data points I think that the MSE is as good as it gets. The line of best fit describes the data best. MSE is going to be influenced by the larger outlier and create a larger error coefficient. While I believe it is the best it can be I don't think that MSE is the best performance indicator for this model. I think mean absolute value is a better indicator of performance.</p>
<p>Mean Absolute Error: Unlike the MSE, MAE is based on the absolute value of the error and not the square. This means the error residual treats both the large and small errors equally. Because there are outliers within the dataset it is important to not over emphasize the errors. This error coefficient is a better fit for real world data where we are likely to experience some large outliers.</p>
<p>If I were to repeat this study again I would drill down into the more detailed data and find specific indicators that drive down the suicide rates. Things like access to healthcare, levels of education, religion, debt to income ratio, and political stability. I think these variables take a deeper dive into how a country treats each individual citizen and the desire to better everyones life within their population. It would also be noteworthy to look at the situations surrounding suicides if that data is accessable. The percentage that happen within a prison system, and how many people commited suicide with undiagnosed and medicated mental health issues. It might be far fetched to think that this kind of data is easily accessible, but I think it's valuable to look at how countries treat their citizens.</p>
</div>
<!-- Conclusion -->
<div class="w3-container" id="conclusion" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-red"><b>Conclusion.</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
<p><strong>Conclusion: Suicide Rates vs. X </strong></p>
<p>In my findings from this project I came to the conclusion that using the six feature listed previously we can somewhat accurately predict the suicide rates of a country. Because this is a real world dataset I have allowed for my models to have a higher error coefficient than what would be used for a controlled study. With a mean absolute error around 2 I feel confident in saying the model can predict with a degree of accuracy what a countries suicide rate per 100k population could be. </p>
<p>The additional features added (debt, health spending, and alcohol consumption) have made the model more accurate and partnered with the original three features the model predicts with a degree of accuracy.</p>
<p>If I were to repeat this study again I would drill down into the more detailed data and find specific indicators that drive down the suicide rates. Things like access to healthcare, levels of education, religion, debt to income ratio, and political stability. It is difficult to find complete datasets for most of these indicators. Most under-developed and developing nations don't report the kind of data that would be most beneficial for this study. I think these variables take a deeper dive into how a country treats each individual citizen and the desire to better everyones life within their population. It would also be noteworthy to look at the situations surrounding suicides if that data is accessable. The percentage that happen within a prison system, and how many people commited suicide with undiagnosed and medicated mental health issues. It might be far fetched to think that this kind of data is easily accessible, but I think it's valuable to look at how countries treat their citizens.</p>
</div>
<!-- End page content -->
</div>
<!-- W3.CSS Container -->
<div class="w3-light-grey w3-container w3-padding-32" style="margin-top:75px;padding-right:58px"><p class="w3-right">Powered by <a title="Lake" target="_blank" class="w3-hover-opacity">Lake</a></p></div>
<script>
// Script to open and close sidebar
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
</script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="static/js/sortable.js"></script>
<script src="static/js/table.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<script type="text/javascript" src="static/js/app1.js"></script>
<script src="static/js/c3.js"></script>
<script type="text/javascript" src="static/js/apexapp.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<!-- API key -->
<script type="text/javascript" src="static/js/config.js"></script>
<script type="text/javascript" src="static/js/app.js"></script>
</body>
</html>