chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const tooltip = new Tooltip();
const defs = svg.append("defs");
const pattern = defs.append("pattern")
.attr("id", "dots")
.attr("x", 0)
.attr("y", 0)
.attr("width", 3)
.attr("height", 3)
.attr("patternUnits", "userSpaceOnUse");
pattern.append("circle")
.attr("cx", .5)
.attr("cy", .5)
.attr("r", .5)
.attr("fill", "black");
pattern.append("circle")
.attr("cx", 2)
.attr("cy", 2)
.attr("r", .5)
.attr("fill", "black");
svg.append("g")
.attr("fill", "url(#dots)")
.attr("stroke", "#5D5B5B")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => x(d.date))
.attr("y", d => y(d.duration))
.attr("height", d => y(0) - y(d.duration))
.attr("width", barWidth)
.on("mouseover", (e, d) => tooltip.show(e, d))
.on("mousemove", (e, d) => tooltip.move(e, d))
.on("mouseout", () => tooltip.hide());
svg.append("path")
.datum(rollingAvg(6))
.attr("fill", "none")
.attr("stroke", "#ffffff")
.attr("stroke-width", 6)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", line);
svg.append("path")
.datum(rollingAvg(6))
.attr("fill", "none")
.attr("stroke", "#5D5B5B")
.attr("stroke-width", 2)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-dasharray", "2,4")
.attr("d", line);
svg.append("path")
.datum(rollingAvg(12))
.attr("fill", "none")
.attr("stroke", "#ffffff")
.attr("stroke-width", 6)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", line);
svg.append("path")
.datum(rollingAvg(12))
.attr("fill", "none")
.attr("stroke", "#5D5B5B")
.attr("stroke-width", 2)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", line);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append(() => tooltip.node);
return svg.node();
}