{
const margin = { top: 10, right: 10, bottom: 30, left: 60 };
const width = 700 - margin.left - margin.right;
const height = 1500 - margin.top - margin.bottom;
const svg = d3
.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
const group = svg
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const yScale = d3
.scalePoint()
.domain([...statesWithAverages.keys()].sort())
.range([margin.top, height - margin.bottom]);
const yAxis = d3.axisLeft(yScale).tickSize(0).tickPadding(4);
group
.append("g")
.call(yAxis)
.call((g) => g.select(".domain").remove());
const stateGroups = group
.append("g")
.selectAll("g")
.data(yScale.domain())
.join("g")
.attr("transform", (d) => `translate(0,${yScale(d)})`);
const xDomain = d3.extent(covidData, (d) => d.date);
const xScale = d3.scaleTime().domain(xDomain).range([0, width]);
const overlap = 8;
const maxValue = d3.max(covidData, (d) => d.cases);
const zScale = d3
.scaleLinear()
.domain([0, maxValue])
.range([0, -(overlap * yScale.step())]);
const area = d3
.area()
.curve(d3.curveBasis)
.defined((d) => d)
.x((d) => xScale(d.date))
.y0(0)
.y1((d) => zScale(d.average));
const line = area.lineY1();
stateGroups
.append("path")
.datum((d) => statesWithAverages.get(d))
.attr("fill", "#ddd")
.attr("d", (d) => area(d));
stateGroups
.append("path")
.datum((d) => statesWithAverages.get(d))
.attr("fill", "none")
.attr("stroke", "black")
.attr("d", (d) => line(d));
return svg.node();
}