100% organic
x = d3.randomUniform(settings.size)
y = d3.randomUniform(settings.size)
nPoints = d3.randomUniform(settings.minPoints, settings.maxPoints)
opacity = d3
.scaleLinear()
.domain([0, settings.size])
.range([1, 0])
fill = d3
.scaleLinear()
.domain([0, settings.size])
.range(["#FFD700", settings.background])
polygons = {
const polygons = [];
while (polygons.length < settings.count) {
const n = nPoints(),
poly = [];
while (poly.length < n) {
poly.push([x(), y()]);
}
const triangles = [
...d3.Delaunay.from([
...[[0, 0], [0, settings.size]],
...poly
]).trianglePolygons()
].map(d => {
const points = d.slice(0, -1),
[cx, cy] = d3.polygonCentroid(points);
return {
points,
center: [cx, cy],
opacity: opacity(cx)
};
});
polygons.push(triangles);
}
return polygons;
}
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.
