What is Charming?How is Charming?Why Charming?Charming GalleryBeesandbombsFlow NoiseWhite NoiseCar ArrivingRegular NumbersBell CurveRandom 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.
Maurer Rose
{
const n = 10;
const d = 17;
const angles = cm.range(360, 0, 360).map((d) => (d * Math.PI) / 180);
const app = cm.app({
width: 450,
height: 450
});
app
.data(angles)
.append(cm.line, {
x: (i) => Math.sin(n * d * i) * Math.cos(d * i),
y: (i) => Math.sin(n * d * i) * Math.sin(d * i),
stroke: "black",
strokeWidth: 0.33,
close: true
})
.transform(cm.mapPosition, {
domainX: [-1, 1],
domainY: [-1, 1]
});
app
.data(angles)
.append(cm.line, {
x: (i) => Math.sin(n * i) * Math.cos(i),
y: (i) => Math.sin(n * i) * Math.sin(i),
stroke: "red",
strokeWidth: 2.5,
close: true
})
.transform(cm.mapPosition, {
domainX: [-1, 1],
domainY: [-1, 1]
});
return app.render().node();
}
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.
