<div id="myDiv" style="width:100%;height:250px;"><div class="showcase__section" id="bubble"><div class="spacer --small"></div><div id="bubbleplots"><div class="bubbleplot" data-num="0">                   <div class="plot" id="plotdiv"></div><div class="control-row">Regione: <select class="countrydata"></select></div></div></div></div></div>

 

      <script>Plotly.d3.csv('https://raw.githubusercontent.com/pcm-dpc/COVID-19/master/dati-regioni/dpc-covid19-ita-regioni.csv', function(err, rows){   function unpack(rows, key) {       return rows.map(function(row) { return row[key]; });   }   var allRegionNames = unpack(rows, 'denominazione_regione'),       allDay = unpack(rows, 'data'),       allRicoverati = unpack(rows, 'ricoverati_con_sintomi'),       allTi = unpack(rows, 'terapia_intensiva'),       allTo = unpack(rows, 'totale_ospedalizzati'),       allIdom = unpack(rows, 'isolamento_domiciliare'),       allAttPos = unpack(rows, 'totale_attualmente_positivi'),       allNewPos = unpack(rows, 'nuovi_attualmente_positivi'),       allDimGuariti = unpack(rows, 'dimessi_guariti'),       allMorti = unpack(rows, 'deceduti'),       allTotCasi = unpack(rows, 'totale_casi'),       allTamponi = unpack(rows, 'tamponi'),       listofRegions = [],       currentCountry,       currentGdp = [],       currentYear = [];       currTitle = 'Abruzzo';       currallRicoverati = [];       currallTi = [];       currallTo = [];       currallIdom = [];       currallAttPos = [];       currallNewPos = [];       currallDimGuariti = [];       currallMorti = [];       currallTotCasi = [];       currallTamponi = [];   for (var i = 0; i < allRegionNames.length; i++ ){       if (listofRegions.indexOf(allRegionNames[i]) === -1 ){           listofRegions.push(allRegionNames[i]);       }   }   function getRegionData(chosenCountry) {       currTitle = chosenCountry;       currentYear = [];       currallRicoverati = [];       currallTi = [];       currallTo = [];       currallIdom = [];       currallAttPos = [];       currallNewPos = [];       currallDimGuariti = [];       currallMorti = [];       currallTotCasi = [];       currallTamponi = [];       for (var i = 0 ; i < allRegionNames.length ; i++){           if ( allRegionNames[i] === chosenCountry ) {               currentYear.push(allDay[i]);               currallRicoverati.push(allRicoverati[i]);               currallTi.push(allTi[i]);               currallTo.push(allTo[i]);               currallIdom.push(allIdom[i]);               currallAttPos.push(allAttPos[i]);               currallNewPos.push(allNewPos[i]);               currallDimGuariti.push(allDimGuariti[i]);               currallMorti.push(allMorti[i]);               currallTotCasi.push(allTotCasi[i]);               currallTamponi.push(allTamponi[i]);           }       }   };   setBubblePlot('Abruzzo');   function setBubblePlot(chosenCountry) {       getRegionData(chosenCountry);       var trace1 = {           x: currentYear,           y: currallRicoverati,           name: 'Ricoverati con sintomi',           mode: 'markers',           marker: {               size: 12,               opacity: 0.5           }       };       var trace2 = {           x: currentYear,           y: currallTi,           mode: 'markers',           name: 'Terapia Intensiva',           marker: {               size: 12,               opacity: 0.5           }       };       var trace3 = {           x: currentYear,           y: currallTo,           mode: 'markers',           name: 'Totale ospedalizzati',           marker: {               size: 12,               opacity: 0.5           }       };       var trace4 = {           x: currentYear,           y: currallIdom,           mode: 'markers',           name: 'Isolamento domiciliare',           marker: {               size: 12,               opacity: 0.5           }       };       var trace5 = {           x: currentYear,           y: currallAttPos,           mode: 'markers',           name: 'Totale attualmente positivi',           marker: {               size: 12,               opacity: 0.5           }       };       var trace6 = {           x: currentYear,           y: currallNewPos,           mode: 'markers',           name: 'Nuovi attualmente positivi',           marker: {               size: 12,               opacity: 0.5           }       };       var trace7 = {           x: currentYear,           y: currallDimGuariti,           mode: 'markers',           name: 'Dimessi guariti',           marker: {               size: 12,               opacity: 0.5           }       };       var trace8 = {           x: currentYear,           y: currallMorti,           mode: 'markers',           name: 'Deceduti',           marker: {               size: 12,               opacity: 0.5           }       };       var trace9 = {           x: currentYear,           y: currallTotCasi,           mode: 'markers',           name: 'Totale casi',           marker: {               size: 12,               opacity: 0.5           }       };       var trace10 = {           x: currentYear,           y: currallTamponi,           mode: 'markers',           name: 'Tamponi',           marker: {               size: 12,               opacity: 0.5           }       };       var data = [trace1,                     trace2,                     trace3,                     trace4,                     trace5,                     trace6,                     trace7,                     trace8,                     trace9,                     trace10];       var updatemenus=[           {               buttons: [                   {                       args: [{'yaxis.type': 'linear',                               'yaxis.tickmode':'auto'}],                       label: 'Linear',                       method: 'relayout'                   },                   {                       args: [{'yaxis.type':'log',                               'yaxis.dtick':1}],                       label:'SemiLog',                       method:'relayout'                   }               ],               direction: 'left',               pad: {'r': 10, 't': 10},               showactive: true,               type: 'buttons',               x: 0.1,               xanchor: 'left',               y: 1.1,               yanchor: 'top'           }       ];       var layout = {           title: 'Andamento regionale ' + currTitle,           height: 400,           updatemenus: updatemenus,           showlegend: true,           yaxis: {               autorange: true           }       };       var options = {           scrollZoom: true,           displayModeBar: false       };       Plotly.newPlot('myDiv', data, layout,options);   };   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(listofRegions, countrySelector);   function updateCountry(){       setBubblePlot(countrySelector.value);   }   countrySelector.addEventListener('change', updateCountry, false);});</script>