chart = {
const svg = d3.create("svg")
.style("display", "block")
.attr("viewBox", [0, 0, width, height]);
const session = svg.append("g")
.attr("fill", "steelblue")
.selectAll("g")
.data(data)
.join("g")
.on("mouseover", (event) => event.currentTarget.style.fill = "red")
.on("mouseout", (event) => event.currentTarget.style.fill = "");
session.selectAll("rect")
.data(dayslice)
.join("rect")
.attr("x", ([start, end]) => x(day(start)))
.attr("width", ([start, end]) => x(day.offset(day(start))) - x(day(start)))
.attr("y", ([start, end]) => y(hours(start)))
.attr("height", ([start, end]) => y(hours(end) || 24) - y(hours(start)));
session.append("title")
.text(([start, end]) => `${start.toLocaleString("en", dateFormat)} →
${end.toLocaleString("en", dateFormat)}`);
svg.append("g")
.attr("pointer-events", "none")
.call(yAxis);
svg.append("g")
.attr("pointer-events", "none")
.call(xAxis);
return svg.node();
}