Differenze tra le versioni di "Covid19"

(→‎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 id="myDiv" style="width:600px;height:250px;"></div>
+
  <div class="spacer --small"></div>
−
<script>  
+
  <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){
 
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]; });   }
+
     function unpack(rows, key) {
 +
        return rows.map(function(row) { return row[key]; });
 +
    }
  
−
    var allCountryNames = unpack(rows, 'country'),
+
var allCountryNames = unpack(rows, 'country'),
−
        allYear = unpack(rows, 'year'),
+
    allYear = unpack(rows, 'year'),
−
        allGdp = unpack(rows, 'gdpPercap'),
+
    allGdp = unpack(rows, 'gdpPercap'),
−
        listofCountries = [],
+
    listofCountries = [],
−
        currentCountry,
+
    currentCountry,
−
        currentGdp = [],
+
    currentGdp = [],
−
        currentYear = [];
+
    currentYear = [];
  
−
    for (var i = 0; i < allCountryNames.length; i++ ){
+
  for (var i = 0; i < allCountryNames.length; i++ ){
−
        if (listofCountries.indexOf(allCountryNames[i]) === -1 ){
+
    if (listofCountries.indexOf(allCountryNames[i]) === -1 ){
−
            listofCountries.push(allCountryNames[i]);
+
      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); 
  
−
     function getCountryData(chosenCountry) {
+
     var trace1 = {
−
        currentGdp = [];
+
      x: currentYear,
−
        currentYear = [];
+
      y: currentGdp,
−
        for (var i = 0 ; i < allCountryNames.length ; i++){
+
      mode: 'lines+markers',
−
            if ( allCountryNames[i] === chosenCountry ) {
+
      marker: {
−
                currentGdp.push(allGdp[i]);
+
        size: 12,
−
                currentYear.push(allYear[i]);
+
        opacity: 0.5
−
            }
+
      }
−
        }
 
 
     };
 
     };
  
−
     // Default Country Data
+
     var data = [trace1];
−
    setBubblePlot('Afghanistan');
 
  
−
     function setBubblePlot(chosenCountry) {
+
     var layout = {
−
        getCountryData(chosenCountry);
+
      title: 'GDP per cap according to Country<br>'+ chosenCountry + ' GDP'
−
 
 
−
        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"'),
+
     Plotly.newPlot('plotdiv', data, layout, {showSendToCloud: true});
−
        plotEl = innerContainer.querySelector('.plot'),
+
};
−
        countrySelector = innerContainer.querySelector('.countrydata');
+
 
 +
var innerContainer = document.querySelector('[data-num="0"'),
 +
    plotEl = innerContainer.querySelector('.plot'),
 +
    countrySelector = innerContainer.querySelector('.countrydata');
  
−
    function assignOptions(textArray, selector) {
+
function assignOptions(textArray, selector) {
−
        for (var i = 0; i < textArray.length;  i++) {
+
  for (var i = 0; i < textArray.length;  i++) {
−
            var currentOption = document.createElement('option');
+
      var currentOption = document.createElement('option');
−
            currentOption.text = textArray[i];
+
      currentOption.text = textArray[i];
−
            selector.appendChild(currentOption);
+
      selector.appendChild(currentOption);
−
        }
+
  }
−
    }
+
}
  
−
    assignOptions(listofCountries, countrySelector);
+
assignOptions(listofCountries, countrySelector);
−
 
 
−
    function updateCountry(){
 
−
        setBubblePlot(countrySelector.value);
 
−
    }
 
  
−
     countrySelector.addEventListener('change', updateCountry, false);
+
function updateCountry(){
 +
     setBubblePlot(countrySelector.value);
 +
}
 +
 
 +
countrySelector.addEventListener('change', updateCountry, false);
 
});
 
});
−
</script></body>
+
</script>
 
</absHTML>
 
</absHTML>

Revisione 17:28, 13 Mar 2020

COVID19 - Monitoraggio ed Analisi della situazione italiana

       Country:

Ricavato da "https://c3lab.poliba.it/index.php?title=Covid19&oldid=7053"

COVID19 - Monitoraggio ed Analisi della situazione italiana[edit]

       Country: