(→COVID19 - Monitoraggio ed Analisi della situazione italiana) |
|||
| (135 versioni intermedie di 2 utenti non mostrate) | |||
| Riga 1: | Riga 1: | ||
| − | + | <html> | |
| − | < | + | <head> |
| − | + | <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> | |
| − | + | ||
| − | + | </head> | |
| − | + | <body> | |
| + | <h1> COVID19 - Monitoraggio ed Analisi della situazione italiana</h1> | ||
| + | <h2> Andamento nazionale </h1> | ||
| − | + | <div align="center" id="myDiv2" ></div> | |
| + | <h2> Andamenti regionali </h2> | ||
| − | + | <div> | |
| − | + | <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> | ||
| + | <div id="myDiv" height:500px;"></div> | ||
| + | <div style="height:150px;"></div> | ||
| + | |||
| + | <h2> Andamenti Provinciali </h2> | ||
| + | <div class="showcase__section" id="bubble"> | ||
| + | <div class="spacer --small"></div> | ||
| + | <div id="bubbleplots"> | ||
| + | <div class="bubbleplot" data-num="1"> | ||
| + | <div class="plot" id="plotdiv"></div> | ||
| + | <div class="control-row"> | ||
| + | Provincia: <select class="provdata"> | ||
| + | </select> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div id="myDiv3" style="height:500px;"></div> | ||
| + | |||
| + | <div style="height:150px;"></div> | ||
| + | <h2> Disclaimer </h2> | ||
| + | Dati forniti dal Ministero della Salute, elaborazione e gestione dati a cura del Dipartimento della Protezione Civile: https://github.com/pcm-dpc/COVID-19 | ||
| − | + | Rielaborazione a cura del Control of Dynamic System Lab, Politecnico di Bari | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | <script> | |
| − | + | //REGIONI | |
| − | + | 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_positivi'), | |
| − | + | allNewPos = unpack(rows, 'nuovi_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 = []; | |
| − | + | ||
| − | + | currallMortiTi = []; | |
| − | + | currallMortiOsp = []; | |
| − | + | currNewMorti = []; | |
| − | + | //allDay = allDay.split(' ')[0]; | |
| − | + | ||
| − | + | 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 = []; | ||
| + | |||
| + | currallMortiTi = []; | ||
| + | currallMortiOsp = []; | ||
| + | currNewMorti = []; | ||
| + | |||
| + | for (var i = 0 ; i < allRegionNames.length ; i++){ | ||
| + | if ( allRegionNames[i] === chosenCountry ) { | ||
| + | currentYear.push(allDay[i].split(' ')[0]); | ||
| + | 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]); | ||
| + | |||
| + | currallMortiTi.push(parseInt(allTi[i])+parseInt(allMorti[i])); | ||
| + | currallMortiOsp.push(parseInt(allTo[i])+parseInt(allMorti[i])); | ||
| + | currNewMorti = get_diff(currallMorti); | ||
| + | } | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | // 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: 6, | ||
| + | opacity: 1 | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace2 = { | ||
| + | visible: 'legendonly', | ||
| + | x: currentYear, | ||
| + | y: currallTi, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Terapia Intensiva', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1 | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace3 = { | ||
| + | x: currentYear, | ||
| + | y: currallTo, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Totale ospedalizzati', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'triangle-down' | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace4 = { | ||
| + | x: currentYear, | ||
| + | y: currallIdom, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Isolamento domiciliare', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'triangle-left' | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace5 = { | ||
| + | visible: 'legendonly', | ||
| + | x: currentYear, | ||
| + | y: currallAttPos, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Totale attualmente positivi', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'triangle-right' | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace6 = { | ||
| + | visible: 'legendonly', | ||
| + | x: currentYear, | ||
| + | y: currallNewPos, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Nuovi attualmente positivi', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'pentagon' | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace7 = { | ||
| + | visible: 'legendonly', | ||
| + | x: currentYear, | ||
| + | y: currallDimGuariti, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Dimessi guariti', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'triangle-up' | ||
| + | |||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace8 = { | ||
| + | x: currentYear, | ||
| + | y: currallMorti, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Deceduti', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'star' | ||
| + | |||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace9 = { | ||
| + | x: currentYear, | ||
| + | y: currallTotCasi, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Totale casi', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'diamond' | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace10 = { | ||
| + | visible: 'legendonly', | ||
| + | x: currentYear, | ||
| + | y: currallTamponi, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Tamponi', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'square' | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace11 = { | ||
| + | visible: 'legendonly', | ||
| + | x: currentYear, | ||
| + | y: currallMortiTi, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Deceduti+Terapia Intensiva', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'cross' | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace12 = { | ||
| + | visible: 'legendonly', | ||
| + | x: currentYear, | ||
| + | y: currallMortiOsp, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Deceduti+Terapia Intensiva+Ricoverati', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'x' | ||
| + | |||
| + | } | ||
| + | }; | ||
| + | var d = new Date(); | ||
| + | if (d.getHours()<18){ | ||
| + | d.setDate(d.getDate()-1); | ||
| + | var when = d; | ||
| + | }else{ | ||
| + | var when = d; | ||
| + | } | ||
| + | [dx, dy,lname, when] = get_logistic(chosenCountry,when); | ||
| + | |||
| + | var trace13 = { | ||
| + | x: dx, | ||
| + | y: dy, | ||
| + | mode: 'line', | ||
| + | name: lname, | ||
| + | line: { | ||
| + | color: 'rgba(255,0,0,0.5)', | ||
| + | width: 4 | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | |||
| + | [dxa, dya,lnamea,when] = get_logistic(chosenCountry,when); | ||
| + | var trace14 = { | ||
| + | x: dxa, | ||
| + | y: dya, | ||
| + | mode: 'line', | ||
| + | name: lnamea, | ||
| + | line: { | ||
| + | color: 'rgba(255,120,120,0.5)', | ||
| + | width: 2 | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | [dxa, dya,lnamea,when] = get_logistic(chosenCountry,when); | ||
| + | var trace15 = { | ||
| + | x: dxa, | ||
| + | y: dya, | ||
| + | mode: 'line', | ||
| + | name: lnamea, | ||
| + | line: { | ||
| + | color: 'rgba(255,180,180,0.5)', | ||
| + | width: 2 | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | [dxa, dya,lnamea,when] = get_logistic(chosenCountry,when); | ||
| + | var trace16 = { | ||
| + | x: dxa, | ||
| + | y: dya, | ||
| + | mode: 'line', | ||
| + | name: lnamea, | ||
| + | line: { | ||
| + | color: 'rgba(255,210,210,0.5)', | ||
| + | width: 2 | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace17 = { | ||
| + | x: currentYear, | ||
| + | y: currNewMorti, | ||
| + | mode: 'markers', | ||
| + | name: 'Incremento morti', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'cross' | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var data = [trace8, | ||
| + | trace7, | ||
| + | trace11, | ||
| + | trace12, | ||
| + | trace9, | ||
| + | trace1, | ||
| + | trace2, | ||
| + | trace3, | ||
| + | trace4, | ||
| + | trace5, | ||
| + | trace6, | ||
| + | trace10, | ||
| + | trace13, trace14, trace15, trace16,trace17]; | ||
| + | |||
| + | var updatemenus=[ | ||
| + | { | ||
| + | buttons: [ | ||
| + | { | ||
| + | args: [{'yaxis.type': 'linear', | ||
| + | 'yaxis.tickmode':'auto'}], | ||
| + | label: 'Linear', | ||
| + | method: 'relayout' | ||
| + | }, | ||
| + | { | ||
| + | args: [{'yaxis.type':'log'}], | ||
| + | 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: 600, | ||
| + | plot_bgcolor: "#000", | ||
| + | //width: 800, | ||
| + | margin: { l: 40, r: 0}, | ||
| + | updatemenus: updatemenus, | ||
| + | showlegend: true, | ||
| + | legend: { orientation: "h" , | ||
| + | x: 0, | ||
| + | y: -0.5}, | ||
| + | xaxis: { | ||
| + | tickmode: "linear", // If "linear", the placement of the ticks is determined by a starting position `tick0` and a tick step `dtick` | ||
| + | tick0: '2020-02-24', | ||
| + | gridcolor: '#555', | ||
| + | dtick: 7 * 24 * 60 * 60 * 1000 | ||
| + | }, | ||
| + | yaxis: { | ||
| + | autorange: true, | ||
| + | gridcolor: '#555', | ||
| + | //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); | ||
| + | } | ||
| + | } | ||
| + | function getRandomColor(){ | ||
| + | var r = 0; | ||
| + | var g = 0; | ||
| + | var b = 0; | ||
| + | r = getRandomInt(0, 255); | ||
| + | g = getRandomInt(0, 255); | ||
| + | b = getRandomInt(0, 255); | ||
| + | return [r,g,b]; | ||
| + | } | ||
| + | |||
| + | function getRandomInt(min, max) { | ||
| + | min = Math.ceil(min); | ||
| + | max = Math.floor(max); | ||
| + | return Math.floor(Math.random() * (max - min)) + min; //Il max è escluso e il min è incluso | ||
| + | } | ||
| + | |||
| + | function rapporto(a,b){ | ||
| + | var v = []; | ||
| + | for (var i=0;i<a.length;i++){ | ||
| + | v.push(a[i]/b[i] * 100); | ||
| + | } | ||
| + | |||
| + | return v; | ||
| + | } | ||
| + | function get_diff(vect){ | ||
| + | var vdiff = []; | ||
| + | vdiff.push(0); | ||
| + | for (var i=1;i<vect.length;i++){ | ||
| + | vdiff.push(vect[i]-vect[i-1]); | ||
| + | } | ||
| + | |||
| + | return vdiff; | ||
| + | } | ||
| + | function formatDate(date) { | ||
| + | var d = new Date(date), | ||
| + | month = '' + (d.getMonth() + 1), | ||
| + | day = '' + d.getDate(), | ||
| + | year = d.getFullYear(); | ||
| + | |||
| + | if (month.length < 2) | ||
| + | month = '0' + month; | ||
| + | if (day.length < 2) | ||
| + | day = '0' + day; | ||
| + | |||
| + | return [year, month, day].join('-'); | ||
| + | }; | ||
| + | |||
| + | function formatDate2(date) { | ||
| + | var d = new Date(date), | ||
| + | month = '' + (d.getMonth() + 1), | ||
| + | day = '' + d.getDate() | ||
| + | |||
| + | if (month.length < 2) | ||
| + | month = '0' + month; | ||
| + | if (day.length < 2) | ||
| + | day = '0' + day; | ||
| + | |||
| + | return [day, month].join('.'); | ||
| + | }; | ||
| + | |||
| + | function get_logistic(chosenCountry,when){ | ||
| + | d = formatDate(when); | ||
| + | d2 = formatDate2(when); | ||
| + | var nome = d2+' - Fitting'; | ||
| + | var x = []; | ||
| + | var y = []; | ||
| + | var url = "https://raw.githubusercontent.com/vtandrea/labtest/master/"+d+chosenCountry+".csv"; | ||
| + | when.setDate(when.getDate() - 1); | ||
| + | var request = new XMLHttpRequest(); | ||
| + | request.open("GET", url, false); | ||
| + | request.send(null); | ||
| + | |||
| + | var csvData = new Array(); | ||
| + | var jsonObject = request.responseText.split(/\r?\n|\r/); | ||
| + | for (var i = 0; i < jsonObject.length; i++) { | ||
| + | csvData.push(jsonObject[i].split(',')); | ||
| + | } | ||
| + | for (var i=1;i<csvData.length;i++){ | ||
| + | x.push(csvData[i][0]); | ||
| + | y.push(csvData[i][1]); | ||
| + | |||
| + | } | ||
| + | //if(1){ | ||
| + | if (y[40] == y[41]){ | ||
| + | var x = []; | ||
| + | var y = []; | ||
| + | var nome = 'Empty'; | ||
| + | } | ||
| + | //console.log(csvData[0][1]); | ||
| + | return [x,y, nome,when]; | ||
| + | } | ||
| + | |||
| + | assignOptions(listofRegions, countrySelector); | ||
| + | |||
| + | function updateCountry(){ | ||
| + | setBubblePlot(countrySelector.value); | ||
| + | } | ||
| + | |||
| + | countrySelector.addEventListener('change', updateCountry, false); | ||
| + | }); | ||
| + | </script> | ||
| + | |||
| + | |||
| + | |||
| + | <script> | ||
| + | function get_diff(vect){ | ||
| + | var vdiff = []; | ||
| + | vdiff.push(0); | ||
| + | for (var i=1;i<vect.length;i++){ | ||
| + | vdiff.push(vect[i]-vect[i-1]); | ||
| + | } | ||
| + | |||
| + | return vdiff; | ||
| + | } | ||
| + | // ITA | ||
| + | Plotly.d3.csv('https://raw.githubusercontent.com/pcm-dpc/COVID-19/master/dati-andamento-nazionale/dpc-covid19-ita-andamento-nazionale.csv', function(err, rows){ | ||
| + | |||
| + | function unpack(rows, key) { | ||
| + | return rows.map(function(row) { return row[key]; }); | ||
| + | } | ||
| + | |||
| + | var allRegionNames = unpack(rows, 'stato'), | ||
| + | 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_positivi'), | ||
| + | allNewPos = unpack(rows, 'nuovi_positivi'), | ||
| + | allDimGuariti = unpack(rows, 'dimessi_guariti'), | ||
| + | allMorti = unpack(rows, 'deceduti'), | ||
| + | allTotCasi = unpack(rows, 'totale_casi'), | ||
| + | allTamponi = unpack(rows, 'tamponi'), | ||
| + | |||
| + | listofRegions = [], | ||
| + | currentCountry, | ||
| + | currentGdp = [], | ||
| + | currentYear = []; | ||
| + | currTitle = 'ITA'; | ||
| + | currallRicoverati = []; | ||
| + | currallTi = []; | ||
| + | currallTo = []; | ||
| + | currallIdom = []; | ||
| + | currallAttPos = []; | ||
| + | currallNewPos = []; | ||
| + | currallDimGuariti = []; | ||
| + | currallMorti = []; | ||
| + | currallTotCasi = []; | ||
| + | currallTamponi = []; | ||
| + | |||
| + | currallMortiTi = []; | ||
| + | currallMortiOsp = []; | ||
| + | currNewMorti = []; | ||
| + | //allDay = allDay.split(' ')[0]; | ||
| + | |||
| + | 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 = []; | ||
| + | |||
| + | currallMortiTi = []; | ||
| + | currallMortiOsp = []; | ||
| + | currNewMorti = []; | ||
| + | |||
| + | for (var i = 0 ; i < allRegionNames.length ; i++){ | ||
| + | if ( allRegionNames[i] === chosenCountry ) { | ||
| + | currentYear.push(allDay[i].split(' ')[0]); | ||
| + | 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]); | ||
| + | |||
| + | currallMortiTi.push(parseInt(allTi[i])+parseInt(allMorti[i])); | ||
| + | currallMortiOsp.push(parseInt(allTo[i])+parseInt(allMorti[i])); | ||
| + | currNewMorti = get_diff(currallMorti); | ||
| + | } | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | // Default Region Data | ||
| + | setBubblePlot('ITA'); | ||
| + | |||
| + | function setBubblePlot(chosenCountry) { | ||
| + | getRegionData(chosenCountry); | ||
| + | |||
| + | var trace1 = { | ||
| + | visible: 'legendonly', | ||
| + | x: currentYear, | ||
| + | y: currallRicoverati, | ||
| + | |||
| + | name: 'Ricoverati con sintomi', | ||
| + | mode: 'markers', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1 | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace2 = { | ||
| + | visible: 'legendonly', | ||
| + | x: currentYear, | ||
| + | y: currallTi, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Terapia Intensiva', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1 | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace3 = { | ||
| + | x: currentYear, | ||
| + | y: currallTo, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Totale ospedalizzati', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'triangle-down' | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace4 = { | ||
| + | x: currentYear, | ||
| + | y: currallIdom, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Isolamento domiciliare', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'triangle-left' | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace5 = { | ||
| + | x: currentYear, | ||
| + | y: currallAttPos, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Totale positivi', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'triangle-right' | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace6 = { | ||
| + | visible: 'legendonly', | ||
| + | x: currentYear, | ||
| + | y: currallNewPos, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Nuovi positivi', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'pentagon' | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace7 = { | ||
| + | visible: 'legendonly', | ||
| + | x: currentYear, | ||
| + | y: currallDimGuariti, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Dimessi guariti', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'triangle-up' | ||
| + | |||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace8 = { | ||
| + | x: currentYear, | ||
| + | y: currallMorti, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Deceduti', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'star' | ||
| + | |||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace9 = { | ||
| + | x: currentYear, | ||
| + | y: currallTotCasi, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Totale casi', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'diamond' | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace10 = { | ||
| + | visible: 'legendonly', | ||
| + | x: currentYear, | ||
| + | y: currallTamponi, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Tamponi', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'square' | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace11 = { | ||
| + | visible: 'legendonly', | ||
| + | x: currentYear, | ||
| + | y: currallMortiTi, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Deceduti+Terapia Intensiva', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'cross' | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace12 = { | ||
| + | visible: 'legendonly', | ||
| + | x: currentYear, | ||
| + | y: currallMortiOsp, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Deceduti+Terapia Intensiva+Ricoverati', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'x' | ||
| + | |||
| + | } | ||
| + | }; | ||
| + | var d = new Date(); | ||
| + | if (d.getHours()<18){ | ||
| + | d.setDate(d.getDate()-1); | ||
| + | var when = d; | ||
| + | }else{ | ||
| + | var when = d; | ||
| + | } | ||
| + | [dx, dy,lname, when] = get_logistic(when); | ||
| + | |||
| + | var trace13 = { | ||
| + | x: dx, | ||
| + | y: dy, | ||
| + | mode: 'line', | ||
| + | name: lname, | ||
| + | line: { | ||
| + | color: 'rgba(255,0,0,0.5)', | ||
| + | width: 4 | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | |||
| + | [dxa, dya,lnamea,when] = get_logistic(when); | ||
| + | var trace14 = { | ||
| + | x: dxa, | ||
| + | y: dya, | ||
| + | mode: 'line', | ||
| + | name: lnamea, | ||
| + | line: { | ||
| + | color: 'rgba(255,120,120,0.5)', | ||
| + | width: 2 | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | [dxa, dya,lnamea,when] = get_logistic(when); | ||
| + | var trace15 = { | ||
| + | x: dxa, | ||
| + | y: dya, | ||
| + | mode: 'line', | ||
| + | name: lnamea, | ||
| + | line: { | ||
| + | color: 'rgba(255,180,180,0.5)', | ||
| + | width: 2 | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | [dxa, dya,lnamea,when] = get_logistic(when); | ||
| + | var trace16 = { | ||
| + | x: dxa, | ||
| + | y: dya, | ||
| + | mode: 'line', | ||
| + | name: lnamea, | ||
| + | line: { | ||
| + | color: 'rgba(255,210,210,0.5)', | ||
| + | width: 2 | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var trace17 = { | ||
| + | x: currentYear, | ||
| + | y: currNewMorti, | ||
| + | mode: 'markers', | ||
| + | name: 'Incremento morti', | ||
| + | marker: { | ||
| + | size: 6, | ||
| + | opacity: 1, | ||
| + | symbol: 'cross' | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var data = [trace8, | ||
| + | trace7, | ||
| + | trace11, | ||
| + | trace12, | ||
| + | trace9, | ||
| + | trace1, | ||
| + | trace2, | ||
| + | trace3, | ||
| + | trace4, | ||
| + | trace5, | ||
| + | trace6, | ||
| + | trace10, | ||
| + | trace13, trace14, trace15, trace16, trace17]; | ||
| + | |||
| + | var updatemenus=[ | ||
| + | { | ||
| + | buttons: [ | ||
| + | { | ||
| + | args: [{'yaxis.type': 'linear', | ||
| + | 'yaxis.tickmode':'auto'}], | ||
| + | label: 'Linear', | ||
| + | method: 'relayout' | ||
| + | }, | ||
| + | { | ||
| + | args: [{'yaxis.type':'log'}], | ||
| + | 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 Italia', | ||
| + | height: 800, | ||
| + | plot_bgcolor: "#000", | ||
| + | //width: 800, | ||
| + | margin: { l: 40, r: 0}, | ||
| + | updatemenus: updatemenus, | ||
| + | showlegend: true, | ||
| + | legend: { orientation: "h" , | ||
| + | x: 0, | ||
| + | y: -0.5}, | ||
| + | xaxis: { | ||
| + | tickmode: "linear", // If "linear", the placement of the ticks is determined by a starting position `tick0` and a tick step `dtick` | ||
| + | tick0: '2020-02-24', | ||
| + | gridcolor: '#555', | ||
| + | dtick: 7 * 24 * 60 * 60 * 1000 | ||
| + | }, | ||
| + | yaxis: { | ||
| + | autorange: true, | ||
| + | gridcolor: '#555', | ||
| + | //type: 'log', | ||
| + | //fixedrange: true, | ||
| + | //range: [0,3.70] | ||
| + | //range: [0,5000] | ||
| + | } | ||
| + | }; | ||
| + | var options = { | ||
| + | scrollZoom: true, | ||
| + | displayModeBar: false | ||
| + | }; | ||
| + | Plotly.newPlot('myDiv2', 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); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | function formatDate(date) { | ||
| + | var d = new Date(date), | ||
| + | month = '' + (d.getMonth() + 1), | ||
| + | day = '' + d.getDate(), | ||
| + | year = d.getFullYear(); | ||
| + | |||
| + | if (month.length < 2) | ||
| + | month = '0' + month; | ||
| + | if (day.length < 2) | ||
| + | day = '0' + day; | ||
| + | |||
| + | return [year, month, day].join('-'); | ||
| + | }; | ||
| + | |||
| + | function formatDate2(date) { | ||
| + | var d = new Date(date), | ||
| + | month = '' + (d.getMonth() + 1), | ||
| + | day = '' + d.getDate() | ||
| + | |||
| + | if (month.length < 2) | ||
| + | month = '0' + month; | ||
| + | if (day.length < 2) | ||
| + | day = '0' + day; | ||
| + | |||
| + | return [day, month].join('.'); | ||
| + | }; | ||
| + | |||
| + | function get_logistic(when){ | ||
| + | d = formatDate(when); | ||
| + | d2 = formatDate2(when); | ||
| + | var nome = d2+' - Fitting'; | ||
| + | var x = []; | ||
| + | var y = []; | ||
| + | |||
| + | var url = "https://raw.githubusercontent.com/vtandrea/labtest/master/"+d+"Italia.csv"; | ||
| + | when.setDate(when.getDate() - 1); | ||
| + | var request = new XMLHttpRequest(); | ||
| + | request.open("GET", url, false); | ||
| + | request.send(null); | ||
| + | |||
| + | var csvData = new Array(); | ||
| + | var jsonObject = request.responseText.split(/\r?\n|\r/); | ||
| + | for (var i = 0; i < jsonObject.length; i++) { | ||
| + | csvData.push(jsonObject[i].split(',')); | ||
| + | } | ||
| + | for (var i=1;i<csvData.length;i++){ | ||
| + | x.push(csvData[i][0]); | ||
| + | y.push(csvData[i][1]); | ||
| + | |||
| + | } | ||
| + | //if(1){ | ||
| + | if (y[40] == y[41]){ | ||
| + | var x = []; | ||
| + | var y = []; | ||
| + | var nome = 'Empty'; | ||
| + | } | ||
| + | //console.log(csvData[0][1]); | ||
| + | return [x,y, nome,when]; | ||
| + | } | ||
| + | |||
| + | }); | ||
| + | </script> | ||
| + | |||
| + | <script> | ||
| + | // PROV | ||
| + | Plotly.d3.csv('https://raw.githubusercontent.com/pcm-dpc/COVID-19/master/dati-province/dpc-covid19-ita-province.csv', function(err, rows){ | ||
| + | |||
| + | function unpack(rows, key) { | ||
| + | return rows.map(function(row) { return row[key]; }); | ||
| + | } | ||
| + | |||
| + | var allRegionNames = unpack(rows, 'denominazione_provincia'), | ||
| + | allDay = unpack(rows, 'data'), | ||
| + | allTotCasi = unpack(rows, 'totale_casi'), | ||
| + | |||
| + | listofRegions = [], | ||
| + | currentYear = []; | ||
| + | currTitle = 'Agrigento'; | ||
| + | currallTotCasi = []; | ||
| + | |||
| + | for (var i = 0; i < allRegionNames.length; i++ ){ | ||
| + | if (listofRegions.indexOf(allRegionNames[i]) === -1 ){ | ||
| + | listofRegions.push(allRegionNames[i]); | ||
| + | } | ||
| + | } | ||
| + | listofRegions.sort(); | ||
| + | |||
| + | function getRegionData(chosenCountry) { | ||
| + | currTitle = chosenCountry; | ||
| + | currentYear = []; | ||
| + | currallTotCasi = []; | ||
| + | |||
| + | for (var i = 0 ; i < allRegionNames.length ; i++){ | ||
| + | if ( allRegionNames[i] === chosenCountry ) { | ||
| + | currentYear.push(allDay[i].split(' ')[0]); | ||
| + | currallTotCasi.push(allTotCasi[i]); | ||
| + | } | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | // Default Region Data | ||
| + | setBubblePlot('Agrigento'); | ||
| + | |||
| + | function setBubblePlot(chosenCountry) { | ||
| + | getRegionData(chosenCountry); | ||
| + | |||
| + | var trace1 = { | ||
| + | x: currentYear, | ||
| + | y: currallTotCasi, | ||
| + | |||
| + | mode: 'markers', | ||
| + | name: 'Totale casi', | ||
| + | marker: { | ||
| + | size: 10 | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | var data = [trace1]; | ||
| + | |||
| + | var updatemenus=[ | ||
| + | { | ||
| + | buttons: [ | ||
| + | { | ||
| + | args: [{'yaxis.type': 'linear', | ||
| + | 'yaxis.tickmode':'auto'}], | ||
| + | label: 'Linear', | ||
| + | method: 'relayout' | ||
| + | }, | ||
| + | { | ||
| + | args: [{'yaxis.type':'log'}], | ||
| + | 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 Provincia di ' + currTitle, | ||
| + | height: 600, | ||
| + | plot_bgcolor: "#000", | ||
| + | //width: 800, | ||
| + | margin: { l: 40, r: 0}, | ||
| + | updatemenus: updatemenus, | ||
| + | showlegend: true, | ||
| + | legend: { orientation: "h" , | ||
| + | x: 1, | ||
| + | y: 1}, | ||
| + | xaxis: { | ||
| + | tickmode: "linear", // If "linear", the placement of the ticks is determined by a starting position `tick0` and a tick step `dtick` | ||
| + | tick0: '2020-02-24', | ||
| + | gridcolor: '#555', | ||
| + | dtick: 7 * 24 * 60 * 60 * 1000 | ||
| + | }, | ||
| + | yaxis: { | ||
| + | autorange: true, | ||
| + | gridcolor: '#555', | ||
| + | } | ||
| + | }; | ||
| + | var options = { | ||
| + | scrollZoom: true, | ||
| + | displayModeBar: false | ||
| + | }; | ||
| + | Plotly.newPlot('myDiv3', data, layout,options); | ||
| + | }; | ||
| + | |||
| + | var innerContainer = document.querySelector('[data-num="1"'), | ||
| + | //plotEl = innerContainer.querySelector('.plot'), | ||
| + | countrySelector = innerContainer.querySelector('.provdata'); | ||
| + | |||
| + | 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> | ||
| + | |||
| + | |||
| + | </body> | ||
| + | </html> | ||
TETSTSHJBJHABJBABKBACBCKBAKBCKJB
