{
const tooltip = new Tooltip();
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("path")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("stroke-miterlimit", 1)
.attr("d", line(data));
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("g")
.attr("fill", "none")
.attr("pointer-events", "all")
.selectAll("rect")
.data(d3.pairs(data))
.join("rect")
.attr("x", ([a, b]) => x(a.date))
.attr("height", height)
.attr("width", ([a, b]) => x(b.date) - x(a.date))
.on("mouseover", (event, [a]) => tooltip.show(a))
.on("mouseout", () => tooltip.hide());
svg.append(() => tooltip.node);
return svg.node();
}