diff --git a/race.js b/race.js new file mode 100644 index 0000000..96d854c --- /dev/null +++ b/race.js @@ -0,0 +1,63 @@ +export default function(dataName, lastYear){ + d3.json(dataName+'.json').then(function(dat){ + let raceChart = c3.generate({ + bindto: '#'+dataName, + data: { + json: dat[2000], + keys: { + x: 'name', + value: ["value"] + }, + type: 'bar' + }, + axis: { + rotated: true, + x: { + type: 'category' + } + }, + legend: { + show: false + } + }) + const raceChartDiv = document.getElementById(dataName) + const span = document.createElement('span') + raceChartDiv.appendChild(span) + let traceYear = 2000 + span.innerText = traceYear + let animation + function changeYear(){ + if(!animation){ + animation = setInterval(() => { + if( traceYear > lastYear){ + traceYear = 2000 + } + raceChart.load({ + json: dat[traceYear], + keys: { + x: 'name', + value: ["value"] + }, + }) + span.innerText=traceYear + traceYear++ + },5000) + } + } + function stopChangingYear(){ + clearInterval(animation) + animation = null + } + const io = new IntersectionObserver((entry, observer) => { + entry = entry[0] + if (entry.intersectionRatio > 0) { + changeYear() + } else { + stopChangingYear() + } + }) + io.observe(raceChartDiv) + document.getElementById(dataName + "start").addEventListener("click", changeYear) + document.getElementById(dataName + "stop").addEventListener("click", stopChangingYear) + }) +} \ No newline at end of file