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(); }