Skip to content

Commit 13af3ff

Browse files
codestancecodestance
committed
add race description & module
1 parent 442209e commit 13af3ff

File tree

1 file changed

+36
-164
lines changed

1 file changed

+36
-164
lines changed

‎index.html

Lines changed: 36 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,12 @@
2323
font-weight: bolder;
2424
color: lightslategray;
2525
}
26+
2627
</style>
2728
</head>
2829
<body class="container-fluid">
2930
<h1 class="text-center display-4">Imiona dzieci w Polsce</h1>
30-
<div class="wrapper px-md-4 px-1 py-2">
31+
<main class="wrapper px-md-4 px-1 py-2">
3132
<br/>
3233
<h2>O danych</h2>
3334
<p>
@@ -79,29 +80,41 @@ <h3 id="instruction">Jak używać</h3>
7980
<br/>
8081
<div id="names"></div>
8182
<!-- <div id="namesNew"></div> -->
82-
<br/>
83-
<h3>Ranking najpopularniejszych imion wg kolejnych lat</h3>
84-
<p>10 nalpopularniejszych imion na przestrzeni lat z podziałem na płeć</p>
85-
<h4>Imiona dla chłopców</h4>
86-
<p>Przez lata najpopularniejszym imieniem dla chłopców był Jakub z ogromną przewagą nad kolejnymi pozycjami.
87-
W 2016 roku pierwsze miejsce zgarnął Antoni, a różnice pomiędzy kolejnymi pozycjami zaczęły się zmniejszać.
88-
W 2020 Antoni wciąż utrzymuje się na prowadzeniu, a Jakub pierwszy raz spadł z podium popularności.
89-
</p>
90-
<div id="raceM" class="race position-relative"></div>
91-
<button id="raceMstart">Start</button>
92-
<button id="raceMstop">Stop</button>
93-
<h4>Imiona dla dziewczynek</h4>
94-
<div id="raceW" class="race position-relative"></div>
95-
96-
</div>
83+
<section class="py-4">
84+
<h3>Ranking najpopularniejszych imion wg kolejnych lat</h3>
85+
<p>10 nalpopularniejszych imion na przestrzeni lat z podziałem na płeć</p>
86+
<h4>Imiona dla chłopców</h4>
87+
<p>
88+
Przez lata najpopularniejszym imieniem dla chłopców był Jakub z ogromną przewagą nad kolejnymi pozycjami.
89+
W 2016 roku pierwsze miejsce zgarnął Antoni, a różnice pomiędzy kolejnymi pozycjami zaczęły się zmniejszać.
90+
W 2020 Antoni wciąż utrzymuje się na prowadzeniu, a Jakub pierwszy raz spadł z podium popularności.
91+
</p>
92+
<div id="raceM" class="race position-relative"></div>
93+
<button id="raceMstart" class="btn btn-success">Start</button>
94+
<button id="raceMstop" class="btn btn-danger">Stop</button>
95+
</section>
96+
<section class="py-4">
97+
<h4>Imiona dla dziewczynek</h4>
98+
<p>
99+
W roku 2000 najpopularniejszym imieniem dla dziewczynek była Natalia,
100+
jednak już rok później na pierwsze miejsce wysunęła się Julia i nie oddała prowadzenia przez 12 lat.
101+
W 2013 najpopularniejszym imieniem została Lena, ale już w 2015 pierwsze miejsce zgarnęła Zuzanna
102+
i prowadzi do dziś, z wyjątkiem 2017 roku, w którym to do chwały wróciła Julia.
103+
104+
</p>
105+
<div id="raceW" class="race position-relative"></div>
106+
<button id="raceWstart" class="btn btn-success">Start</button>
107+
<button id="raceWstop" class="btn btn-danger">Stop</button>
108+
</section>
109+
</main>
97110
<script src="https://d3js.org/d3.v5.min.js"></script>
98111
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.2/c3.min.js"></script>
99112
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
100113
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
101114
<script>
102115
var chart,data;
103-
const years = []; for(i=2000;i<=2020;i++) years.push(i)
104-
const yearsColumn = ['x']; for(y of years) yearsColumn.push(y)
116+
const years = []; for(let i=2000;i<=2020;i++) years.push(i)
117+
const yearsColumn = ['x']; for(let y of years) yearsColumn.push(y)
105118
function addOption(name){
106119
const opt = `<option id="${name}" value="${name}" >${name}</option>`;
107120
document.getElementById('selectNames').insertAdjacentHTML('beforeend',opt);
@@ -221,152 +234,11 @@ <h4>Imiona dla dziewczynek</h4>
221234
}
222235
}
223236
})
224-
225-
d3.csv('https://raw.githubusercontent.com/codestance/babyNames/dev/raceW.csv').then(function(dat){
226-
227-
function filterData(year){
228-
let filtered = dat.filter(obj => +obj[year]!==0)
229-
filtered.sort((a, b) => b[year] - a[year]);
230-
return filtered
231-
}
232-
233-
function namesInYear(year){
234-
let names = filterData(year).map(entry => entry['name'])
235-
names.unshift('x')
236-
return names
237-
}
238-
239-
function valuesInYear(year){
240-
let datValues = filterData(year).map(d => +d[year])
241-
datValues.unshift('value')
242-
return datValues
243-
}
244-
245-
let raceChart = c3.generate({
246-
bindto: '#raceW',
247-
data: {
248-
x: 'x',
249-
xFormat: '%Y',
250-
columns: [
251-
namesInYear(2000),
252-
valuesInYear(2000)
253-
],
254-
names: {
255-
value: 'liczba'
256-
},
257-
type: 'bar'
258-
},
259-
order: 'desc',
260-
axis: {
261-
rotated: true,
262-
x: {
263-
type: 'category',
264-
}
265-
},
266-
legend: {
267-
show: false
268-
}
269-
});
270-
const raceChartDiv = document.getElementById('raceW')
271-
const span = document.createElement('span')
272-
raceChartDiv.appendChild(span)
273-
let index = 0
274-
span.innerText=years[index]
275-
const io = new IntersectionObserver((entry, observer) => {
276-
entry = entry[0]
277-
let animation
278-
if (entry.intersectionRatio > 0) {
279-
animation =
280-
setInterval(() => {
281-
if( index == years.length){
282-
index = 0
283-
}
284-
raceChart.load({
285-
columns: [
286-
namesInYear(years[index]),
287-
valuesInYear(years[index])
288-
]
289-
})
290-
span.innerText=years[index]
291-
index++
292-
},5000)
293-
} else {
294-
clearInterval(animation)
295-
}
296-
})
297-
io.observe(raceChartDiv)
298-
299-
})
300-
301-
d3.json('raceM.json').then(function(dat){
302-
let raceChartM = c3.generate({
303-
bindto: '#raceM',
304-
data: {
305-
json: dat[2000],
306-
keys: {
307-
x: 'name',
308-
value: ["value"]
309-
},
310-
type: 'bar'
311-
},
312-
axis: {
313-
rotated: true,
314-
x: {
315-
type: 'category'
316-
}
317-
},
318-
legend: {
319-
show: false
320-
}
321-
})
322-
const raceChartDivM = document.getElementById('raceM')
323-
const span = document.createElement('span')
324-
raceChartDivM.appendChild(span)
325-
let index = 0
326-
span.innerText=years[index]
327-
328-
let traceYear = 2000
329-
const lastYear = 2020
330-
let animation
331-
function changeYear(){
332-
if(!animation){
333-
animation = setInterval(() => {
334-
if( traceYear > lastYear){
335-
traceYear = 2000
336-
}
337-
raceChartM.load({
338-
json: dat[traceYear],
339-
keys: {
340-
x: 'name',
341-
value: ["value"]
342-
},
343-
})
344-
span.innerText=traceYear
345-
traceYear++
346-
},5000)
347-
}
348-
}
349-
function stopChangingYear(){
350-
clearInterval(animation)
351-
animation = null
352-
}
353-
354-
const io = new IntersectionObserver((entry, observer) => {
355-
entry = entry[0]
356-
if (entry.intersectionRatio > 0) {
357-
changeYear()
358-
} else {
359-
stopChangingYear()
360-
}
361-
})
362-
io.observe(raceChartDivM)
363-
364-
document.getElementById("raceMstart").addEventListener("click", changeYear)
365-
document.getElementById("raceMstop").addEventListener("click", stopChangingYear)
366-
})
367-
368-
369-
237+
</script>
238+
<script type="module">
239+
import {default as race} from '/race.js'
240+
race('raceM', 2020)
241+
race('raceW', 2020)
370242
</script>
371243
</body>
372244
<footer class="py-2">

0 commit comments

Comments
 (0)