Data-Visualisation/index.html at main · HarjodhsGitHub/Data-Visualisation · GitHub

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
<!DOCTYPE html>
<html>
<head>

    <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=Oswald&display=swap" rel="stylesheet">
  <!-- Import Vega & Vega-Lite (does not have to be from CDN) -->
  <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.1.0"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.17.0"></script>

  <!-- Import pure.css -->
  <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css"
    integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Google font -->
  <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=Open+Sans&display=swap" rel="stylesheet">

  <!-- CSS file -->
  <link rel="stylesheet" type="text/css" href="css/styles.css" media="all">

</head>
<body>
<div class="page">
<title>Data Vis 2</title>
    <h1>Suicide Rates and their Correlation with GDP</h1>
    <h3>Data Visualisation 2 - FIT3139 - Harjodh Singh</h3>

        <!-- pure grid group -->
    <div class="pure-g">
        <div class="pure-u-1-2">
            <div class="description description-left">
            <p style="text-align:left">In modern and more open society, mental health and suicide has
                been brought under the light and talked about more, its awareness has risen greatly.</p>
        </div>
            </div>
        <div class="pure-u-1-2">
            <p style="text-align:left">This visualistaion will look Suicide rates in each country
                and its relationship to GDP and see if there is any correlation between the two.</p>
        </div>
    </div>
    <!-- end pure grid group -->


    <h2>Global Perspective</h2>
    <!-- pure grid group -->
    <div class="pure-g">
      <div class="pure-u-1-1">
          <h3>Suicide Rates Global Map</h3>
          <div id="choropleth_map2" class="vis-container"></div>
      </div>
    </div>
    <!-- end pure grid group -->


    <!-- pure grid group -->
    <div class="pure-g">
        <div class="pure-u-1-2">
            <div class="description description-left">
            <p style="text-align:left">From the choropleth above, The map represents the suicide rates of each country over the years, the data has been
          normalised for a suicide per 100,000 people. This shows the changes over the past of different
          countries.<br></br>Note : The slider can be used the filter over the years.</p>
        </div>
            </div>
        <div class="pure-u-1-2">
            <p style="text-align:left">From this scatter plot below, we can generally we can see that Africa have
                suicide rates in the lower half. Europe with a higher GDP per Capita has higher suicide
            rates. However, it should be taken into account that less economically developed countries do not collect as
          much data on areas such as suicide and mental health.<br></br> Note: The drop-down menu can be used to select
          which Continent is shown. The slider can be used as a filter for years. You can also click on the legend
            to filter the continents.</p>
        </div>
    </div>
    <!-- end pure grid group -->

    <!-- pure grid group -->
    <div class="pure-g">
      <div class="pure-u-1-1">
          <h3>Suicide Rates vs GDP Scatter Plot</h3>
          <div id="scatter_plot" class="vis-container"></div>
      </div>
    </div>
    <!-- end pure grid group -->
 <br></br>
    <h2>Continental Perspective</h2>

    <!-- pure grid group -->
    <div class="pure-g">
      <div class="pure-u-1-3">
        <div class="description description-left">
            <br></br>
            <br></br>
            <br></br>
            <br></br>
            <br></br>
            <br></br>
            <br></br>
          <p>This map is more conentrated, showing the suicide rates (per 100,000) in more detail
          of each continent<br></br>Note: The sliders can be used to filter through the years and control
          the level of zoom, the drop-down menu can be used to choose which Continent is shown.</p>
        </div>
      </div>
        <div class="pure-u-1-3">
            <h3>Suicide Rates Continental Map</h3>
        <div id="choropleth_map" class="vis-container"></div>
      </div>
        <div class="pure-u-1-3"></div>
    </div>
    <!-- end pure grid group -->
    <br></br>
    <br></br>
    <!-- pure grid group -->
    <div class="pure-g">
      <div class="pure-u-1-3">
        <div class="description-left">
            <br></br>
            <br></br>
            <br></br>
            <br></br>
            <br></br>
            <br></br>
            <br></br>
            <br></br>
          <p>For each Continent we can see both the average suicide rates (per 100,000) and
          the GDP (per Captia)<br></br>Note : The slider can be used the filter over the years.</p>
        </div>
      </div>
          <div class="pure-u-1-3">
              <h3>Average GDP and Suicide Rates</h3>
        <div id="bar_charts" class="vis-container"></div>
      </div>
        <div class="pure-u-1-3"></div>
    </div>
    <!-- end pure grid group -->
    <br></br>
    <h2>Countries Perspective</h2>

    <!-- pure grid group -->
    <div class="pure-g">

        <div class="pure-u-1-3">
            <h3>Suicide Rates vs GDP, 2000-2019</h3>
            <div id="linegraph" class="vis-container"></div>
        </div>
        <div class="pure-u-1-3"></div>
        <div class="pure-u-1-3">
            <div class="description description-right">
            <br></br>
            <br></br>
            <br></br>
            <br></br>
            <br></br>
            <br></br>
              <p>There is a country from each continent. You are able to compare and see and trends between GDP and
                  suicide rates over the years to see how they effect each other.<br></br>Note : Select a country from the drop-down to display</p>
            </div>
        </div>
    </div>
    <!-- end pure grid group -->

    <!-- pure grid group -->
    <div class="pure-g">
        <div class="pure-u-1-3">
            <div class="description description-left">
            <br></br>
            <br></br>
            <br></br>
            <br></br>
            <br></br>
              <p>This graph shows the spread of suicide rates (per 100,000) over the years in
              different countries, allowing us to compare their data.</p>
            </div>
        </div>
        <div class="pure-u-1-3">
            <h3>Spread of Suicide Rates</h3>
            <div id="boxplot" class="vis-container"></div>
        </div>

        <div class="pure-u-1-3">

        </div>
    </div>
    <!-- end pure grid group -->

    <!-- pure grid group -->
    <div class="pure-g">
        <div class="pure-u-1-3">
            <h3>Change in countries, 2000-2019</h3>
            <div id="heatmap" class="vis-container"></div>
        </div>
        <div class="pure-u-1-3">

        </div>
        <div class="pure-u-1-3">
            <br></br>
            <br></br>
            <br></br>
            <br></br>
            <br></br>
            <div class="description description-right">
              <p>We can clearly see that there is not much of a change over the years in each country
              over the years. The general rate stays the same regardless of GDP.</p>
            </div>
        </div>
    </div>
    <!-- end pure grid group -->

    <!-- pure grid group -->
    <div class="pure-g">
        <div class="pure-u-1-1">

                <h3>Spread of Suicide Rates, 2000-2019</h3>
            <div id="basic_scatterplot" class="vis-container"></div>
              <p>This highlights the specific countries, comparing them to other each other. We can see
              that the suicide rate does not differ that much between the change of GDP.</p>
            </div>
        </div>

    </div>
    <!-- end pure grid group -->

    <div class="pure-g">
      <div class="pure-u-1-1 small-font">
        <p>This visualisation is created by Harjodh Singh 31576273.</p>
      </div>
    </div>


  </div> <!-- end page -->

<script type="text/javascript">
  var spec1 = "js/scatter_plot.vg.json";
  var spec2 = "js/choropleth_map2.vg.json";
  var spec3 = "js/linegraph_dual_axis.vg.json";
  var spec4 = "js/boxplot.vg.json";
  var spec5 = "js/choropleth_map.vg.json";
  var spec6 = "js/heatmap.vg.json";
  var spec7 = "js/bar_charts.vg.json";
  var spec8 = "js/basic_scatterplot.vg.json";

  vegaEmbed('#scatter_plot', spec1, { "actions": false }).then(function(result) {
    // Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
  }).catch(console.error);

  vegaEmbed('#choropleth_map2', spec2, { "actions": false }).then(function(result) {
    // Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
  }).catch(console.error);

  vegaEmbed('#linegraph', spec3, { "actions": false }).then(function(result) {
    // Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
  }).catch(console.error);

  vegaEmbed('#boxplot', spec4, { "actions": false }).then(function(result) {
    // Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
  }).catch(console.error);

  vegaEmbed('#choropleth_map', spec5, { "actions": false }).then(function(result) {
    // Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
  }).catch(console.error);

  vegaEmbed('#heatmap', spec6, { "actions": false }).then(function(result) {
    // Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
  }).catch(console.error);

  vegaEmbed('#bar_charts', spec7, { "actions": false }).then(function(result) {
    // Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
  }).catch(console.error);

  vegaEmbed('#basic_scatterplot', spec8, { "actions": false }).then(function(result) {
    // Access the Vega view instance (https://vega.github.io/vega/docs/api/view/) as result.view
  }).catch(console.error);
</script>

</body>
</html>