31:T10b3,map = { const svg = d3 .create("svg") .attr("width", w) .attr("height", h) .attr("viewBox", [0, 0, w, h]) .attr("class", "netherlands"); // const legend = svg // .append("g") // .attr("class", "legend") // .attr("fill", "#777") // .attr( // "transform", // `translate(${w > breakpoint ? [0, h / 3.5] : [10, h - 15]})` // ); // legend // .append("text") // .attr("class", "legend-title") // .text("No. confirmed cases") // .attr("dy", -maxRadius * 2.2); // const legendBubbles = legend // .selectAll("g") // .data([1, Math.round(maxLegend / 4), Math.round(maxLegend / 2), Math.round(maxLegend)]) // .join("g") // .attr("transform", (d,i) => `translate(${radius(d)*2 + i*30}, 0)`); // legendBubbles // .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(numFormat); svg .append("path") .datum(gemeentes) .attr("d", path); svg .selectAll(".subunit") .data(gemeentes.features) .enter() .append("path") .attr("class", function(d) { return "subunit"; }) .attr("d", path); const hex = svg .append("g") .selectAll("path") .data(hexbinned_data) .join("path") .attr("transform", d => `translate(${d.x},${d.y})`) .attr("d", d => hexbin.hexagon(radius(hex_radius-4))) .attr("fill", function(d) { return +d.infected[mutable index] > 1 ? colorScale(+d.infection_rate[mutable index]) : `hsla(0, 0%, 0%, 0)` }) .attr("stroke", d => +d.infected[mutable index] > 1 ? d3.lab(colorScale(+d.infection_rate[mutable index])).darker() : `hsla(0, 0%, 0%, 0)`) hex.append("title") // .append("title") // .text(d => `${d.length.toLocaleString()} stores // ${d.date.getFullYear()} median opening`); // const bubble = svg // .selectAll(".bubble") // .data(data[mutable index]) // .enter() // .append("circle") // .attr("transform", function(d) { // return "translate(" + projection(d.Midpoint) + ")"; // }) // .attr("class", "bubble") // .attr("fill-opacity", 0.5) // .attr("fill", d => colorScale(+d.Aantal)) // .attr("r", d => radius(+d.Aantal)); // bubble.append("title"); svg .selectAll("place") .data(cities) .enter() .append("circle") .attr("class", "place") .attr("r", 2.5) .attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; }); svg .selectAll(".place-label") .data(cities) .enter() .append("text") .attr("class", "place-label") .attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; }) .attr("dy", ".35em") .text(function(d) { return d.name; }) .attr("x", function(d) { return d.coordinates[0] > 5.05 ? 6 : -6; }) .style("text-anchor", function(d) { return d.coordinates[0] > 5.05 ? "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); hex .data(hexbinned_data) .call(b => { b.transition(t) .attr("fill", d => +d.infected[i] > 1 ? colorScale(+d.infection_rate[i]) : `hsla(0, 0%, 0%, 0)`) .attr("stroke", d => +d.infected[i] > 1 ? d3.lab(colorScale(+d.infection_rate[i])).darker() : `hsla(0, 0%, 0%, 0)`); }) .select("title") .text(function(d) { var result = `${(d.infection_rate[i] *100000).toFixed(2)} infected per 100.000\n`; d.gemeentes.forEach(function(g) { result += `${g.Gemeentenaam} ${numFormat(g.infected[i])} cases\n`; }) return result; }); // .attr("r", d => radius(+d.Aantal)); // hex // .selectAll("title") // .text( // d => `${d.Gemeente}: ${numFormat(d.Aantal)} cases` // ); } }); }32:[] 2f:{"title":"Netherlands Coronavirus Daily Cases Hexbin Map (COVID-19)","cells":[{"id":0,"value":"md`# Netherlands Coronavirus Daily Cases Hexbin Map (COVID-19)\n\nEvery morning, the Dutch government publishes daily counts of confirmed coronavirus cases in each Municipality. This map is based on those numbers.\n\n*Data Source: [RIVM - Rijksinstituut voor volksgezondheid en milieu](https://www.volksgezondheidenzorg.info/onderwerp/infectieziekten/regionaal-internationaal/coronavirus-covid-19) *`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"viewof day = Scrubber(dates.slice(0, chart_data_gemeentes.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":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"map.update(index)","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"w = Math.min(width, 700)","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"h = Math.round(w * 1.2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"maxLegend = Math.ceil(max_infection_rate / magnitude) * magnitude","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"magnitude = toMagnitude(max_infection_rate)","pinned":false,"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":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"mutable index = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"{\n mutable index = dates.indexOf(day);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"radius = d3\n .scaleSqrt()\n .domain([0, maxRadius])\n .range([0, maxRadius])","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"colorScale = d3\n .scaleSqrt()\n .domain([0, max_infection_rate])\n .range([`hsla(0, 0%, 100%, 0.5)`, `hsla(240, 100%, 50%, 0.5)`])","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"delay = 750","pinned":false,"hidden":false,"mode":"ojs"},{"id":1385,"value":"max_infection_rate = d3.max(hexbinned_data, d => d3.max(d.infection_rate))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1290,"value":"hexbinned_data = hexbin(chart_data_gemeentes).map(\n function(g) { \n var infected = new Array(dates.length).fill(0);\n var infection_rate = new Array(dates.length).fill(0);\n var totaal_inwoners = d3.sum(g, h => h.Inwonertal);\n \n dates.forEach(function(d, i) { \n infected[i] += d3.sum(g, function(h) {\n return h.infected[i];\n }) \n infection_rate[i] += d3.sum(g, function(h) {\n return h.infected[i] / totaal_inwoners;\n })\n });\n \n return {\n x: g.x,\n y: g.y,\n gemeentes: g.filter(e => e.key != 'x'),\n totaal_inwoners: totaal_inwoners,\n infection_rate: infection_rate,\n infected: infected\n }\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"hexbin = d3.hexbin()\n .x(d => projection(d.coordinates)[0])\n .y(d => projection(d.coordinates)[1])\n .radius(hex_radius)\n .extent([[0, 0], [w, h]])\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1312,"value":"hex_radius = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"midpoints = gemeentes.features.map(function(d) {\n return {\n name: d.properties.statnaam,\n id: d.id,\n coordinates: d.point\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"getMidpoint = function(geometry) { \n var bounds = getBounds(geometry);\n\n return [\n (bounds[1][0] + bounds[0][0]) / 2,\n (bounds[1][1] + bounds[0][1]) / 2\n ]; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":" getBounds= function(geometry) {\n var x0 = Infinity;\n var y0 = Infinity;\n var x1 = -Infinity;\n var y1 = -Infinity;\n \n if (geometry.type == \"Polygon\") { \n geometry.coordinates[0].forEach(function(point){\n if (point[0] < x0) x0 = point[0];\n if (point[0] > x1) x1 = point[0];\n if (point[1] < y0) y0 = point[1];\n if (point[1] > y1) y1 = point[1];\n }); \n } else {\n geometry.coordinates.forEach(function(multipolygon){\n multipolygon.forEach(function(polygon){\n polygon.forEach(function(point){\n if (point[0] < x0) x0 = point[0];\n if (point[0] > x1) x1 = point[0];\n if (point[1] < y0) y0 = point[1];\n if (point[1] > y1) y1 = point[1];\n }); \n });\n });\n }\n\n return [\n [x0, y0],\n [x1, y1]\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"dsvParser = d3dsv.dsvFormat(\";\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"breakpoint = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"maxRadius = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"startDate = new Date(\"2020-02-27T00:00:00Z\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"dateStrings = dates.map(d =>\n d.toISOString()\n .replace(/([0-9]*)-([0-9]*)-([0-9]*)/g, '$3$2$1')\n .split(\"T\")[0]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"dates = dateRange(startDate, new Date())","pinned":false,"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":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"alleGemeentes = topojson.feature(nederland, nederland.objects.gemeente_2020)","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"gemeentes = ({\n ...alleGemeentes,\n \n features: alleGemeentes.features.filter(\n f => d3.min(f.geometry.coordinates.flat(10).filter(d => d > 30)) > 36\n ).map(function(d) {\n return {\n ...d,\n \n id: +d.id.replace(/GM[0]*/g, ''),\n point: getMidpoint(d.geometry)\n }})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1380,"value":"chart_data_max2 = d3.max(chart_data_gemeentes, function(gemeente) {\n return d3.max(gemeente.infected);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1379,"value":"chart_data_gemeentes = chart_data.filter(d => d.Gemeentenaam != \"Onbekend\").filter(d => d.Gemeentenaam != \"Totaal\").filter(d => d.Gemeentenaam != \"Toename per dag absoluut\").filter(d => d.Gemeentenaam != \"Stijgingspercentage\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1378,"value":"chart_data = covid_data.map(function(d) { \n var result = {};\n var midpoints_index = midpoints.findIndex(e => e.id == d.Gemeentecode);\n \n result.Gemeentecode = d.Gemeentecode;\n result.Gemeentenaam = d.Gemeentenaam;\n if (midpoints[midpoints_index]) {\n result.coordinates = midpoints[midpoints_index].coordinates;\n }\n result.Groot = d['Grote gemeente'];\n result.Inwonertal = +d.Inwonertal;\n result.Provincienaam = d.Provincienaam;\n result.infected = [];\n \n dates.forEach(function(date, i) {\n var stringdate = date.toISOString().split(\"T\")[0];\n \n result.infected[i] = +d[stringdate]\n })\n \n return result;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1377,"value":"covid_data = dsvParserComma.parse(parsable_csv)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1376,"value":"dsvParserComma = d3dsv.dsvFormat(\",\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1375,"value":"parsable_csv = {\n const res = await fetch(spreadsheet_url);\n const source = await res.text();\n \n var lines = source.split('\\n');\n lines.splice(0,1);\n var newtext = lines.join('\\n');\n \n newtext = newtext.replace(/^[,]*$/mg, '')\n .replace(/^,/mg, '')\n .replace(/GM[0]*/mg, '')\n .replace(/COVID ([0-9]*)-([0-9]*)/mg, '2020-$2-$1')\n .replace(/(?:\\\\[rn]|[\\r]+)+/mg, '');\n return newtext;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1374,"value":"spreadsheet_url = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTFVFuAXZdTZ2AhvcgfyaqzrRJHTUOC1ePcZGYZpH-b4sGZuhtKY5J3KyrkKCArtVLp41ie4OdcP0V5/pub?gid=933648743&single=true&output=csv'","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"numFormat = d3.format(\",\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"projection = d3\n .geoAlbers()\n .rotate([-8, 0])\n .parallels([40, 50])\n .fitExtent([[0, 0], [w, h]], gemeentes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1134,"value":"cities = [{\"name\":\"Enschede\"},{\"name\":\"Nijmegen\"},{\"name\":\"'s-Gravenhage\"},{\"name\":\"Breda\"},{\"name\":\"Maastricht\"},{\"name\":\"Leeuwarden\"},{\"name\":\"Groningen\"},{\"name\":\"Utrecht\"},{\"name\":\"Amsterdam\"},{\"name\":\"Rotterdam\"},{\"name\":\"Tilburg\"},{\"name\":\"'s-Hertogenbosch\"},{\"name\":\"Eindhoven\"}].map(function(d) {\n return {\n name: d.name,\n coordinates: midpoints[midpoints.findIndex(e => e.name == d.name)].coordinates\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"nederland = await fetchJSONURLWithProxy(\"https://cartomap.github.io/nl/wgs84/gemeente_2020.topojson\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"fetchCSVURLWithProxy = await function(url) {\n return fetch(`https://observable-cors.glitch.me/` + \n `${url}`, {\n headers: {\n Accept: '*/*',\n 'Accept-Language': 'en-US,en;q=0.5',\n Referer: 'https://observablehq.com/@randomfractals/fetch',\n },\n //credentials: 'include',\n cache: 'no-store',\n mode: 'cors',\n redirect: 'follow',\n }).then(response => {\n if (!response.ok) throw new Error(response.status);\n return response;\n }).catch(error => {return error;})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":786,"value":"fetchJSONURLWithProxy = await function(url) {\n return fetch(`${url}`, {\n headers: {\n Accept: '*/*',\n 'Accept-Language': 'en-US,en;q=0.5',\n Referer: 'https://observablehq.com/@randomfractals/fetch',\n },\n //credentials: 'include',\n cache: 'no-store',\n mode: 'cors',\n redirect: 'follow',\n }).then(response => {\n if (!response.ok) throw new Error(response.status);\n return response.json();\n }).catch(error => {return error;})\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":824,"value":"d3dsv = require(\"d3-dsv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\", \"d3-hexbin@0.2\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}