Interactive-Information-Visualization/index.html at main · Benedart/Interactive-Information-Visualization · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- icon file -->
  <link rel="icon" href="resources/icon.png" type="image/x-icon">
  <title>The Impact of Education</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,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
    rel="stylesheet">

  <link rel="stylesheet" href="resources/style.css">

  <script src="resources/p5.min.js"></script>
  <script src="resources/sketch.js"></script>
</head>

<body>
  <div class="headline">
    <b>How Educational Attainment affects Employment rate and Earnings</b>
  </div>

  <div id="countrySelectDiv">
    <p class="select-prompt">Choose a country to see the chart update:</p>
    <select class="country-select" id="countrySelect">
      <!-- Options will be dynamically added here -->
    </select>
  </div>

  <div id="intro" class="section">
    <h2>Introduction</h2>
    <p>Exploring the <b>impact of educational attainment</b> among young people offers valuable insights
      into societal trends and economic dynamics. This visual storytelling project delves into <b>how educational
        choices
        influence employment rates and earnings</b>, with a focus on the 18-24 age group across OECD countries.</p>
    <p>The <b>OECD</b> (Organization for Economic Cooperation and Development) is an international organization made up
      of 38
      member countries. Its goal is to promote policies that improve economic and social well-being worldwide.</p>

    <h4 style="margin-top:8%">Who are “Young people”?</h4>
    <p>
      Young people in the age group of 18-24 years old form a significant part of the population. However, not everyone
      is in education; some already enter the workforce from a young age, while others become NEETs (Not in Education,
      Employment, or Training). Obtaining employment can be quite challenging, as this is often the first time many of
      us will seek employment.
      <br><br>
      <b>We want to understand how our level of education can impact our chances of getting
        employed and our future earnings.
      </b>
    </p>
    <img src="resources/down-arrow.png" alt="arrow" class="arrow">
  </div>

  <div id="highlightedSection" class="section">
    <h2>How many are in education?</h2>
    <p>
      About <b>54% (OECD Average)</b> of young people decide to go to study to improve their chances of getting a job
      that pays well.
      However, this has become more of a rule than an exception making the job market still quite competitive.
    </p>
    <p>
      While the majority of the youth that isn't in education is employed, the percentage of those who are not in
      education, employment or training (NEET) is still quite high.
    </p>
    <p>By <b>clicking the button below</b>, you can see the distribution of young people in education and those who are
      not in
      education, divided by employment status.</p>
    <!-- Button to toggle between circle and bar chart -->
    <button id="toggle-chart-button" onclick="updateButton()">More details</button>

    <p style="margin-top: 10%;">
      Let's now take a look of what happens afterwards. <br><b>How does education affect
        employment
        and earnings?</b>
    </p>
  </div>

  <div id="employment" class="section">
    <h2>The impact of Education on Employment/Earnings</h2>
    <i>Age group: 25-65</i>
    <p>

      When examining the data, it becomes clear that <b>individuals with university degrees have a higher employment
        rate
        than their peers who didn't pursue higher education.</b> However, this advantage in employment opportunities
      decreases
      as one pursues further education. Nonetheless, it remains an important factor to consider, especially when seeking
      employment in contexts where visa applications may be affected by educational qualifications. Additionally, it's
      evident that <b>higher education significantly influences earnings.</b>
    </p>

    <p>By using the buttons below, you can switch between the employment and earnings data.</p>
    <!-- add a button to switch the chart -->
    <button id="employmentDataButton">Employment</button>
    <button id="earningsDataButton">Earnings</button>

    <br><br>
    <i style="font-size: small;">ISCED: International Standard Classification of Education. Level 3:
      Upper secondary
      education.</i>
  </div>

  <div id="conclusion" class="section">
    <h2>Ideally, as a migrant, where should you be?</h2>
    <p>
      Youth migration is a common phenomenon across Europe, young people are often more willing to learn new languages,
      change professions etc. in order to work or study abroad, but the move isn't always worth it.
    </p>
    <p>
      Some countries can be quite favourable for migrant youths such as <b>Poland</b>, <b>Sweden</b> and <b>Iceland</b>
      provided you
      have
      a higher
      educational attainment similar to other migrants. While in the <b>Netherlands</b> and <b>Lithuania</b> employment
      is still
      better than most despite a low educational attainment.
      For others, it might be better to try to find work somewhere else.
    </p>

    <h2 style="margin-top: 80%;">Conclusions & References</h2>
    <p>Below are the sources and datasets used in our exploration of employment opportunities for young professionals.
      The datasets that focus on earnings and percentage of youth employment were sourced from the OECD webpage. We also
      looked at migrant data that we obtaind from Eurostat's datasets.</p>
    Data from 2022 was used to provide the most recent information available.
    <ul>
      <li><a href="https://stats.oecd.org/Index.aspx?datasetcode=EAG_EARNINGS#" target="_blank">OECD Dataset on
          Education vs Earnings</a></li>
      <li><a href="https://stats.oecd.org/viewhtml.aspx?datasetcode=EAG_NEAC&lang=en#" target="_blank">OECD Dataset on
          Education vs Work Status</a></li>
      <li><a
          href="https://www.oecd-ilibrary.org/education/percentage-of-18-24-year-olds-in-education-not-in-education-by-work-status-2022_ec14b2ec-en"
          target="_blank">OECD Dataset on Percentage of 18-24 Year-Olds in Education, Not in Education by Work Status
          (2022)</a>
      </li>
      <li><a href="https://ec.europa.eu/eurostat/databrowser/view/edat_lfs_9911/default/table?lang=en"
          target="_blank">Eurostat Dataset on Youth Employment for Migrants</a></li>
    </ul>

    <p>We hope that our visual storytelling project has provided you with valuable insights into the relationship
      between education and employment, and how it can affect the lives of young people.</p>
    <i>Disclaimer: We are not experts but want to help people with the information we wished
      we had.
    </i>

    <p>
      Group: Harbours of Hope<br>
      Members: <a href="https://github.com/Benedart">Arturo Benedetti</a>, <a
        href="https://github.com/MTBrangaPeicu">Mihai Branga-Peicu</a>, <a href="https://github.com/Vilaneta">Pablo
        Fondevila
      </a><br>
      Website curated by <a href="https://github.com/Benedart">Arturo Benedetti</a>
    </p>
  </div>

  <div id="p5-visualization" class="section">
    <!-- p5.js visualization goes here -->
    <section>
      <section class="content">
        <input type="range" id="yearRange" min="2015" max="2022" value="2022">
        <label for="yearRange" id="yearLabel">2022</label>
      </section>
    </section>
  </div>

  <div id="visualization-container">
    <div id="d3-visualization">
      <div id="chart">
        <!-- D3 chart will be rendered here -->
        <p id="title" style="text-align: center;">Young People in OECD</p>
      </div>
    </div>
  </div>

  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script src="visualization.js"></script>
</body>

</html>