(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 trace = {x: [1, 2, 3, 4, 5, 6, 7, 8], y: [1, 4, 9, 16, 25, 36, 49, 64],        mode: 'scatter'   };
+
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv', function(err, rows){
var data = [ trace ];  
+
 
var layout = {title: 'Scroll and Zoom', showlegend: false};
+
    function unpack(rows, key) {
var options = {scrollZoom: true, displayModeBar: false};
+
        return rows.map(function(row) { return row[key]; });
Plotly.newPlot('myDiv', data,layout,options);
+
    }
 +
 
 +
    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>

Revisione 17:25, 13 Mar 2020

COVID19 - Monitoraggio ed Analisi della situazione italiana


COVID19 - Monitoraggio ed Analisi della situazione italiana[edit]