31:Tc2a,map = { const svg = d3 .create("svg") .attr("width", w) .attr("height", h) .attr("viewBox", [0, 0, w, h]) .attr("class", "italy"); const legend = svg .append("g") .attr("class", "legend") .attr("fill", "#777") .attr( "transform", `translate(${w > breakpoint ? [w - w / 3.5, h / 3.5] : [10, h - 15]})` ); legend .append("text") .attr("class", "legend-title") .text("No. confirmed cases") .attr("dy", -maxRadius * 2.9); const legendBubbles = legend .selectAll("g") .data(legendRadii) .join("g"); let margin = 0; legendBubbles .attr("transform", (d, i) => { margin += i === 0 ? 0 : radius(legendBubbles.data()[i - 1]) * 2 + 15; return `translate(${margin + radius(d)}, 0)`; }) .append("circle") .attr("class", "legend-bubble") .attr("fill", d => colorScale(d)) .attr("cy", d => -radius(d)) .attr("r", radius); legendBubbles .append("text") .attr("dy", "1.3em") .text(w > breakpoint ? numFormat : sFormat); svg .append("path") .datum(provinces) .attr("d", path); svg .selectAll(".subunit") .data(provinces.features) .enter() .append("path") .attr("class", function(d) { return "subunit"; }) .attr("d", path); const bubble = svg .selectAll(".bubble") .data(data[mutable index]) .enter() .append("circle") .attr("transform", function(d) { return "translate(" + projection([d.long, d.lat]) + ")"; }) .attr("class", "bubble") .attr("fill-opacity", 0.5) .attr("fill", d => colorScale(+d.totale_casi)) .attr("r", d => radius(+d.totale_casi)); bubble.append("title"); svg .selectAll("place") .data(places.features) .enter() .append("circle") .attr("class", "place") .attr("r", 2.5) .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; }); svg .selectAll(".place-label") .data(places.features) .enter() .append("text") .attr("class", "place-label") .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; }) .attr("dy", ".35em") .text(function(d) { return d.properties.name; }) .attr("x", function(d) { return d.geometry.coordinates[0] > -1 ? 6 : -6; }) .style("text-anchor", function(d) { return d.geometry.coordinates[0] > -1 ? "start" : "end"; }); const wrapper = html`

`; wrapper.append(svg.node()); return Object.assign(wrapper, { update(i) { const t = svg .transition() .duration(i === 0 ? 0 : delay) .ease(d3.easeLinear); bubble .data(data[i]) .call(b => { b.transition(t) .attr("fill", d => colorScale(+d.totale_casi)) .attr("r", d => radius(+d.totale_casi)); }) .select("title") .text( d => `${d.denominazione_provincia}: ${numFormat(+d.totale_casi)} cases` ); } }); }32:[{"id":"9132b2f74dffe9214d02351c3945352c687c42e3f06c6afd5c6438b6780f206b56f52ec15398c6d5677ade3d81811a692ff945fa5007ca8d53dd65acd6ea63d6","href":"https://static.observableusercontent.com/files/9132b2f74dffe9214d02351c3945352c687c42e3f06c6afd5c6438b6780f206b56f52ec15398c6d5677ade3d81811a692ff945fa5007ca8d53dd65acd6ea63d6","name":"italy2@1.json","type":"application/json","lastModified":1583790826284.965,"size":98808}] 2f:{"title":"Italy Coronavirus Daily Cases Map (COVID-19)","cells":[{"id":0,"value":"md`# Italy Coronavirus Daily Cases Map (COVID-19)\n\nEvery evening, the Italian government publishes daily counts of confirmed coronavirus cases in each province. On the day this map was published (March 9), Italy announced travel restrictions on civilian movement across the entire country. Special permission is now needed to move between regions, and all public gatherings — including weddings and funerals — have been forbidden.\n\n*Source: [Dipartimento della Protezione Civile](https://github.com/pcm-dpc/COVID-19) *\n\n*This notebook has been finalized to display cases between February 24 and June 24, 2020, when the government changed the format of the dataset.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"viewof day = Scrubber(dates.slice(0, data.length), {\n delay,\n loop: false,\n format: d => d.toLocaleDateString()\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"md`

\n\n## Appendix\n\n*The implementation of this notebook lies below. It is not yet organized or commented.*\n\n---\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"{\n const c = `rgb(255, 255, 255, 0.5)`;\n return html``;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":791,"value":"legendRadii = [10, 500, 2000, 10000]","pinned":true,"hidden":false,"mode":"ojs"},{"id":620,"value":"map.update(index)","pinned":true,"hidden":false,"mode":"ojs"},{"id":434,"value":"w = Math.min(width, 700)","pinned":true,"hidden":false,"mode":"ojs"},{"id":436,"value":"h = Math.round(w * 1.2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":294,"value":"maxLegend = Math.round(maxCases / magnitude) * magnitude","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"magnitude = toMagnitude(maxCases)","pinned":true,"hidden":false,"mode":"ojs"},{"id":284,"value":"function toMagnitude(n) {\n var order = Math.floor(Math.log(n) / Math.LN10 + 0.000000001);\n return Math.pow(10, order);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":703,"value":"mutable index = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"{\n mutable index = dates.indexOf(day);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"radius = d3\n .scaleSqrt()\n .domain([0, maxCases])\n .range([0, maxRadius])","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"colorScale = d3\n .scaleSqrt()\n .domain([0, maxCases])\n .range([`hsla(57, 100%, 50%, 0.36)`, `hsla(7, 100%, 50%, 0.57)`])","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"delay = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"maxCases = d3.max(recentData.map(d => +d.totale_casi))","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"data = responses.map(r => d3.csvParse(r))","pinned":true,"hidden":false,"mode":"ojs"},{"id":521,"value":"breakpoint = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":384,"value":"maxRadius = w > breakpoint ? 30 : 18","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"recentData = data[data.length - 1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"responses = Promise.all(urls.map(u => fetch(u))).then(responses =>\n Promise.all(responses.filter(r => r.ok).map(r => r.text()))\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"csvs = Promise.all(urls.map(u => fetch(u).then(u => u.text())))","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"urls = dateStrings.map(d => baseUrl.replace(\"DATE\", d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"baseUrl = \"https://raw.githubusercontent.com/pcm-dpc/COVID-19/master/dati-province/dpc-covid19-ita-province-DATE.csv\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"startDate = new Date(\"2020-02-24T11:00:00Z\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":816,"value":"endDate = new Date(\"2020-06-25T11:00:00Z\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"dateStrings = dates.map(\n d =>\n d\n .toISOString()\n .replace(/-/g, '')\n .split(\"T\")[0]\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"dates = dateRange(startDate, endDate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"function dateRange(start, end) {\n const duration = 1000 * 60 * 60 * 24;\n const dates = [];\n let ms = start * 1;\n while (ms < end * 1) {\n dates.push(new Date(ms));\n ms += duration;\n }\n return dates;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"allProvinces = topojson.feature(italy, italy.objects.subunits)","pinned":true,"hidden":false,"mode":"ojs"},{"id":559,"value":"provinces = ({\n ...allProvinces,\n // Nix Pantelleria\n features: allProvinces.features.filter(\n f => d3.min(f.geometry.coordinates.flat(10).filter(d => d > 30)) > 36\n )\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"places = topojson.feature(italy, italy.objects.places)","pinned":true,"hidden":false,"mode":"ojs"},{"id":782,"value":"sFormat = d3.format(\".1s\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":726,"value":"numFormat = d3.format(\",\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"path = d3.geoPath().projection(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"projection = d3\n .geoAlbers()\n .rotate([-12.8, 0])\n .parallels([40, 50])\n .fitExtent([[0, 0], [w, h]], provinces)","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"italy = FileAttachment(\"italy2@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}