chart = {
replay;
const svg = d3.select(DOM.svg(width, heighthv));
const l = length(linehv(data));
const gradient = DOM.uid();
svg
.append("linearGradient")
.attr("id", gradient.id)
.attr("gradientUnits", "userSpaceOnUse")
.attr("x1", 0)
.attr("y1", heighthv - margin.bottom)
.attr("x2", 0)
.attr("y2", margin.top)
.selectAll("stop")
.data(d3.ticks(0, 1, 10))
.join("stop")
.attr("offset", d => d)
.attr("stop-color", color.interpolator());
svg.append("g").call(xAxishv);
svg.append("g").call(yAxishv);
svg
.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", gradient)
.attr("stroke-width", 2.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-dasharray", `0,${l}`)
.attr("d", linehv)
.transition()
.duration(20000)
.ease(d3.easeLinear)
.attr("stroke-dasharray", `${l},${l}`);
svg
.append("g")
.attr("fill", "white")
.attr("stroke", "black")
.attr("stroke-width", 2)
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => xhv(d.currentHour))
.attr("cy", d => yhv(d.bottleDifference / d.timeDifferenceHourCount))
.attr("r", 3);
const label = svg
.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.selectAll("g")
.data(data)
.join("g")
.attr(
"transform",
d =>
`translate(${xhv(d.currentHour)},${yhv(
d.bottleDifference / d.timeDifferenceHourCount
)})`
)
.attr("opacity", 0);
label
.append("text")
.text(d => d3.timeFormat("%d %b")(d.currentTime))
.call(halo);
var transitions = 97;
label
.transition()
.delay((d, i) => (length(line(data.slice(0, i + 1))) / l) * 800000)
.attr("opacity", 1)
.on('end', () => {
transitions--;
if (transitions == 0) {
label
.transition()
.delay((d, i) => (length(line(data.slice(0, i + 1))) / l) * 50000)
.attr("opacity", 0);
}
});
return svg.node();
}