map = { const path = d3.geoPath(d3.geoMercator()); const svg = d3.select('body') .append('svg') .style("width", "100%") .style("height", size.height) .attr('viewBox', [0, -200, size.width, size.height]) const information = svg.append('g') information .append('text') .attr('x', 20) .attr('y', size.height-275) .attr('width', '200') .attr('height', 200) .text(`Confirmed: ${format(data.reduce((acc, curr) => acc + curr.confirmed, 0))}`) information .append('text') .attr('x', 20) .attr('y', size.height-250) .attr('width', '200') .attr('height', 200) .text(`Dead: ${format(data.reduce((acc, curr) => acc + curr.dead, 0))}`) information .append('text') .attr('x', 20) .attr('y', size.height-225) .attr('width', '200') .attr('height', 200) .text(`Cured: ${format(data.reduce((acc, curr) => acc + curr.cured, 0))}`) const worldGroup = svg.append( "g" ) const tooltip = d3.select("body").append("div") .attr("id", "choroplethTooltip"); worldGroup.selectAll("path") .data(topojson.feature(worldTopoJSON, { type: "GeometryCollection", geometries: worldTopoJSON.objects.countries.geometries.filter(c => c.id !== "010")}) .features) .join("path") .attr("fill", d => { const found = data.find(c => c.id === d.id); if (!found) return color(0); return color(found.confirmed); }) .attr("data-id", d => d.id) .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path) .on("mouseover", function(d) { const found = data.find(c => c.id === d.id) let content = `

${d.properties.name}

` if (found) { content = `

${found.name}

Confirmed: ${format(found.confirmed)}
Dead: ${format(found.dead)}
Cured: ${format(found.cured)}

` } tooltip.transition() .duration(200) .style("opacity", 1) tooltip.html(content) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d) { tooltip.transition() .duration(500) .style("opacity", 0); }) return html`${svg.node()}`; }