INSEE ParquetWord Tour: 40k words and their friendsHello, SageMath cellPoisson disk sampling functionsSubresource Integrity Hash GeneratorChatterjee correlationTagged bordersHeatmapSankey link paths (#91)Search with AccentsHello, EDTF!Canvas axisTernary binningTable ExtractorjszipScintillating symbolsDiscrete distribution inputHello, talismanSpatial interpolation: Voronoi & Blur (code)Canvas path blurPaths Delaunay hoverFill with strokeDruidJS
Animating a cardinal curve between control points
{
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const path = svg
.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 8)
.attr("d", line(data));
const pathB = svg
.append("path")
.attr("fill", "none")
.attr("stroke", "lime")
.attr("stroke-width", 2),
pathC = svg
.append("path")
.attr("fill", "none")
.attr("stroke", "orange")
.attr("stroke-width", 2);
const points = svg
.append("g")
.selectAll("circle")
.data(data.slice(0, Math.ceil(n + 1)))
.join("circle")
.attr("r", 4)
.style("stroke", "white")
.style("fill", "black")
.attr("cx", d => d[0])
.attr("cy", d => d[1]);
pathB.attr(
"d",
lineM(
[data[0]]
.concat(data)
.concat([data[data.length - 1]])
.slice(0, 2 + Math.floor(n + 1))
)
);
pathC.attr(
"d",
lineM(
[data[0]]
.concat(data)
.concat([data[data.length - 1]])
.slice(0, 2 + Math.ceil(n + 1))
)
);
// We're using two paths drawn with a *curveCardinalOpen* on the same data with fake ends.
// These paths are almost exactly superimposed with our *curveCardinal* path, so we can
// measure them and interpolate!
const lB = pathB.node().getTotalLength();
const lC = pathC.node().getTotalLength();
const l = lB + (lC - lB) * (n - Math.floor(n));
// debug
pathC.attr("stroke-dasharray", [0, lB, lC - lB]);
// finally, apply a stroke-dasharray of the correct length
path.attr("stroke-dasharray", [l, path.node().getTotalLength() - l]);
return svg.node();
}
function measureCardinal(points, n) {
points = [points[0]].concat(points).concat([points[points.length - 1]]);
const pathB = d3.create("svg:path"),
pathC = d3.create("svg:path");
return n === undefined ? l : l(n);
function l(n) {
pathB.attr("d", lineM(points.slice(0, 2 + Math.floor(n + 1)))),
pathC.attr("d", lineM(points.slice(0, 2 + Math.ceil(n + 1))));
const lB = pathB.node().getTotalLength();
const lC = pathC.node().getTotalLength();
return lB + (lC - lB) * (n - Math.floor(n));
}
}
{
const context = DOM.context2d(width, height);
const line = d3
.line()
.curve(d3.curveCardinal)
.context(context);
const l = measureCardinal(data);
context.lineWidth = 30;
let l0 = 0,
l1,
total = l(data.length);
for (let n = 0; n < data.length; n += .005) {
l1 = l(n);
context.beginPath();
line(data);
context.strokeStyle = d3.interpolateRainbow(n - Math.floor(n));
context.setLineDash([0, l0, l1 - l0, total]);
context.stroke();
yield context.canvas;
await visibility();
l0 = l1;
}
}
{
const context = DOM.context2d(width, height);
const line = d3
.line()
.curve(d3.curveCardinal)
.context(context);
const l = measureCardinal(data);
context.lineWidth = 0;
let l0 = 0,
l1,
total = l(data.length);
let steps = 0;
for (let n = 0; n < data.length; n += .005) {
l1 = l(n);
context.beginPath();
line(data);
context.lineWidth = context.lineWidth * (1 - 0.01) + 0.01 * 10 * (l1 - l0);
context.strokeStyle = d3.interpolateRainbow(n - Math.floor(n));
context.setLineDash([0, Math.max(l0 - 2, 0), 2 + l1 - l0, total]);
context.stroke();
if (steps++ % 50 === 0) yield context.canvas;
await visibility();
l0 = l1;
}
}
data = Array.from({ length: 25 }, () => [
40 + (width - 80) * Math.random(),
40 + (height - 80) * Math.random()
])
line = d3.line().curve(d3.curveCardinal)
lineM = d3.line().curve(d3.curveCardinalOpen)
d3 = require("d3@7")
import { Scrubber } from "@mbostock/scrubber"
height = 500
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.
