{
const width = 640;
const height = 240;
let rotation = 0;
let angleVelocity = 0;
let angleAcceleration = 0.001;
const app = cm.render({
width,
height,
viewBox: [-width / 2, -height / 2, width, height],
loop: true,
draw: () => {
angleVelocity += angleAcceleration;
rotation += angleVelocity;
return [
SVG.g({
transform: `rotate(${rotation})`,
strokeWidth: 2,
stroke: rbga(0),
children: [
SVG.line({ x1: -60, y1: 0, x2: 60, y2: 0, stroke: "black" }),
SVG.circle({ cx: -60, cy: 0, r: 10, fill: rbga(127) }),
SVG.circle({ cx: 60, cy: 0, r: 10, fill: rbga(127) })
]
})
];
}
});
invalidation.then(() => app.dispose()); // Dispose ticker when rerunning the cell
return app.node();
}
function rbga(n) {
return `rgb(${n}, ${n}, ${n})`
}
SVG = cm.SVG
cm = require("charmingjs@0.0.12")
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.
