Public
Edited
Nov 18, 2020
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
{ // d3 digest
const svg = d3.select(domEl).select('svg');
const getZOrderPath = vertices => {
let path = 'M0 0L0 0';
vertices.forEach(vert => path += 'L' + vert.join(','));
return path;
}
svg.selectAll('path')
.datum(zOrderData)
.attr('d', d => getZOrderPath(d.pathVertices))
.attr('transform', d => `scale(${d.cellWidth}) translate(${d.pathVertices[0][0] + .5}, ${d.pathVertices[0][1] + .5})`);

svg.select('path:not(.skeleton)')
.transition().duration(order * 1000).ease(d3.easePoly)
.attrTween('stroke-dasharray', function () {
const l = this.getTotalLength();
const i = d3.interpolateString("0," + l, l + "," + l);
return t => i(t);
});
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more