Published
Edited
Dec 10, 2019
1 fork
Insert cell
md`# path interpolation roughjs`
Insert cell
{
const svg = d3.create("svg").attr("height", 250).attr("width", 250).attr("viewBox", [0, 0, 250, 250]);
const myData = [
40, 80, 100, 200, 10, 30
];
const rc = rough.svg(svg);
svg.selectAll("g")
.data(myData)
.enter()
.append("g").attr("class", "roughElement")
.append( (d, i) => rc.rectangle(
10, i * 30 + 10, d, 20, {fillWeight: 0.7, fill: "steelblue", roughness: 2}));

var paths = [];
yield svg.node();
svg.selectAll("path")
.each( (d, i, nl) => nl[i].getAttribute("d").split(/[M]/).slice(1).forEach(p=>
paths.push({'d': "M" + p,
'style': nl[i].style})))
.remove();
svg.selectAll("g").remove();
var base = svg.selectAll("path")
.data(paths)
.enter();
base.filter( d => { console.log(d); return d.style.stroke != 'steelblue'})
.append("path")
.attr("d", d => d.d)
.style("stroke", d => d.style.stroke)
.style("fill", d => d.style.fill)
.style("stroke-width", d => d.style['stroke-width']);
base.filter( d => { console.log(d); return d.style.stroke == 'steelblue'})
.append("path")
.attr("d", d => d.d)
.style("stroke", d => d.style.stroke)
.style("fill", d => d.style.fill)
.style("stroke-width", d => d.style['stroke-width']);
svg.selectAll("path")
.attr("stroke-dasharray", (d, i, nl) => nl[i].getTotalLength() + " " + nl[i].getTotalLength())
.attr("stroke-dashoffset", (d, i, nl) => nl[i].getTotalLength())
.transition()
.delay( (d, i) => i * 25)
.duration(25)
.attr("stroke-dashoffset", 0);

yield svg.node();
}
Insert cell
d3 = require("d3@5");
Insert cell
rough = require("roughjs/dist/rough.umd.js");
Insert cell
pathint = require("d3-interpolate-path@2.1.1/build/d3-interpolate-path.min.js");
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