30:T7e0,chart = { const svg = d3.select(DOM.svg(width, height)); const box = svg.append("g") .attr("transform", `translate(${(width - x(kpi[0].value)) / 2}, ${(height - y(kpi[0].value)) / 2})`); box.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", x(kpi[0].value)) .attr("height", y(kpi[0].value)) .attr("fill", "none") .attr("stroke", "#F2EC80") .attr("stroke-width", 0.75); const leaf = box.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); leaf.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("fill", d => { while (d.depth > 2) d = d.parent; return color(d.data.key); }) .attr("fill-opacity", 0.4) .attr("stroke", d => { while (d.depth > 2) d = d.parent; return color(d.data.key); }) .attr("stroke-width", 1) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); leaf.append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => d.data.regione.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value))) .join("tspan") .attr("x", 3) .attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.5 : null) .text(d => d); //return svg.node(); return Object.assign(svg.node(), { update(index) { box.transition() .duration(300) .attr("opacity", ({i}) => i >= index ? 1 : 0); leaf.data(root.leaves()).transition() .duration(300) .ease(d3.easeLinear) .attr("transform", d => `translate(${d.x0},${d.y0})`) .call(leaf => leaf.select("rect") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0)); } }); }31:T818,cartogram = { const pallozzi = d3.select(DOM.svg(width, height + 100)); let g = pallozzi.append("g") .selectAll("rect") .data(nodes) .join( enter => enter.append("rect") .attr("x", width / 2) .attr("y", height / 2) .attr("width", d => size(d.totale_ospedalizzati)) .attr("height", d => size(d.totale_ospedalizzati)) .attr("fill", d => intensity(d.terapia_intensiva)) .attr("stroke", "#000000") .attr("stroke-width", 0.5), update => update.transition() .duration(500) .attr("width", d => size(d.totale_ospedalizzati)) .attr("height", d => size(d.totale_ospedalizzati)) .attr("fill", d => intensity(d.terapia_intensiva)) ).call(drag(simulation)); let labels = pallozzi.append("g") .selectAll("text") .data(nodes) .join("text") .attr("x", width / 2) .attr("y", height / 2) .text(d => { if(d.totale_ospedalizzati > 0) { return d.regione } }) .attr("fill", "#000000") .attr("text-anchor", "left") .attr("alignment-baseline", "top") .style("pointer-events", "none"); let nums = pallozzi.append("g") .selectAll("text") .data(nodes) .join("text") .attr("x", width / 2) .attr("y", height / 2) .text(d => { if(d.totale_ospedalizzati > 0) { return `${d.terapia_intensiva} su ${d.totale_ospedalizzati}` } }) .attr("fill", "#000000") .attr("text-anchor", "left") .attr("alignment-baseline", "top") .style("pointer-events", "none"); simulation.on("tick", (e) => { g .attr("x", d => d.x - size(d.totale_ospedalizzati) / 2) .attr("y", d => d.y - size(d.totale_ospedalizzati) / 2); labels .attr("x", d => d.x - size(d.totale_ospedalizzati) / 2) .attr("y", d => d.y - size(d.totale_ospedalizzati) / 2 - 5); nums .attr("x", d => d.x - size(d.totale_ospedalizzati) / 2 + 5) .attr("y", d => d.y + size(d.totale_ospedalizzati) / 2 - 5); }); invalidation.then(() => simulation.stop()); return pallozzi.node(); }32:T6ab,function swatches({ color, columns = null, format = x => x, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 }) { const id = DOM.uid().id; if (columns !== null) return html`

${color.domain().map(value => { const label = format(value); return html`

${document.createTextNode(label)}

`; })}

`; return html`

${color.domain().map(value => html`${document.createTextNode(format(value))}`)}

`; }33:T103b,function legend({ color, title, tickSize = 6, width = 320, height = 44 + tickSize, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = width / 64, tickFormat, tickValues } = {}) { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, width - marginRight), n)); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {range() { return [marginLeft, width - marginRight]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color); tickAdjust = () => {}; } svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft) .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .text(title)); return svg.node(); }34:[] 2e:{"title":"Italia, ieri in COVID-19","cells":[{"id":216,"value":"md`# Italia, ieri in COVID-19\n\nLa visualizzazione mostra l'andamento degli ultimi **venti giorni** dello stato del Coronavirus in Italia nelle singole regioni. I dati provengono dal database della [Protezione Civile](https://github.com/pcm-dpc/COVID-19). In evidenza i **casi positivi**, i **guariti** e i **deceduti**.\n\n_I dati sono aggiornati dalle 17:00 alle 18:00._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"md`### Dati del ${humanTime(yesterday.setTime(date.getTime()-( travel *24*3600000)))}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"viewof travel = slider({\n step: 1,\n min: 1,\n max: 200,\n value: 1,\n title: \"Vai indietro nel tempo:\",\n description: \"Scorri di giorno in giorno per gli ultimi venti giorni di dati.\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":771,"value":"md`### Totale casi: ${kpi[0].value.toLocaleString()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"swatches({\n color: d3.scaleOrdinal([\"Deceduti\", \"Positivi\", \"Guariti\"], ([\"#E3170A\", \"#F2EC80\", \"#FBF9DC\"]))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"md`## Casi in terapia intensiva sul totale di ospedalizzati`","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"legend({\n color: d3.scaleLinear([intensity.domain()[0], intensity.domain()[1]], [d3.rgb(\"#FBF9DC\"), d3.rgb(\"#E3170A\")]),\n title: \"Casi di terapia intensiva\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"md`---\n#### Funzioni generiche`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"color = d3.scaleOrdinal()\n.range([\"#E3170A\", \"#FFD800\", \"#FFF1A3\"])\n.domain(filterData.map(d => d.type))","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"intensity = d3.scaleLinear()\n.interpolate(d3.interpolateRgb)\n.range([d3.rgb(\"#FBF9DC\"), d3.rgb(\"#E3170A\")])\n.domain(d3.extent(filterData, d => d.terapia_intensiva))","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"size = d3.scaleSqrt()\n.range([4, 200])\n.domain([0, kpi[0].value])","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"x = d3.scaleLinear()\n.range([1, width])\n.domain(d3.extent(timelineFlat, d => d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"y = d3.scaleLinear()\n.range([1, height])\n.domain(d3.extent(timelineFlat, d => d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 550","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"format = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"parseTime = d3.timeFormat(\"%Y-%m-%d\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":956,"value":"humanTime = d3.timeFormat(\"%d %b %Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"yesterday = new Date(date.getTime())","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"date = new Date();","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"md`### Cartogramma`","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"projection = d3.geoConicEqualArea()\n.fitSize([width -200, height-200], svg)\n.translate([width / 2, height / 2])\n.scale(3000)\n.center([12.368775000000001, 42.9451139]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"simulation = d3.forceSimulation()\n .force(\"charge\", d3.forceManyBody().strength(3))\n .force(\"x\", d3.forceY().y(d => d.y0).strength(1))\n .force(\"y\", d3.forceX().x(d => d.x0).strength(1))\n .force(\"collide\", d3.forceCollide(d => size(d.totale_ospedalizzati) / 2 + 15))\n .nodes(nodes);","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"md`### Manipolazione dati`","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"values = [\"totale_attualmente_positivi\", \"dimessi_guariti\", \"deceduti\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"typeLabels = ['positivi', 'dimessi', 'deceduti'];","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"md`#### Importazione dei dati originali`","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"baseUrl = \"https://raw.githubusercontent.com/pcm-dpc/COVID-19/master/dati-json/dpc-covid19-ita-regioni.json\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"data = d3.json(baseUrl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"md`#### Filtro dei dati a seconda della data selezionata`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"filterData = data.filter(\n d =>\n d.data.split(\"T\")[0] ==\n parseTime(yesterday.setTime(date.getTime() - travel * 24 * 3600000))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":701,"value":"nodes = filterData.map(d => {\n let point = projection([d.long, d.lat]);\n return {\n regione: d.denominazione_regione,\n x: point[0], y: point[1],\n x0: point[0], y0: point[1],\n terapia_intensiva: d.terapia_intensiva,\n totale_ospedalizzati: d.totale_ospedalizzati\n };\n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"md`#### Raggruppamento dei dati per regione`","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"kpi = d3.nest()\n.key(d => d.stato)\n.rollup(d => d3.sum(d, d => d.totale_casi))\n.entries(filterData);","pinned":false,"hidden":false,"mode":"ojs"},{"id":967,"value":"timeline = d3.nest()\n.key(d => d.data.split(\" \")[0])\n.rollup(d => d3.sum(d, d => d.totale_casi))\n.entries(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":983,"value":"timelineFlat = {\n let timelineFlat = [];\n \n timeline.forEach(d => { \n values.forEach((value, index) => {\n console.log(d);\n timelineFlat.push({\n \"data\": d.key,\n \"value\": d.value\n })\n })\n });\n \n return timelineFlat;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"regioni = {\n let regioni = [];\n \n filterData.forEach(d => { \n values.forEach((value, index) => {\n regioni.push({\n \"regione\": d.denominazione_regione,\n \"type\": typeLabels[index],\n \"value\": d[value]\n })\n })\n });\n \n return regioni;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"nest = d3.nest()\n.key(d => d.regione)\n.key(d => d.type)\n.entries(regioni);","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"md`#### Organizzazione dei dati per la treemap`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"root = d3.hierarchy({values: nest}, function(d) { return d.values; })\n .sum(function(d) { return d.value; })\n .sort(function(a, b) { return b.value - a.value; });","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"md`_Inizializzazione della treemap_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"treemap = d3\n .treemap()\n .tile(d3.treemapResquarify)\n .size([x(kpi[0].value), y(kpi[0].value)])\n .padding(1)\n .round(false)","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"treemap(root)","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"md`---\n#### D3, slider, legenda, stile`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"import {map} from \"@d3/world-map\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"import {slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"function ramp(color, n = 256) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"function entity(character) {\n return `&#${character.charCodeAt(0).toString()};`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`#### Grazie a\nMike Bostock per le sue [stupende](https://bl.ocks.org/mbostock/2838bf53e0e65f369f476afd653663a2) [treemap](https://observablehq.com/@d3/treemap)\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}