(→COVID19 - Monitoraggio ed Analisi della situazione italiana) |
(→COVID19 - Monitoraggio ed Analisi della situazione italiana) |
||
| Riga 1: | Riga 1: | ||
= COVID19 - Monitoraggio ed Analisi della situazione italiana= | = COVID19 - Monitoraggio ed Analisi della situazione italiana= | ||
<absHTML> | <absHTML> | ||
| − | < | + | <div class="showcase__section" id="bubble"> |
| − | + | <div class="spacer --small"></div> | |
| − | + | <div id="bubbleplots"> | |
| − | </ | + | <div class="bubbleplot" data-num="0"> |
| + | <div class="plot" id="plotdiv"></div> | ||
| + | <div class="control-row"> | ||
| + | Country: <select class="countrydata"> | ||
| + | </select> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <script> | ||
| + | Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv', function(err, rows){ | ||
| + | |||
| + | function unpack(rows, key) { | ||
| + | return rows.map(function(row) { return row[key]; }); | ||
| + | } | ||
| + | |||
| + | var allCountryNames = unpack(rows, 'country'), | ||
| + | allYear = unpack(rows, 'year'), | ||
| + | allGdp = unpack(rows, 'gdpPercap'), | ||
| + | listofCountries = [], | ||
| + | currentCountry, | ||
| + | currentGdp = [], | ||
| + | currentYear = []; | ||
| + | |||
| + | for (var i = 0; i < allCountryNames.length; i++ ){ | ||
| + | if (listofCountries.indexOf(allCountryNames[i]) === -1 ){ | ||
| + | listofCountries.push(allCountryNames[i]); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function getCountryData(chosenCountry) { | ||
| + | currentGdp = []; | ||
| + | currentYear = []; | ||
| + | for (var i = 0 ; i < allCountryNames.length ; i++){ | ||
| + | if ( allCountryNames[i] === chosenCountry ) { | ||
| + | currentGdp.push(allGdp[i]); | ||
| + | currentYear.push(allYear[i]); | ||
| + | } | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | // Default Country Data | ||
| + | setBubblePlot('Afghanistan'); | ||
| + | |||
| + | function setBubblePlot(chosenCountry) { | ||
| + | getCountryData(chosenCountry); | ||
| + | |||
| + | var trace1 = { | ||
| + | x: currentYear, | ||
| + | y: currentGdp, | ||
| + | mode: 'lines+markers', | ||
| + | marker: { | ||
| + | size: 12, | ||
| + | opacity: 0.5 | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var data = [trace1]; | ||
| + | |||
| + | var layout = { | ||
| + | title: 'GDP per cap according to Country<br>'+ chosenCountry + ' GDP' | ||
| + | }; | ||
| + | |||
| + | Plotly.newPlot('plotdiv', data, layout, {showSendToCloud: true}); | ||
| + | }; | ||
| + | |||
| + | var innerContainer = document.querySelector('[data-num="0"'), | ||
| + | plotEl = innerContainer.querySelector('.plot'), | ||
| + | countrySelector = innerContainer.querySelector('.countrydata'); | ||
| + | |||
| + | function assignOptions(textArray, selector) { | ||
| + | for (var i = 0; i < textArray.length; i++) { | ||
| + | var currentOption = document.createElement('option'); | ||
| + | currentOption.text = textArray[i]; | ||
| + | selector.appendChild(currentOption); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | assignOptions(listofCountries, countrySelector); | ||
| + | |||
| + | function updateCountry(){ | ||
| + | setBubblePlot(countrySelector.value); | ||
| + | } | ||
| + | |||
| + | countrySelector.addEventListener('change', updateCountry, false); | ||
| + | </script> | ||
| + | |||
</absHTML> | </absHTML> | ||
Country: