Public
Edited
Apr 12
energySources = [
{ name: "Fuelwood", color: "#A0522D", weight: 0.4 },
{ name: "Oil", color: "#37474F", weight: 0.6 },
{ name: "Coal", color: "#212121", weight: 0.3 },
{ name: "Natural Gas", color: "#80DEEA", weight: 0.7 },
{ name: "Electricity", color: "#00A9E0", weight: 0.8 },
{ name: "Wind and Water", color: "#8BC34A", weight: 0.2 }
]
points = energySources.map(d => ({
...d,
x: Math.random(),
y: Math.random()
}))
canvas = {
const width = 800, height = 600;
const context = DOM.context2d(width, height);
context.clearRect(0, 0, width, height);
const voronoi = d3.Delaunay
.from(points, d => d.x * width, d => d.y * height)
.voronoi([0, 0, width, height]);
for (let i = 0; i < points.length; i++) {
context.beginPath();
voronoi.renderCell(i, context);
context.fillStyle = points[i].color;
context.fill();
const cell = voronoi.cellPolygon(i);
if (!cell) continue;
const cx = points[i].x * width;
const cy = points[i].y * height;
const dotCount = Math.floor(points[i].weight * 2000);
for (let j = 0; j < dotCount; j++) {
const angle = Math.random() * 2 * Math.PI;
const radius = Math.random() * 30;
const px = cx + Math.cos(angle) * radius;
const py = cy + Math.sin(angle) * radius;
if (d3.polygonContains(cell, [px, py])) {
context.fillStyle = "rgba(255,255,255,0.5)";
context.beginPath();
context.arc(px, py, 0.8, 0, 2 * Math.PI);
context.fill();
}
}
}
return context.canvas;
}
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.
