{
replay;
const width = 600,
height = 200,
x = (d) => d.r * Math.sin(d.angle),
y = (d) => d.r * Math.cos(d.angle),
pendulum = { angle: Math.PI / 4, aVelocity: 0, r: 150, damping: 0.995 };
function clear(app) {
app.append(cm.clear, { fill: cm.rgb(255) });
}
function draw(app) {
const group = app
.append(cm.group, { x: width / 2, y: 0 })
.datum(pendulum)
.process(cm.each, update);
group.append(cm.link, { x: 0, y: 0, x1: x, y1: y });
group.append(cm.circle, {
x,
y,
r: 20,
fill: cm.rgb(175),
stroke: cm.rgb(0)
});
}
function dispose(app) {
invalidation.then(() => app.dispose());
}
return cm
.app({ width, height })
.on("update", clear)
.on("update", draw)
.call(dispose)
.call(frame)
.start()
.node();
}
function update(d) {
const aAcceleration = -1 * (0.4 / d.r) * Math.sin(d.angle);
d.aVelocity += aAcceleration;
d.aVelocity *= d.damping;
d.angle += d.aVelocity;
}
function frame(app) {
app.node().style.border = "solid #000 1px";
}
cm = require("@charming-art/charming@0.0.6")
import { quote } from "@pearmini/charming-shared"
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.
