(→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= | ||
| − | < | + | <html> |
| − | <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( | + | <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]); | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | |||
| + | // Default Region Data | ||
| + | setBubblePlot("Abruzzo"); | ||
| + | |||
| + | function setBubblePlot(chosenCountry) { | ||
| + | getRegionData(chosenCountry); | ||
| + | |||
| + | var trace1 = { | ||
| + | //visible: 'legendonly', | ||
| + | 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 annotations = [ | ||
| + | { | ||
| + | text: "Plot type:", | ||
| + | x: 0, | ||
| + | y: 1.085, | ||
| + | yref: "paper", | ||
| + | align: "left", | ||
| + | showarrow: false | ||
| + | } | ||
| + | ]; | ||
| + | |||
| + | var layout = { | ||
| + | title: "Andamento regionale " + currTitle, | ||
| + | height: 400, | ||
| + | //width: 800, | ||
| + | updatemenus: updatemenus, | ||
| + | //annotations: annotations, | ||
| + | showlegend: true, | ||
| + | //legend: {"orientation": "h"}, | ||
| + | yaxis: { | ||
| + | autorange: true | ||
| + | |||
| + | //type: 'log', | ||
| + | //fixedrange: true, | ||
| + | //range: [0,3.70] | ||
| + | //range: [0,5000] | ||
| + | } | ||
| + | }; | ||
| + | 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> | ||
| + | </html> | ||