Zoomable Mandelbrot Set (WebGL)P5.js Star WobblingRandom Pitch SequencesPitch HelixMultibrot Set TransitionMultibrot Set TableHello Tone.jsAnimate Following Playback ProgressPlay Several SoundsFFTAmplitude (Meter)Waveform RadicalWaveform StrokeWaveform FillAV Instrument: Streamgraphcharmingjs@nextPoem from ImageFourier SeriesBeesandbombsMathematical Rose PatternsCharming LogoEchoX LogoCharming StarterChuanghua (Window Paper-Cut)Charming ExtensionMathematical Rose Patterns (Zoomable)Hello Tone.jsInteractive Composition: EyeOn FireSimple Many-Body Force Simulation艹木林森 (Wood)Angular MotionCardioid Visualization#21 Mandelbrot SetMic InputCharming Gallery
Maze Pattern
{
regenerate;
const count = 20;
const cols = d3.range(count);
const rows = d3.range(Math.floor(count * 0.618));
const scale = d3.scaleBand(cols, [0, width]);
const step = scale.step();
const radius = scale.bandwidth() / 2;
const size = step / 2;
const pos = (x) => scale(x) + radius;
const height = step * rows.length;
const cells = d3.cross(cols, rows);
const types = cells.map(() => +(Math.random() > 0.5));
const points = [0, -size, size, 0, 0, size, -size, 0];
const line = d3
.line()
.x((i) => points[i * 2])
.y((i) => points[i * 2 + 1]);
const app = cm.render({
width,
height,
draw: [
SVG.g(cells, {
transform: ([x, y]) => `translate(${pos(x)}, ${pos(y)})`,
stroke: "black",
strokeWidth: 2,
children: [
(_, i) => {
const [p1, p2, q1, q2] = types[i] ? [0, 3, 1, 2] : [0, 1, 2, 3];
return [
SVG.path({ d: line([p1, p2]) }),
SVG.path({ d: line([q1, q2]) })
];
}
]
})
]
});
return app.node();
}
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.
