(→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> |