Published
Edited
Sep 27, 2020
viewof circles = {
var width = 300
var height = 200
const context = DOM.context2d(width, height);
const canvas = context.canvas;
var radius = 2
// An assortment of randomly-positioned colorful circles.
const circles = canvas.value = [{x: 100, y: 100, r:60}, {x: 190, y: 100, r:30}, {x: 225, y: 100, r:5}];
// Whenever the circles move, redraw the canvas.
function render() {
context.clearRect(0, 0, width, height);
for (const {x, y, r} of circles) {
context.beginPath();
context.moveTo(x + radius, y);
context.arc(x, y, r, 0, 2 * Math.PI);
context.fill();
context.lineWidth = 2;
context.stroke();
}
}
render();
return 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.
