canvas = {
const context = DOM.context2d(width, height);
context.fillStyle = "hsl(216deg 100% 13%)";
context.fillRect(0, 0, width, height);
for (let index = 0; index < pointCount; ++index) {
const x = bufferedRandom(width, buffer);
const y = bufferedRandom(height, buffer);
drawCircle(context, x, y, radius, color)
}
return context.canvas;
}
drawCircle = (context, x, y, r, color) => {
context.beginPath()
context.arc(x, y, r, 0, 2 * Math.PI, false)
context.fillStyle = color
context.fill()
}
bufferedRandom = (max, buffer = 0) => buffer + Math.random() * (max - 2 * buffer)
color = 'goldenrod'
pointCount = 100
radius = 2
height = 400
buffer = 40
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.
