31:Tb64,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 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); bubble .data(data[i]) .call(b => { b.transition(t) .attr("fill", d => colorScale(+d.Aantal)) .attr("r", d => radius(+d.Aantal)); }) .select("title") .text( d => `${d.Gemeente}: ${numFormat(d.Aantal)} cases` ); } }); }32:[] 2f:{"title":"Netherlands Coronavirus Daily Cases Map (COVID-19)","cells":[{"id":0,"value":"md`# Netherlands Coronavirus Daily Cases Map (COVID-19)\n\nEvery morning, the Dutch government publishes daily counts of confirmed coronavirus cases in each Municipality. \n\n*Data Source: [RIVM - Rijksinstituut voor volksgezondheid en milieu](https://www.volksgezondheidenzorg.info/onderwerp/infectieziekten/regionaal-internationaal/coronavirus-covid-19) *\n\nBased on [Italy Coronavirus Daily Cases Map (COVID-19)](https://observablehq.com/@jashkenas/italy-coronavirus-daily-cases-map-covid-19) by Jeremy Ashkenas`","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":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(maxCases / magnitude) * magnitude","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"magnitude = toMagnitude(maxCases)","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, maxCases])\n .range([0, maxRadius])","pinned":false,"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":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"delay = 750","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"maxCases = d3.max(recentData.map(d => +d.Aantal))","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"data = responses_cleaned.map(r => dsvParser.parse(r, function(d) {\n var newid = +d.id.replace(/,/g, '.');\n var coordinates = midpoints[midpoints.findIndex(e => e.id == newid)].coordinates;\n \n return {\n id: newid, // lowercase and convert \"Year\" to Date\n Gemeente: d.Gemeente, // lowercase\n Midpoint: coordinates,\n Aantal: +d.Aantal.replace(/,/g, '.') // lowercase and convert \"Length\" to number\n };\n}))","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":158,"value":"recentData = data[data.length - 1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1320,"value":"responses_cleaned = responses.map(function(r) {\n if (!r[0].includes('!DOCTYPE html')) {\n return r[0];\n } else if (!r[1].includes('!DOCTYPE html')) {\n return r[1];\n } else {\n return r[2];\n }\n}).filter(r => !r.includes('!DOCTYPE html')).map(d => d.replace(/(?:\\\\[rn]|[\\r\\n]+)+/g, '\\n'));","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"responses = Promise.all(urls.map(\n function(u) {\n var v2 = soFetch(u+'_2.csv');\n var v1 = soFetch(u+'_1.csv');\n var v0 = soFetch(u+'.csv');\n return Promise.all([v2, v1, v0]);\n }))\n .then(responses =>\n Promise.all(responses.map(p =>\n Promise.all(p.filter(r => r.ok).map(r => r.text()))\n ))\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1212,"value":"soFetch = function soFetch(url) {\n return fetch(`https://observablehq-cors-server-with-caching.glitch.me/${encodeURI(url)}`);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"urls = dateStrings.map(d => baseUrl.replace(\"DATE\", d))","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"baseUrl = \"https://www.volksgezondheidenzorg.info/sites/default/files/map/detail_data/klik_coronaDATE\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"startDate = new Date(\"2020-03-03T00:00:00Z\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"dateStrings = dates.map(\n d =>\n d\n .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":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://observablehq-cors-server-with-caching.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\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}