(→COVID19 - Monitoraggio ed Analisi della situazione italiana) |
(→COVID19 - Monitoraggio ed Analisi della situazione italiana) |
||
| Riga 4: | Riga 4: | ||
<div id="myDiv" style="width:600px;height:250px;"></div> | <div id="myDiv" style="width:600px;height:250px;"></div> | ||
<script> | <script> | ||
| − | var | + | Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv', function(err, rows){ |
| − | var data = [ | + | |
| − | var layout = {title: ' | + | function unpack(rows, key) { |
| − | + | return rows.map(function(row) { return row[key]; }); | |
| − | Plotly.newPlot('myDiv', data,layout, | + | } |
| + | |||
| + | 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:'Line and Scatter Plot', | ||
| + | height: 400, | ||
| + | width: 480 | ||
| + | }; | ||
| + | |||
| + | Plotly.newPlot('myDiv', data, layout); | ||
| + | }; | ||
| + | |||
| + | 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></body> | </script></body> | ||
</absHTML> | </absHTML> | ||