Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Jun 23, 2019
2 forks
9 stars
canvas = {
const context = DOM.context2d(width, height);
const mod_b = Math.hypot(...root.b);
for (let t = 0; true; t = (t + 0.01) % 1) {
const scale = Math.pow(root.mod_a, t - 10);
const max_d = width * 2 / scale;
context.save();
context.clearRect(0, 0, width, height);
context.translate(width / 2, height / 2);
context.scale(scale, scale);
context.rotate(root.arg_a * t);
for (let i = 0, q = [1, 0]; i < p; ++i, q = cmul(q, root.a)) {
context.beginPath();
for (let c = q, d = Math.hypot(...c); d < max_d; c = cmul(c, root.b), d *= mod_b) {
const [cx, cy] = c;
const cr = d * root.r;
context.moveTo(cx + cr, cy);
context.arc(cx, cy, cr, 0, 2 * Math.PI, false);
}
context.fillStyle = `hsl(${(i + t) / p * 360}, 50%, 50%)`;
context.fill();
}
yield context.canvas;
context.restore();
}
}
function cmul([wr, wi], [zr, zi]) {
return [wr * zr - wi * zi, wr * zi + wi * zr];
}
height = 600
p = 9
q = 24
root = doyle(p, q)
doyle = require("https://bl.ocks.org/robinhouston/raw/6096562/8a03f4253b2908482f191e58627b6ededfe64250/doyle.js").catch(() => window.doyle)
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.
