🇧🇷 🇺🇸. Passionate about programming and building things.
Public
Edited
Jan 23, 2024
draw_circles();
function draw_circles() {
const [area, svg] = make_svg();
const xa = -100;
const xb = 100;
for (let i = 3; i <= 9; i++) {
draw_apollonian_circle(svg, xa, xb, 1.0/i);
draw_apollonian_circle(svg, xa, xb, i);
}
draw_point(svg, xa); // Point A
draw_point(svg, xb); // Point B
return area.node();
}
function draw_apollonian_circle(svg, xa, xb, q) {
const [x1, x2] = get_diameter(xa, xb, q);
const x0 = (x1 + x2) / 2;
const r = Math.abs(x2 - x1) / 2;
const da = Math.abs(x1 - xa);
const db = Math.abs(x1 - xb);
draw_circle(svg, x0, r)
.attr("stroke", "blue")
.attr("fill", "none");
}
function get_diameter(xa, xb, r) {
const sr = Math.sqrt(r);
const x1 = (xb - xa) * (r - sr)/(r - 1) + xa;
const x2 = (xb - xa) * (r + sr)/(r - 1) + xa;
return [x1, x2];
}
function draw_circle(svg, x0, r) {
return svg.append("circle")
.attr("cx", WIDTH/2 + x0)
.attr("cy", HEIGHT / 2)
.attr("r", r);
}
function draw_point(svg, x0) {
draw_circle(svg, x0, 1)
.attr("stroke", "black")
.attr("fill", "black");
}
function make_svg() {
const area = d3.create('div');
const header = area.append('div');
const svg = area.append('svg')
.attr('width', WIDTH)
.attr('height', HEIGHT);
return [area, svg];
}
WIDTH = 1000
HEIGHT = 500
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.
