{
const height = 250;
const chart = d3
.create("svg")
.attr("width", width)
.attr("height", height);
yield chart.node();
const y = d3
.scaleLinear()
.domain([0, 12])
.range([10, height - 10]),
extent = d3.extent(data, d => d.date),
x = d3
.scaleLinear()
.domain(extent)
.range([10, width - 10]);
function X(pos) {
return x(pos < data.length ? data[pos].date : extent[1]);
}
const last = positions.length - 1,
l = positions[last];
chart
.append("line")
.attr("y2", height)
.attr("style", "stroke:#999; stroke-width:0.5; stroke-dasharray: 5 3;")
.attr("x1", X(l))
.attr("x2", X(l));
chart
.append("g")
.selectAll("line")
.data(d3.pairs(positions))
.join("line")
.attr("x1", d => X(d[0]))
.attr("x2", d => X(d[1]))
.attr("y1", (_, i) => y(i))
.attr("y2", (_, i) => y(i + 1))
.style("stroke", "#ccc");
chart
.append("g")
.selectAll("circle")
.data(positions.slice(0, -1))
.join("circle")
.attr("r", 2)
.attr("cx", d => X(d))
.attr("cy", (_, i) => y(i));
chart
.append("circle")
.attr("r", 3)
.attr("cx", X(l))
.attr("cy", y(last))
.style("fill", "red");
chart.on("pointermove click", function(event) {
const m = d3.pointer(event, this);
const date = x.invert(m[0]);
const i = bisect.right(data, date);
mutable lookup = new Date(date);
});
}