Published
Edited
Jul 3, 2022
1 fork
3 stars
Insert cell
Insert cell
blur = require("array-blur@1").then((d) => d.blur)
Insert cell
Insert cell
{
const b = blur();
b.value((d) => d.value); // specify an accessor
return b([{ value: 1 }, { value: 2 }, { value: -4 }, { value: 0 }]);
}
Insert cell
Insert cell
Insert cell
pixels = Array.from({ length: 20 }, () =>
Array.from({ length: 40 }, (d, i) => (i / 20) * Math.random())
)
Insert cell
Insert cell
blurred = blur().radius(1).width(40)(pixels.flat())
Insert cell
Insert cell
Insert cell
walk = d3.cumsum({ length: 1001 }, d3.randomNormal())
Insert cell
Plot.plot({
marks: [
Plot.lineY(walk, { strokeWidth: 0.5 }),
Plot.lineY(
walk,
Plot.mapY(blur().radius(20), { y: (d) => d, stroke: "red" })
)
]
})
Insert cell
Insert cell
d3 = require("d3@7", "array-blur@1")
Insert cell
d3.blur()([1, 2, 3])
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