chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("g")
.call(grid);
const trail = svg.append("path")
.attr("fill", "none")
.attr("stroke", "gray")
.attr("stroke-width", 0.5)
.attr("stroke-miterlimit", 1);
const path = svg.append("path")
.attr("fill", "none")
.attr("stroke", "red")
.attr("stroke-miterlimit", 1)
.attr("stroke-width", 2);
const dot = svg.append("circle")
.attr("fill", "red")
.attr("r", 4);
return Object.assign(svg.node(), {
update(date) {
const i = bisectDate(data, d3.utcMonth.offset(date, -3), 0);
const j = bisectDate(data, date, 0);
trail.attr("d", line(data.slice(0, i)));
path.attr("d", line(data.slice(Math.max(0, i - 1), j)));
dot.attr("cx", x(data[j - 1].volume)).attr("cy", y(data[j - 1].extent));
}
});
}