Creative Technologist, Data Visualizer and HCI researcher.
{
const canvas = d3.create("canvas").node();
const ctx = canvas.getContext("2d");
canvas.width = w;
canvas.height = h;
while (true) {
loop(ctx);
yield canvas;
}
}
loop = (ctx) => {
let passedTime = new Date().getTime();
let objectAngle = passedTime / 1000;
objectAngle *= 2 * Math.PI;
objectAngle *= 0.5;
ctx.clearRect(0, 0, w, h);
for (let i = 0; i < 360; i += 3) {
let angle = (i / 180) * Math.PI;
let radius1 = 100 * Math.sin(angle * 6 + objectAngle) + 350;
let width = 20 * Math.sin(objectAngle) + 20;
let radius2 = width * Math.sin(angle * 8 + objectAngle) + width;
let x = radius1 * Math.cos(angle) + w / 2;
let y = radius1 * Math.sin(angle) + h / 2;
ctx.beginPath();
ctx.arc(x, y, radius2, 0, Math.PI * 2, true);
ctx.stroke();
}
}
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.
