|
|
| Riga 1: |
Riga 1: |
| | = COVID19 - Monitoraggio ed Analisi della situazione italiana= | | = COVID19 - Monitoraggio ed Analisi della situazione italiana= |
| − | <absHTML> | + | <avHTML> |
| − | <div class="showcase__section" id="bubble"> | + | <h1> test</h1> |
| − | <div class="spacer --small"></div>
| + | </avHTML> |
| − | <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> | |
