coverAnim = {
const w = 1050
const h = 500
const x = d3.scaleLinear()
.domain([0, 6])
.range([0,w])
const y = d3.scaleLinear()
.domain([0, 0.36])
.range([h,0])
const line = d3.line()
.x(d => x(d.value))
.y(d => y(d.density))
const svg = d3.select("#cover-image")
.append("svg")
.attr("width", w)
.attr("height", h)
const path = svg.append("path")
.datum(data)
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "black")
.attr("class", "invertable")
.attr("stroke-width", 2)
const length = path.node().getTotalLength()
path
.attr("stroke-dasharray", length + " " + length)
.attr("stroke-dashoffset", length)
path
.transition()
.duration(2000)
.attr("stroke-dashoffset", 0)
const sleep = (milliseconds) => {
return new Promise(resolve => setTimeout(resolve, milliseconds))
}
function anim() {
path
.transition().duration(2000).attr("stroke-dashoffset", -length)
.transition().duration(0).attr("stroke-dashoffset", length)
.transition()
.duration(3000)
.attr("stroke-dashoffset", 0)
.on("end", () => sleep(2000).then(anim))
};
svg.on("click", anim);
return svg.node();
}