News and graphics at @ClimateLab, a project of @PostGraphics.
Public
Edited
Nov 27, 2023
{
const svg = d3.create("svg")
.attr("width", width)
.attr("height", chartheight + radius * 2);
const g = svg.append("g")
.attr("transform", `translate(${[ radius, radius ]})`);
g.selectAll("polygon")
.data(voronoi)
.join("polygon")
.attr("fill", d => z(d.area))
.attr("points", d => d)
.attr("stroke", d => z(d.area));
if (showpoints){
g.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => x(d[0]))
.attr("cy", d => y(d[1]))
.attr("r", radius);
}
return svg.node();
}
radius = 1
chartwidth = width - radius * 2
chartheight = 600
x = d3.scaleLinear(d3.extent(data, d => d[0]), [0, chartwidth])
y = d3.scaleLinear(d3.extent(data, d => d[1]), [chartheight, 0])
z = d3.scaleSequentialLog()
.domain(d3.extent(voronoi, d => d.area))
.interpolator(d3[`interpolate${interpolator}`])
rx = d3.randomNormal()
ry = d3.randomNormal()
data = {
refresh;
return Array.from({ length: N }).map(_ => [ rx(), ry() ])
}
voronoi = [...d3.Delaunay
.from(data.map(([dx, dy]) => [x(dx), y(dy)]))
.voronoi([0, 0, chartwidth, chartheight])
.cellPolygons()]
.map(d => (d.area = -d3.polygonArea(d), d))
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.
