chart = { const container = d3.create("div") .style("content", '') .style("clear", "both") .style("display", "table") const stateDivs = container.selectAll("div") .data(nestedData) .join("div") .html(d => `

${stateAbbrMap[d.key]}

${addCommas(last(d.values).totalTestResults)} tests (${Math.round((last(d.values).totalTestResults / populationsMap[stateAbbrMap[d.key]]) * 10000) / 100}% of population)

${addCommas(last(d.values).positive)} positives (${Math.round(last(d.values).positive / last(d.values).totalTestResults * 100)}% of tested)

${addCommas(last(d.values).death)} deaths (${Math.round((last(d.values).death / populationsMap[stateAbbrMap[d.key]]) * 1000000) / 10000}% of population)

`) .style("float", "left") .style("margin", "4px") const stateSvgs = stateDivs.append("svg") .attr("viewBox", [0, 0, width, height]) .attr("height", height) .attr("width", width) .style("border", "1px solid black") .style("overflow", "visible"); stateSvgs.append("g") .call(xAxis); stateSvgs.append("g") .call(yAxis); if (indicators.includes("Deaths")) { const deathLineGroup = stateSvgs.append("g") .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .append("path") .style("mix-blend-mode", "multiply") .attr("d", d => line("death")(d.values)); } if (indicators.includes("Positives")) { const positiveLineGroup = stateSvgs.append("g") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .append("path") .style("mix-blend-mode", "multiply") .attr("d", d => line("positive")(d.values)); } if (indicators.includes("Tests")) { const totalTestResultsLineGroup = stateSvgs.append("g") .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .append("path") .style("mix-blend-mode", "multiply") .attr("d", d => line("totalTestResults")(d.values)); } if (indicators.includes("Hospitalizations")) { const hospitalizedLineGroup = stateSvgs.append("g") .attr("fill", "none") .attr("stroke", "orange") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .append("path") .style("mix-blend-mode", "multiply") .attr("d", d => line("hospitalized")(d.values)); } return container.node(); }