31:T6fe,bottom = md` dati della [protezione civile](https://github.com/pcm-dpc/COVID-19), grafici di [nicola](https://nicola.io) e altri contributori open source, codice su [observable](https://observablehq.com/@nicola/regioni-italiane-covid)

**Informativa Privacy Policy**: Questo sito o gli strumenti di terze parti si avvalgono di cookie tecnici necessari al funzionamento e alla raccolta di informazioni in forma aggregata e anonimizzata sugli utenti del sito.

Leggi informativa

I cookies sono porzioni di codice che assistono il titolare nell'erogazione dei servizi del sito. Il sito utilizza i cookies per salvare la sessione dell'utente per ottimizzare l'esperienza utente e per la gestione di statistiche da parte del Titolare del sito.

Il sito utilizza Google Analytics (offerto da Google Inc.) per monitorare ed analizzare i dati del traffico dell'utente. Per informazioni sull'uso dei dati e sul loro trattamento si raccomanda di prendere visione dell'informativa di Google ([link](https://policies.google.com/privacy?hl=it)). Google Analytics raccoglie i dati raccolti in forma anonima e aggregata e non consentono informazioni personali degli utenti. E' vietato a Google Inc. l'incrocio di tali dati con quelli ricavati da altri servizi Google. I dati raccolti sono: identificativo del browser, data e orario di interazione col sito, pagina di provenienza, indirizzo IP. Ulteriori informazioni sui cookies di Google Analytics si trovano sulla seguente [pagina](https://developers.google.com/analytics/devguides/collection/analyticsjs/cookie-usage). Per ulteriori informazioni contatta nicola su quarantena (chiocciolina) nicolagreco (punto) com

`32:T5ed,style2 = { const c = `rgb(255, 255, 255, 0.5)`; return html``; }33:T1a90,graphNation = (field, color = d => 'black') => { const columns = 1 const avgWindow = 7 const w = width > 700 ? 200 : 100 const height = width > 700 ? 100 : 80 const graphWidth = w/columns const graphHeight = height const margin = ({top: 2.5, right: 2.5, bottom: 2.5, left: 2.5}) const paddingText = ({top: 10}) const padding = ({top: 20, right: 5, bottom: 5, left: 5}) const xF = (data) => d3.scaleBand() .domain(d3.range(data.length)) .range([margin.left + padding.left, graphWidth - margin.right - padding.right]) .padding(0.4) const yF = (data) => d3.scaleLinear() .domain([0, d3.max(data, d => d.y)]).nice() .range([graphHeight - margin.bottom - padding.bottom, margin.top + padding.top]) const data = filterData({x: 'date', y: field, group: 'denominazione_regione', min: 0}) .reduce((acc, curr) => { return [Object.assign({}, acc[0], { values: curr.values.map((v, i) => ({ [field]: (acc[0].values[i] && +acc[0].values[i][field] || 0) + (+v[field]), [`nuovi_${field}`]: (acc[0].values[i] && +acc[0].values[i][`nuovi_${field}`] || 0) + (+v[`nuovi_${field}`]) })), coords: curr.coords.map((v, i) => ({ x: v.x, y: (acc[0].coords[i] && +acc[0].coords[i].y || 0) + (+v.y) })) })] }, [{group: `Italia ${field.includes('nuovi') ? "(Giornalieri)" : "(Cumulativi)"}`, values: [], coords: []}]) .map(d => { const avgs = movingAverage(d.coords.map(d => d.y), avgWindow) const coords = d.coords.map((v, i) => Object.assign({}, v, {avg: avgs[i]})) return Object.assign({}, d, {coords}) }) .map(d => { const x = xF(d.coords) const y = yF(d.coords) const coords = d.coords.map((d, i) => ({ zeroX: x(0), zeroY: y(0), x: x(i), y: y(d.y), y_pre: d.y, avg_pre: d.avg, avg: y(d.avg) || y(0), height: y(0) - y(d.y), width: x.bandwidth(), })) return Object.assign({}, d, {coords}) }) .sort((a, b) => b.group < a.group) // .map(d => Object.assign({}, d, {coords: d.coords.slice(avgWindow) }) const svg = d3.create("svg") .attr("viewBox", [0, 0, w, height]) .attr("width", '100%') const regions = svg.append("g") .classed('regions', true) const region = regions.selectAll('.region') .data(data) .join('g') .classed('region', true) .attr("fill", color) .attr("transform", (d, i) => `translate(${graphWidth * (i % columns)},${graphHeight * Math.floor(i/columns)})`) const bg = region .append('rect') .classed('bg-rect', true) .attr('fill', '#f4f4f4') // .attr("stroke", '#666') .attr("stroke-width", 0.5) .attr('width', graphWidth - margin.left - margin.right) .attr('height', graphHeight - margin.top - margin.bottom) .attr('x', margin.left) .attr('y', margin.top) const title = region .append('text') .attr('fill', 'black') .classed('region-name', true) .text(d => d.group) .attr('font-size', '7') .attr('font-weight', '700') .attr('fill', '#444') .attr('transform', `translate(${padding.left + margin.left}, ${paddingText.top + margin.top})`) if (!field.includes('nuovi')) { const count = region .append('text') .attr('fill', 'black') .classed('region-name', true) .text(d => { const type = field.replace('nuovi_', '') const count = d.values[d.values.length - 1][type] const nuovi = d.values[d.values.length - 1]['nuovi_' + type] return `${comma(count)} casi` }) .attr('font-size', 6) .attr('font-family', 'sans-serif') .style('fill', '#888') .attr('transform', `translate(${padding.left + margin.left}, ${paddingText.top + margin.top + 8})`) const count2 = region .append('text') .attr('fill', 'black') .classed('region-name', true) .text(d => { const type = field.replace('nuovi_', '') const count = d.values[d.values.length - 1][type] const nuovi = d.values[d.values.length - 1]['nuovi_' + type] return `${plus(nuovi)} da ieri` }) .attr('font-size', 6) .attr('font-family', 'sans-serif') .style('fill', '#888') .attr('transform', `translate(${padding.left + margin.left}, ${paddingText.top + margin.top + 16})`) const count3 = region .append('text') .attr('fill', 'black') .classed('region-name', true) .text(d => { const type = field.replace('nuovi_', '') const count = d.values[d.values.length - 1][type] const nuovi = d.values[d.values.length - 1]['nuovi_' + type] return `${perc(nuovi/count)}` }) .attr('font-size', 6) .attr('font-family', 'sans-serif') .style('fill', '#888') .attr('transform', `translate(${padding.left + margin.left}, ${paddingText.top + margin.top + 24})`) } const line = d3.line() .x(d => d.x+1) .y(d => d.avg); const area = d3.area() .curve(d3.curveLinear) .x(d => d.x+1) .y0(d => d.zeroY) .y1(d => d.avg) const path = region.append('path') .classed('.avg-path', true) .attr("d", d => line(d.coords)) .attr('fill', 'none') .attr('stroke', color) const areaBg = region.append('path') .attr("fill", color) .style('opacity', 0.1) .attr("d", d => area(d.coords)); const bars = region .append('g') .selectAll("rect.data") .data(d => d.coords) .join("rect") .classed('data', true) .style('opacity', 0.2) .attr("x", d => d.x) .attr("y", d => d.y) .attr("height", d => d.height > 0 ? d.height : 0) .attr("width", d => d.width) const highest = region.append('g') .datum(d => { const minIndex = d3.minIndex(d.coords, d => d.avg) return Object.assign({}, d.coords[minIndex], {isLast: minIndex > d.coords.length -3}) }) highest.append('text') .text(d => Math.ceil(d.avg_pre)) .attr('transform', d => `translate(${d.isLast ? d.x + 2 : d.x}, ${d.avg - 7})`) .style('text-anchor', d => d.isLast ? 'end' : 'middle') .attr('font-size', 6) .attr('font-family', 'sans-serif') .style('fill', '#666') highest.append('line') .attr('stroke', '#666') .attr('stroke-width', 0.5) .attr("x1", (d) => d.x + d.width/2) .attr("y1", (d) => d.avg + 0.5) .attr("x2", (d) => d.x + d.width/2) .attr("y2", (d, i) => d.avg - 4) return Object.assign(svg.node(), { update(domain) { } }); }34:T1a90,graphRegions = (field, color = d => 'black') => { const columns = width > 700 ? 7 : 2 const avgWindow = 7 const w = width > 700 ? 600 : 200 const height = width > 700 ? 180 : 700 const graphWidth = w/columns const graphHeight = height / Math.ceil(21 / columns) const margin = ({top: 2.5, right: 2.5, bottom: 2.5, left: 2.5}) const paddingText = ({top: 10}) const padding = ({top: 20, right: 5, bottom: 5, left: 5}) const xF = (data) => d3.scaleBand() .domain(d3.range(data.length)) .range([margin.left + padding.left, graphWidth - margin.right - padding.right]) .padding(0.4) const yF = (data) => d3.scaleLinear() .domain([0, d3.max(data, d => d.y)]).nice() .range([graphHeight - margin.bottom - padding.bottom, margin.top + padding.top]) const data = filterData({x: 'date', y: field, group: 'denominazione_regione', min: 0}) .map(d => { const avgs = movingAverage(d.coords.map(d => d.y), avgWindow) const coords = d.coords.map((v, i) => Object.assign({}, v, {avg: avgs[i]})) return Object.assign({}, d, {coords}) }) .map(d => { const x = xF(d.coords) const y = yF(d.coords) const coords = d.coords.map((d, i) => ({ zeroX: x(0), zeroY: y(0), x: x(i), y: y(d.y), y_pre: d.y, avg_pre: d.avg, avg: y(d.avg) || y(0), height: y(0) - y(d.y), width: x.bandwidth(), })) return Object.assign({}, d, {coords, x, y}) }) .sort((a, b) => b.group < a.group) // .map(d => Object.assign({}, d, {coords: d.coords.slice(avgWindow) }) const svg = d3.create("svg") .attr("viewBox", [0, 0, w, height]) .attr("width", '100%') const regions = svg.append("g") .classed('regions', true) const region = regions.selectAll('.region') .data(data) .join('g') .classed('region', true) .attr("fill", color) .attr("transform", (d, i) => `translate(${graphWidth * (i % columns)},${graphHeight * Math.floor(i/columns)})`) const bg = region .append('rect') .classed('bg-rect', true) .attr('fill', '#f4f4f4') // .attr("stroke", '#666') .attr("stroke-width", 0.5) .attr('width', graphWidth - margin.left - margin.right) .attr('height', graphHeight - margin.top - margin.bottom) .attr('x', margin.left) .attr('y', margin.top) const title = region .append('text') .attr('fill', 'black') .classed('region-name', true) .text(d => d.group) .attr('font-size', '7') .attr('font-weight', '700') .attr('fill', '#444') .attr('transform', `translate(${padding.left + margin.left}, ${paddingText.top + margin.top})`) const count = region .append('text') .attr('fill', 'black') .classed('region-name', true) .text(d => { const type = field.replace('nuovi_', '') const count = d.values[d.values.length - 1][type] const nuovi = d.values[d.values.length - 1]['nuovi_' + type] return `${comma(count)} casi` }) .attr('font-size', 6) .attr('font-family', 'sans-serif') .style('fill', '#888') .attr('transform', `translate(${padding.left + margin.left}, ${paddingText.top + margin.top + 8})`) const count2 = region .append('text') .attr('fill', 'black') .classed('region-name', true) .text(d => { const type = field.replace('nuovi_', '') const count = d.values[d.values.length - 1][type] const nuovi = d.values[d.values.length - 1]['nuovi_' + type] return `${plus(nuovi)} da ieri` }) .attr('font-size', 6) .attr('font-family', 'sans-serif') .style('fill', '#888') .attr('transform', `translate(${padding.left + margin.left}, ${paddingText.top + margin.top + 16})`) const count3 = region .append('text') .attr('fill', 'black') .classed('region-name', true) .text(d => { const type = field.replace('nuovi_', '') const count = d.values[d.values.length - 1][type] const nuovi = d.values[d.values.length - 1]['nuovi_' + type] return `${perc(nuovi/count)}` }) .attr('font-size', 6) .attr('font-family', 'sans-serif') .style('fill', '#888') .attr('transform', `translate(${padding.left + margin.left}, ${paddingText.top + margin.top + 24})`) // .attr("x", d => padding.left + margin.left ) // .attr("y", d => paddingText.top + margin.top + 24) const line = d3.line() .x(d => d.x+1) .y(d => d.avg); const area = d3.area() .curve(d3.curveLinear) .x(d => d.x+1) .y0(d => d.zeroY) .y1(d => d.avg) const path = region.append('path') .classed('avg-path', true) .attr("d", d => line(d.coords)) .attr('fill', 'none') .attr('stroke', color) const areaBg = region.append('path') .attr("fill", color) .style('opacity', 0.1) .attr("d", d => area(d.coords)); const bars = region .append('g') .selectAll("rect.data") .data(d => d.coords) .join("rect") .classed('data', true) .style('opacity', 0.2) .attr("x", d => d.x) .attr("y", d => d.y) .attr("height", d => d.height > 0 ? d.height : 0) .attr("width", d => d.width) // const highest = region.append('g') // .classed('highest', true) // .datum(d => { // const minIndex = d3.minIndex(d.coords, d => d.avg) // return Object.assign({}, d.coords[minIndex], {isLast: minIndex > d.coords.length -3}) // }) // if (choice === 'nuovi') { // highest.append('text') // .text(d => Math.ceil(d.avg_pre)) // .attr("x", d => d.isLast ? d.x + 2 : d.x ) // .attr("y", d => d.avg - 7) // .style('text-anchor', d => d.isLast ? 'end' : 'middle') // .attr('font-size', 6) // .attr('font-family', 'sans-serif') // .style('fill', '#666') // highest.append('line') // .attr('stroke', '#666') // .attr('stroke-width', 0.5) // .attr("x1", (d) => d.x + d.width/2) // .attr("y1", (d) => d.avg + 0.5) // .attr("x2", (d) => d.x + d.width/2) // .attr("y2", (d, i) => d.avg - 4) // } return Object.assign(svg.node(), { update(domain) { }, select(index) { // highest // .datum(d => Object.assign({}, d.coords[index], {isLast: index > d.coords.length - 3})) // .selectAll('text') // .text(d => Math.ceil(d.avg_pre)) // .attr("x", d => d.isLast ? d.x + 2 : d.x ) // .attr("y", d => d.avg - 7) // .style('text-anchor', d => d.isLast ? 'end' : 'middle') // .attr('font-size', 6) // .attr('font-family', 'sans-serif') // .style('fill', '#666') } }); }35:[] 2f:{"title":"Quarantena Live (Developer version)","cells":[{"id":603,"value":"html`

Quarantena Live (Developer version)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"header = html`

\nUltimo aggiornamento: ${recentData[0].data}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"html`

\nDona alla Protezione Civile o Guarda le infografiche nazionali\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":776,"value":"html`\n

\nCari lettori e care lettrici,
\nI grafici esposti sono realizzati tramite i dati della Protezione Civile e aggiornati giornalmente.\n

\n\n

\nI grafici mostrano l'andamento italiano e regionale diviso in diverse categorie: infetti, deceduti, guariti, ospedalizzati (con focus su ricoverati e in terapia intensiva) e i tamponi.\n

\n\n

\nIl progetto é open source e tutti possono partecipare facendo un fork di questa pagina.\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"viewof choice = radio({\n title: 'Modifica visualizzazione',\n options: [\n { label: 'Nuovi casi', value: 'nuovi' },\n { label: 'Totale cumulativo', value: 'cumulativo' },\n ],\n value: 'nuovi'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"totale_casi = show(\"Infetti\", 'totale_casi', d => 'red')","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"deceduti = show(\"Deceduti\", 'deceduti', d => 'black')","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"guariti = show(\"Guariti\", 'dimessi_guariti', d => 'green')","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"ospedalizzati = show(\"Ospedalizzati (Ricoverati + Intensiva)\", 'totale_ospedalizzati', d => 'blue')","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"ricoverati = show(\"Ricoverati\", 'ricoverati_con_sintomi', d => 'brown')","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"intensiva = show(\"Terapia Intensiva\", 'terapia_intensiva', d => 'violet')","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"tamponi = show(\"Tamponi\", 'tamponi', d => 'orange')","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"md`## Credits\n\n- [Ispirato dall'articolo NYT](https://www.nytimes.com/interactive/2020/04/03/world/coronavirus-flatten-the-curve-countries.html)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"style1 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"colorScale = (color, type) => {\n return (extent) => (d) => d3\n .scaleSqrt()\n .domain(extent)\n .range([`hsla(40, 10%, 60%, 0.6)`, color])(d[type])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"show = (title, type, color) => {\n const prefix = choice === 'nuovi' ? 'nuovi_' : ''\n const prefixTitle = choice === 'nuovi' ? 'Nuovi ' : ''\n \n const field = `${prefix}${type}`\n\n const wording = choice === 'nuovi'\n ? \"I grafici a barre riportano i nuovi casi giornalieri, le linee rappresentano la media degli ultimi 7 giorni, il numero riportato é il totale.\"\n : \"I grafici a barre riportano l'andamento cumulativo giornaliero, le linee rappresentano la media degli ultimi 7 giorni.\"\n\n // \n return md`\n

${prefixTitle}${title}

${wording}

\n\n

${graphNation(type, color)}

${graphNation(`nuovi_${type}`, color)}

\n\n

${graphRegions(field, color)}

\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"html`\n

${graphNation('deceduti')}

${graphNation('nuovi_deceduti')}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":873,"value":"graphRegions('nuovi_deceduti')","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"d3.selectAll('.region')\n .on(\"mouseout\", (d) => {\n d3.event.preventDefault();\n const ym = d.y(d3.event.layerY);\n const xm = d.x(d3.event.layerX);\n const i1 = d3.bisectLeft(d.coords.map((_, i) => i), xm, 1);\n const i0 = i1 - 1;\n const i = xm - d.coords[i0].avg > d.coords[i1].avg - xm ? i1 : i0;\n console.log(ym, d3.event.layerY, xm, d3.event.layerX, i, i0)\n// const s = d3.least(regionData, d => Math.abs(+d.coords[i].y - ym));\n// if (currSelection === s.group) {\n// return;\n// }\n// currSelection = s.group\n\n// labels.select(s.group)\n// path.select(s.group)\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"plus = d3.format('+,.0f')","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"perc = d3.format('+,.0%')","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"comma = d3.format(',.0f')","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"filterData = (coords) => {\n const dataWithDates = dataFrom(coords.y, coords.min).flat()\n .map(d => Object.assign({}, d, {date: d3.timeDay(new Date(d.data))}))\n\n return d3\n .groups(dataWithDates, d => d[coords.group])\n .sort((a, b) => d3.max(a[1], d => +d[coords.y]) - d3.max(b[1], d => +d[coords.y]))\n .map((d, i) => d.concat(i))\n .map(d => ({\n group: d[0],\n values: d[1],\n i: d[2],\n coords: d[1]\n .map(v => ({x: v[coords.x], y: +v[coords.y], group: v[coords.group]}))\n // .filter(v => v.y >= coords.min)\n }))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"function movingAverage(values, N) {\n let i = 0;\n let sum = 0;\n const means = new Float64Array(values.length).fill(NaN);\n for (let n = Math.min(N - 1, values.length); i < n; ++i) {\n sum += values[i];\n }\n for (let n = values.length; i < n; ++i) {\n sum += values[i];\n means[i] = sum / N;\n sum -= values[i - N + 1];\n }\n return means;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require('d3@5', 'd3-array@^2.2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"import {dataFrom, recentData, makeMap, numbersTop as numTop, numbersBottom as numBottom} from '@nicola/covid-19-italy-map'","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"import {chart, style} from \"78c02acc29e37e7d\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"import {radio} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}