map = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, gridSize * 8]);
Object.keys(gridMap).forEach(state => {
const g = svg.append("g")
.attr("transform", `translate(${gridMap[state][0]*gridSize},${gridMap[state][1]*gridSize})`);
g.append("rect")
.attr("width", gridSize)
.attr("height", gridSize)
.attr("fill", "white");
const latest = dataMap[state][dataMap[state].length - 1];
g.append("text").text(`${state} ${Math.round(latest.percentVaccinated)}`)
.attr("x", gridSize / 2)
.attr("y", gridSize / 2)
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.attr('font-family', 'sans-serif')
.attr('font-size', 10);
g.append("path")
.datum(dataMap[state])
.attr("fill", "none")
.attr("stroke", colorCases)
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", lineCasesMini(state));
});
return svg.node();
}