chart = {
const xAxis = d3
.axisBottom()
.scale(xScale)
.tickFormat(d3.timeFormat("%Y-%m-%d"));
const svg = d3.select(DOM.svg(width, height));
svg
.append("g")
.attr("class", "axis")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(xAxis);
const yAxis = d3.axisLeft().scale(yScale);
svg
.append("g")
.attr("class", "axis")
.attr("transform", `translate(${margin.left},0)`)
.call(yAxis);
const colors = {
added: "green",
updated: "orange",
deleted: "purple"
};
svg
.selectAll(".line")
.append("g")
.attr("class", "line")
.data(grouped)
.enter()
.append("path")
.attr("d", function (d) {
const [key, values] = d;
return d3
.line()
.x((d) => xScale(d.date))
.y((d) => yScale(d.value))(values);
})
.attr("fill", "none")
.attr("stroke", (d) => colors[d[0]])
.attr("stroke-width", 2);
return svg.node();
}