curve_diff = {
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height + 50)
.attr("text-anchor", "middle");
svg.node().update2 = sel => {
svg.selectAll("*").remove();
const curveData = totalData.filter(function(d) {
return d.state == sel;
});
const gLine = svg.append('g');
const gLine2 = svg.append('g');
const yLimits = d3.extent(curveData, d => +d.y);
const yScale = d3
.scaleLinear()
.domain(yLimits)
.range([height - margin.bottom, margin.top])
.nice();
const timeLimits = d3.extent(curveData, d => d.x);
const xScale = d3
.scaleTime()
.domain(timeLimits)
.range([margin.left, width - margin.right])
.nice();
const covidCasesLineGen = d3
.line()
.x(d => xScale(d.x))
.y(d => yScale(d.y));
const covidDeathLineGen = d3
.line()
.x(d => xScale(d.x))
.y(d => yScale(d.z));
gLine
.append("path")
.attr("stroke", "#944dff")
.datum(curveData)
.attr("fill", "none")
.attr("d", d => covidCasesLineGen(d));
gLine2
.append("path")
.attr("stroke", "red")
.datum(curveData)
.attr("d", d => covidDeathLineGen(d))
.attr("fill", "none");
const gx = svg
.append('g')
.attr('class', 'x-axis')
.attr('transform', 'translate(0,' + (height - margin.bottom) + ')');
const gy = svg
.append('g')
.attr('class', 'y-axis')
.attr('transform', 'translate(' + margin.left + ',0)');
function zoomed({ transform }) {
const zx = transform.rescaleX(xScale).interpolate(d3.interpolateRound);
const zy = transform.rescaleY(yScale).interpolate(d3.interpolateRound);
gLine.attr("transform", transform).attr("stroke-width", 1 / transform.k);
gLine2.attr("transform", transform).attr("stroke-width", 2 / transform.k);
gx.call(xAxi, zx);
gy.call(yAxi, zy);
}
const zoom = d3
.zoom()
.scaleExtent([0.5, 32])
.on("zoom", zoomed);
svg.call(zoom).call(zoom.transform, d3.zoomIdentity);
};
return svg.node();
}