What is Charming?How is Charming?Why Charming?Charming GalleryBeesandbombsFlow NoiseWhite NoiseCar ArrivingMaurer RoseRegular 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.Charming 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.
Bar Chart, Terminal
{
const data = [1.9, 1.9, 1.6, 1.0, 0.4, 0.1];
// Dimensions.
const step = 3;
const marginX = 3;
const marginY = 3;
const plotWidth = 60;
const plotHeight = step * data.length;
const height = plotHeight + marginY * 2;
const width = plotWidth + marginX * 2;
const app = cm.app({
renderer: await cm.terminal(),
cols: width,
rows: height
});
// Bar Chart.
app
.append(cm.group, { x: marginX, y: marginY })
.data(data)
.append(barX, {
x: (d) => d,
y: (_, i) => i,
step: cm.constant(step),
width: cm.constant(plotWidth),
height: cm.constant(plotHeight),
title: cm.constant("Terminal Bar Chart")
});
// Annotation.
app.append(cm.text, {
x: marginX + plotWidth,
y: marginY + plotHeight,
fontSize: "large",
text: cm.figlet("2023"),
textBaseline: "bottom",
textAlign: "left"
});
return app.render().node();
}
function barX(
flow,
{
x: X,
y: Y,
width,
height,
step,
title,
colors = ["#CC4A6A", "#6EBD41", "#D6B152", "#56ADD3", "#AC5ADA", "#7DDEBB"]
}
) {
const [data] = flow.data();
const scaleX = d3.scaleLinear([0, d3.max(X)], [0, width]).nice();
// Title.
flow.datum(0).append(cm.text, {
text: title,
x: width / 2,
y: -1,
textAlign: "center",
textBaseline: "bottom"
});
// Axis.
const axis = flow
.datum(0)
.append(cm.group, {
x: 0,
y: height
})
.data(scaleX.ticks(5));
axis.append(cm.link, {
x: (d) => scaleX(d),
x1: (d) => scaleX(d),
y: 0,
y1: -height - 1,
stroke: cm.cfb(":")
});
axis.datum(0).append(cm.link, {
x: 0,
x1: width,
y: 0,
y1: 0,
stroke: cm.cfb("-")
});
axis.append(cm.text, {
text: (d) => (d ? d.toFixed(1) + "" : d),
textAlign: "center",
y: 1,
x: (d) => scaleX(d)
});
// Bars.
flow.data(data).append(cm.rect, {
x: scaleX(0),
y: Y.map((y) => y * step),
width: X.map(scaleX),
height: step - 1,
fill: (_, i) => cm.cfb("#", colors[i % colors.length])
});
}
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.
