What is Charming?How is Charming?Why Charming?Charming GalleryBeesandbombsFlow NoiseWhite NoiseCar ArrivingMaurer RoseRegular NumbersRandom GrowthASCII TextNormal Distribution CirclesClover 🌟Bouncing BallFollow MeBatonSine WaveBatonsSnake WaveSpringOscillatesOscillateDoneMoverDraggable SpringCar SeekingCar WanderingCar FlowingFalling Polygons, Matter.jsFalling Boxes, Matter.jsFailling Grid, ToxiclibsjsClusterClustersCluster, ShapesCluster, RepellerLiquidFalling BallsAttractorDancing BallsAttractorsWaltz of Circles, CanvasGenuary#16: Draw 10000 of something.Waltz of Circles, WebGLBarShader ArtCharacter MatrixGenuary#9: ASCII.Bar Chart, TerminalCharming StatsCharming SharedRainbow DragonBroken HeartGenuary#17: Inspired by Islamic art.Genuary#1: Particles, lots of them.Genuary#18: Bauhaus.Genuary#19: Flocking.Genuary#25: Recreate Image with Code.
Bell Curve
{
let width = 600,
height = 200,
X = cm.range(width, -3, 3),
sigma = 0.5,
step = 0.01;
function update(app) {
const curve = bellCurve(0, sigma);
app.append(cm.clear, { fill: "#fff" });
app
.data(X)
.append(cm.line, {
x: (_, i) => i,
y: (d) => curve(d),
stroke: "black",
strokeWidth: 2
})
.transform(cm.mapPosition, {
domainY: [0, 1],
padding: 5,
reverseY: true
});
sigma += step;
if (sigma > 2 || sigma < 0.3) step *= -1;
}
function dispose(app) {
invalidation.then(() => app.dispose());
}
return cm
.app({ width: 600, height: 200 })
.on("update", update)
.call(dispose)
.start()
.node();
}
function bellCurve(mu = 0, sigma = 1) {
const sq2pi = Math.sqrt(cm.TWO_PI);
const sdsq = sigma * sigma;
return (x) => {
const xmsq = -1 * (x - mu) * (x - mu);
return (1 / (sigma * sq2pi)) * Math.pow(Math.E, xmsq / sdsq);
};
}
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.
