-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
204 lines (202 loc) · 10.6 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
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Imiona dzieci w Polsce</title>
<link rel="stylesheet" href=https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.2/c3.min.css>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<style>
body{
font-size: 16px;
}
.c3-line{
stroke-width: 2px;
}
.race span{
position: absolute;
bottom: 1.5em;
right: 1.5em;
font-size: 3em;
font-weight: bolder;
color: lightslategray;
mix-blend-mode: multiply;
}
</style>
</head>
<body class="container-fluid">
<main class="wrapper px-md-4 px-1 py-2">
<h1 class="text-center display-4">Imiona dzieci w Polsce</h1>
<article class="py-4">
<h2>Liczba urodzeń</h2>
<div id="births"></div>
<p>
Ogólna liczba urodzeń zmniejszyła się z 724 tys. w 1983 roku do 355 tys. w roku 2003, przy czym
był to okres, gdy w wieku najwyższego natężenia urodzeń (20–29 lat) były kobiety urodzone w latach
1970–1985, czyli podczas echa powojennego wyżu urodzeń. Od 2004 roku liczba urodzeń stopniowo
rosła (do 419 tys. w roku 2009), jednak już rok później ponownie wystąpiła tendencja spadkowa do
356 tys. w 2020 roku. Tendencję zakłócił wzrost liczby urodzeń w latach: 2014 (o blisko 6 tys. w stosunku do roku poprzedniego), 2016 (o prawie 13 tys.) i 2017 (o blisko 20 tys.).
<br/>Na znaczący spadek liczby urodzeń po 2009 roku wpływał przede wszystkim spadek liczby urodzeń pierwszego dziecka, zaś chwilowy wzrost
liczby urodzeń w roku 2014 oraz w latach 2016–2017 wynikał z większej liczby urodzeń drugiego i kolejnego dziecka.(1)
<br/>Jak wynika z rządowego dokumentu(2) współczynnik dzietności jest powiązany ze stopą bezrobocia.
W 2003 roku, gdy nastąpił spadek urodzeń stopa bezrobocia wynosiła ~20%. Natomiast podczas wzrostu urodzeń w 2017 roku
bezrobocie było najniższe od 1991 roku(3).
<br/>Wzrost urodzeń w latach 2016-2017 mógł mieć również związek ze sztandarowym programem społecznym PiS - czyli 500 plus,
który na początku obejmował tylko drugie i kolejne dziecko. W związku z tym nastąpiła krótkotrwała korekta tzw. odroczonych
decyzji o urodzeniu drugiego i trzeciego dziecka. Jednak program ten nie zwiększył dzietności - liczba kobiet
decydujących się na pierwsze dziecko ciągle spada, a 2021 rok był powojennym (negatywnym) rekordem.
</p>
</article>
<article class="py-4">
<section>
<h2>Poplarność imion</h2>
<p>
Z racji różnej liczby urodzeń w kolejnych latach popularność imion wyrażona jest w procentach wszystkich urodzeń
w danym roku z podziałem na płeć.
</p>
<h3 id="instruction">Jak używać</h3>
<p>
Zacznij wpisywać imię w polu nad wykresem i wybierz z listy, lub wpisz całe imię i kliknij <em>Enter</em>.
Możesz porównywać maksymalnie do ośmiu imon na raz.
Osobno przedstwione są różne pisownie i warianty, np. Alex, Aleks. Jeśli imię nadawane było chłopcom i dziewczynkom w nawiasie podana jest płeć, np Alex (K), Alex (M).
</p>
<br/>
<div class="btn-group w-100" role="group">
<select id="selectNames" class="chosen-select w-100" data-placeholder="Wpisz imię..." multiple="multiple" tabindex="-1">
</select>
</div>
<br/>
<div id="names"></div>
</section>
<section class="py-3">
<h3>Ranking najpopularniejszych imion wg kolejnych lat</h3>
<p>10 nalpopularniejszych imion na przestrzeni lat z podziałem na płeć</p>
<h4>Imiona dla chłopców</h4>
<p>
Przez lata najpopularniejszym imieniem dla chłopców był Jakub z ogromną przewagą nad kolejnymi pozycjami.
W 2016 roku pierwsze miejsce zgarnął Antoni i utrzymuje je już szósty rok, a różnice pomiędzy kolejnymi pozycjami zaczęły się zmniejszać.
</p>
<div id="raceM" class="race position-relative"></div>
<button id="raceMstart" class="btn btn-success">Start</button>
<button id="raceMstop" class="btn btn-danger">Stop</button>
</section>
<section class="py-3">
<h4>Imiona dla dziewczynek</h4>
<p>
W roku 2000 najpopularniejszym imieniem dla dziewczynek była Natalia,
jednak już rok później na pierwsze miejsce wysunęła się Julia i nie oddała prowadzenia przez 12 lat.
W 2013 najpopularniejszym imieniem została Lena, ale już w 2015 pierwsze miejsce zgarnęła Zuzanna
i prowadzi do dziś, z wyjątkiem 2017 roku - w którym to do chwały wróciła Julia.
</p>
<div id="raceW" class="race position-relative"></div>
<button id="raceWstart" class="btn btn-success">Start</button>
<button id="raceWstop" class="btn btn-danger">Stop</button>
</section>
</article>
<article class="py-4">
<h2>O danych</h2>
<p>
Dane dotyczą imion nadawanych w Polsce w latach 2000 - 2020.
Pochodzą ze strony <a href="https://dane.gov.pl/dataset">https://dane.gov.pl</a>. Do roku 2012 imiona z liczbą wystąpień poniżej 5 nie były umieszczane na liście, od 2013 r. granicą tą jest liczba 2.
<br/>W zestawieniu można zaobserwować wpływ popkultury na nadawane imiona, np. pik dla imienia Klaudiusz w 2001 roku, po emisji pierwszej edycji Big Brothera, w której dużą popularnością cieszył się Klaudiusz Sevković.
<br/>Największą popularność wśród imion dla chłopców zdobył Jakub, którym w latach 2000 - 2020 nazwano aż 273618 dzieci, co stanowi 6,38% wszystkich chłopców.
Z kolei wśród imion dla dziewczynek najczęściej wybierano Julię - 254148 razy, czyli nazwano tak 6,19% wszystkich dziewczynek urodzonych w ostatnich dwudziestu latach.
</p>
<!-- <a href="#instruction">Przejdź do wykresu popularnośći</a> -->
</article>
</main>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.2/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./births.js"></script>
<script src="./race.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<script>
var chart,data;
const years = []; for(let i=2000; i<=2021; i++) years.push(i)
const yearsColumn = ['x']; for(let y of years) yearsColumn.push(y)
function addOption(name){
const opt = `<option id="${name}" value="${name}" >${name}</option>`;
document.getElementById('selectNames').insertAdjacentHTML('beforeend',opt);
}
function getNameData(name){
const result = [name];
let choice= data.filter(a=>a.name===name)
if(choice.length === 1){
choice=choice[0]
for(year of years){
result.push(choice[year])
}
}
return result
}
function addName(name){chart.load({columns:[yearsColumn, getNameData(name)]})}
function delName(name){chart.unload({ids: name})}
d3.csv('https://gist.githubusercontent.com/codestance/0ae1d47de69530a8c38d50dd785a4a6c/raw/256683201d597826d39fb1cd0f0b900fd69d818a/names-given-in-poland-till-2021.csv').then(function(dat){
data=dat;
dat.map(d=>addOption(d.name))
chart=c3.generate({
bindto: '#names',
data: {
x: 'x',
columns:[],
empty: {
label: {
text: 'Brak danych. Wybierz imię z listy'
}
},
type: 'line',
order: null
},
axis: {
y: {
min: 0,
padding: {
left: 0,
right: 0
},
label: {
text: '% urodzeń',
position: 'outer-middle'
}
}
},
point: {
show: true
}
});
}).then(function(){
$(".chosen-select").select2({
maximumSelectionLength: 8
});
}).catch(function(error){
alert('Wystąpił błąd', error)
})
$(document).ready(function(){
$(".chosen-select").on("select2:select", function(e){
let el = e.params.data.text;
addName(el)
})
$(".chosen-select").on("select2:unselect", function(e){
delName(e.params.data.text)
})
})
</script>
<script type="module">
// import {default as births} from 'births.js'
// import {default as race} from 'race.js'
births('births')
race('raceM', 2021)
race('raceW', 2021)
</script>
</body>
<footer class="py-4">
<ol>
<li><a href="https://www.batory.org.pl/wp-content/uploads/2021/09/I.E.Kotowska_Zmiany.demograficzne.w.Polsce.pdf"><cite>Zmiany demograficzne w Polsce</cite> I.E. Kotowska</a></li>
<li><a href="https://legislacja.rcl.gov.pl/docs//2/12279566/12326824/12326825/dokument206588.pdf">Rządowe uzasadnienie programu 500 plus</a></li>
<li><a href="https://stat.gov.pl/obszary-tematyczne/rynek-pracy/bezrobocie-rejestrowane/stopa-bezrobocia-rejestrowanego-w-latach-1990-2021,4,1.html">Stopa bezrobocia w latach 1990 - 2021</a></li>
</ol>
</footer>
</html>