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 SeriesBeesandbombsCharming LogoEchoX LogoCharming StarterChuanghua (Window Paper-Cut)Charming ExtensionMathematical Rose Patterns (Zoomable)Maze PatternHello Tone.jsInteractive Composition: EyeOn FireSimple Many-Body Force Simulation艹木林森 (Wood)Angular MotionCardioid Visualization#21 Mandelbrot SetMic InputCharming Gallery
Mathematical Rose Patterns
{
const vector = d3.range(count);
const cells = d3.cross(vector, vector);
const scale = d3.scaleBand().domain(vector).range([0, width]).padding(0.1);
const r = scale.bandwidth() / 2;
return SVG.svg({
width,
height: width,
"stroke-width": 1.2,
children: [
SVG.g(cells, {
transform: ([x, y]) => `translate(${scale(x) + r}, ${scale(y) + r})`,
children: [([x, y]) => rose(r, x + 1, y + 1)]
})
]
});
}
function rose(r, n, d) {
const k = n / d;
const m = reduceDenominator(n, d);
const points = [];
for (let a = 0; a < Math.PI * 2 * m + 0.02; a += 0.02) {
const r1 = r * Math.cos(k * a);
const x = r1 * Math.cos(a);
const y = r1 * Math.sin(a);
points.push([x, y]);
}
return SVG.path({ d: d3.line()(points), stroke: "black", fill: "none" });
}
function reduceDenominator(numerator, denominator) {
function rec(a, b) {
return b ? rec(b, a % b) : a;
}
return denominator / rec(numerator, denominator);
}
cm = require(await FileAttachment("charming.umd.min.js").url())
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.
