2d:null 2e:["$","title",null,{"children":"Belgium COVID Spike Map | Maarten | Observable"}] 33:T125a,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, 975, 800]); svg.append("path") .datum(topojson.feature(belgium, belgium.objects.provinces)) .attr("fill", "#ffffff") .attr("d", path); svg.append("path") .datum(topojson.mesh(belgium, belgium.objects.municipalities, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "#eeeeee") .attr("stroke-linejoin", "round") .attr("d", path); svg.append("path") .datum(topojson.feature(belgium, belgium.objects.provinces)) .attr("stroke", "#cccccc") .attr("fill-opacity", 0) .attr("stroke-width", 1) .attr("stroke-opacity", 1) .attr("d", path); const legend = svg.append("g") .attr("fill", "#333333") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("g") //.data(spikeLength.ticks(4).slice(1)) .data([100, 200, 500, 1000, 2000, 3000]) .join("g") .attr("transform", (d, i) => `translate(${(i + 1) * 22},590)`); legend.append("path") .attr("fill", "#333333") .attr("fill-opacity", 0.1) .attr("stroke", d => "#333333") .attr("d", d => spike(spikeLength(d), 8)); legend.append("text") .attr("dy", "1.3em") .text(spikeLength.tickFormat(4, ".1s")); svg.append("text") .attr("x", 78) .attr("y", 616) .style("text-anchor", "middle") .text("Cases/100k inhabitants") .attr("font-family", "sans-serif") .attr("font-size", 10); const colorLegend = svg.append("g") .attr("fill", "#777") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("g") .data([-51, -50, -25, 0, 25, 50]) .join("g") .attr("transform", (d, i) => `translate(${(i + 1) * 22},680)`); colorLegend.append("path") .attr("fill", d => spikeColor(d)) .attr("fill-opacity", 0.1) .attr("stroke", d => spikeColor(d)) .attr("d", d => spike(spikeLength(500), 8)); colorLegend.append("text") .attr("dy", "1.3em") .text(d => d == -51 ? "" : d3.format("+")(d)) .attr("transform", "translate(-12,0)"); svg.append("text") .attr("x", 78) .attr("y", 706) .style("text-anchor", "middle") .text("Week on week trend (%)") .attr("font-family", "sans-serif") .attr("font-size", 10); const popLegend = svg.append("g") .attr("fill", "#333333") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("g") .data([10000, 25000, 50000, 100000, 250000, 500000]) .join("g") .attr("transform", (d, i) => `translate(${20 + (i + 5)*10*(i*0.3)},760)`); popLegend.append("path") .attr("fill", "#333333") .attr("fill-opacity", 0.1) .attr("stroke", "#333333") .attr("d", d => spike(spikeLength(500), spikeWidth(d))); popLegend.append("text") .attr("dy", "1.3em") .text(spikeLength.tickFormat(4, ".0s")); svg.append("text") .attr("x", 85) .attr("y", 785) .style("text-anchor", "middle") .text("Population") .attr("font-family", "sans-serif") .attr("font-size", 10); svg.append("g") .attr("fill-opacity", 0.1) .selectAll("path") .data(dataBelgiumJoined .filter(d => d.position) .sort((a, b) => d3.ascending(a.position[1], b.position[1]) || d3.ascending(a.position[0], b.position[0]))) .join("path") .attr("fill", d => spikeColor(d.trend)) .attr("stroke", d => spikeColor(d.trend)) .attr("stroke-width", 1) .attr("transform", d => `translate(${d.position})`) .attr("d", d => spike(spikeLength(d.cases_100k), spikeWidth(d.pop))) .on('mouseover', function (event, d, i) { tooltip .html( `

${d.municipality}

${d.cases_100k} cases/100k/7 days

${d.cases} cases in last 7 days

${d.cases_previous} cases week before that

Week on week trend: ${d3.format("+")(d.trend)}%` ) .style("background", spikeColor(d.trend)) .style("color", Math.abs(d.trend) > 25 ? "#ffffff" : "#000000") .style('visibility', 'visible'); }) .on('mousemove', function (event) { tooltip .style('top', event.pageY - 10 + 'px') .style('left', event.pageX + 10 + 'px'); }) .on('mouseout', function () { tooltip.html(``).style('visibility', 'hidden'); }); return svg.node(); }34:[{"id":"b64d55dacb0fa8031000261a733245fce32e8e554a263989d2fa810c91d4c90c6449789c5faafdacba60e553ffa9f4731422b674b079c4d9896860e802fec009","href":"https://static.observableusercontent.com/files/b64d55dacb0fa8031000261a733245fce32e8e554a263989d2fa810c91d4c90c6449789c5faafdacba60e553ffa9f4731422b674b079c4d9896860e802fec009","name":"centroids-pop.csv","type":"text/csv","lastModified":1608027577253.215,"size":33612}] 31:{"id":"f89619bc2768c1f4","slug":"belgium-covid-spike-map","title":"Belgium COVID Spike Map","thumbnail":"f5a6e7a0b7ea8c9d20a22394b60510b74d410c62598e5ca98451efe8b2c14248","access_level":"public","create_time":"$D2020-12-15T09:37:40.804Z","update_time":"$D2020-12-18T13:23:16.751Z","view_time":null,"first_public_time":"$D2020-12-17T11:55:29.680Z","has_unpublished_edits":null,"fork":true,"stars":9,"starred":false,"owner":{"type":"team","id":"5b869bee250b85a6","login":"maartenzam","name":"Maarten","avatar_url":"https://avatars-next.observableusercontent.com/df616a0b858eb23fc85baee7b8a462c7b008356c3224dacf6f06166b630ed016","tier":"starter_2024"},"version":565,"publish_version":565,"role":null,"authored":false,"authors":[{"type":"individual","id":"0b5ed3b6e61074ca","login":"maartenzam","name":"Maarten","avatar_url":"https://avatars-next.observableusercontent.com/df616a0b858eb23fc85baee7b8a462c7b008356c3224dacf6f06166b630ed016","tier":null}],"members":[{"type":"individual","id":"0b5ed3b6e61074ca","login":"maartenzam","name":"Maarten","avatar_url":"https://avatars-next.observableusercontent.com/df616a0b858eb23fc85baee7b8a462c7b008356c3224dacf6f06166b630ed016","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Belgium COVID Spike Map","cells":[{"id":0,"value":"md`# Belgium COVID Spike Map\n\nLast 7 day cases per 100.000 inhabitants and week on week trend for Belgian municipalities. Data: [Sciensano](https://epistat.wiv-isp.be/covid/)\n\nBased on [Spike Map](https://observablehq.com/@d3/spike-map) by [Mike Bostock](https://observablehq.com/@mbostock) and [Geografische spreiding sinds april](https://observablehq.com/@bmesuere/geografische-spreiding-sinds-april) by [Bart Mesuere](https://observablehq.com/@bmesuere)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"viewof d1 = date({\n title: \"Pick a date\", \n min: \"2020-04-17\",\n max: latest,\n value: latest,\n description: 'Picked date is the end date of the 7 day period, data are reported with a 4 day delay'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"tooltip = d3\n .select('body')\n .append('div')\n .attr('class', 'd3-tooltip')\n .style('position', 'absolute')\n .style('z-index', '10')\n .style('visibility', 'visible')\n .style('padding', '4px')\n .style('background', 'rgba(255,255,255,0.9)')\n .style('border-radius', '2px')\n .style('color', '#ffffff')\n .style(\"font-family\", \"sans-serif\")\n .style(\"font-size\", \"10px\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"dataBelgiumJoined = dataBelgium.map(muni => {\n let cases = by_muni.filter(d => d.NIS5 == muni.NIS5)[0].CASES;\n let casesPrevious = by_muni_previous.filter(d => d.NIS5 == muni.NIS5)[0].CASES;\n let pop = +muni.pop;\n let cases_100k = Math.round(cases/muni.pop*100000);\n let cases_100k_previous = Math.round(casesPrevious/muni.pop*100000);\n let trend = Math.round((cases_100k - cases_100k_previous)/cases_100k_previous*100)\n return {\n NIS5: muni.NIS5,\n municipality: muni.municipality,\n pop: +muni.pop,\n cases: cases,\n cases_previous: casesPrevious,\n cases_100k: cases_100k,\n trend: casesPrevious != 0 ? trend : NaN,\n position: projection([+muni.lng, +muni.lat])\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"dataBelgium = FileAttachment(\"centroids-pop.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"spikeColor = d3.scaleThreshold()\n .domain([-50, -25, 0, 25, 50])\n .range(['#c51b7d','#e9a3c9','#fde0ef','#e6f5d0','#a1d76a','#4d9221'].reverse())\n//.range(['#002a80', '#4a67c8', '#98acf4', '#f891ad', '#c34060', '#710022'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"spikeLength = d3.scaleLinear([0, 3000], [0, 200])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"spikeWidth = d3.scaleLinear()\n.domain([0, d3.max(dataBelgiumJoined, d => d.pop)])\n.range([5, 40])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"projection = d3.geoMercator()\n .fitSize([975,800], topojson.feature(belgium, belgium.objects.provinces))\n\t//.center([4.3,50.9])\n\t//.scale(14000)\n\t//.translate([width / 2, 610 / 2]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"spike = (length, spikeWidth) => `M${-spikeWidth / 2},0L0,${-length}L${spikeWidth / 2},0`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"format = d3.format(\",.0f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"by_muni_previous = by_muni_last_week.map(m => {\n const r = Object.assign({}, m);\n r.CASES = m.CASES - by_muni_previous_week.find(l => l.NIS5 === m.NIS5).CASES;\n if (isNaN(r.CASES)) { r.CASES = 0 }\n return r;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"by_muni = by_muni_now.map(m => {\n const r = Object.assign({}, m);\n r.CASES = m.CASES - by_muni_last_week.find(l => l.NIS5 === m.NIS5).CASES;\n if (isNaN(r.CASES)) { r.CASES = 0 }\n return r;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"by_muni_previous_week = (await fetch(`https://epistat.sciensano.be/Data/${previous_week_url}/COVID19BE_CASES_MUNI_CUM_${previous_week_url}.json`)).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"by_muni_last_week = (await fetch(`https://epistat.sciensano.be/Data/${last_week_url}/COVID19BE_CASES_MUNI_CUM_${last_week_url}.json`)).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"by_muni_now = (await fetch(`https://epistat.sciensano.be/Data/${d3.timeFormat(\"%Y%m%d\")(Date.parse(d1))}/COVID19BE_CASES_MUNI_CUM_${d3.timeFormat(\"%Y%m%d\")(Date.parse(d1))}.json`)).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"previous_week_url = d3.timeFormat(\"%Y%m%d\")(Date.parse(previous_week))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"previous_week = d3.timeFormat(\"%Y-%m-%d\")(d3.timeDay.offset(Date.parse(d1), -14))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"last_week_url = d3.timeFormat(\"%Y%m%d\")(Date.parse(last_week))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"last_week = d3.timeFormat(\"%Y-%m-%d\")(d3.timeDay.offset(Date.parse(d1), -7))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"latest = d3.timeFormat(\"%Y-%m-%d\")(d3.timeDay.offset(Date.now(),-4))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"belgium = (await fetch(\"https://raw.githubusercontent.com/bmesuere/belgium-topojson/master/belgium.json\")).json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"import {date} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"