graphic = {
const svg = d3.create("svg")
.attr("viewBox", [-0.53, -0.53, 1.06, 1.06])
.attr("stroke", "black")
.attr("stroke-width", 1 / 640)
.style("max-width", "640px")
.style("display", "block")
.style("margin", "auto");
const frame = svg.append("g");
const path = frame.selectAll("path")
.data(gears)
.join("path")
.attr("fill", d => d.fill)
.attr("d", gear);
return Object.assign(svg.node(), {
update(angle, frameAngle) {
path.attr("transform", d => `translate(${d.origin}) rotate(${(angle / d.radius) % 360})`);
frame.attr("transform", `rotate(${frameAngle % 360})`);
}
});
}
mutable angle = 0
mutable frameAngle = 0
update = {
while (true) {
yield graphic.update(
mutable angle += speed,
mutable frameAngle += speed / frameRadius
);
}
}
gears = [
{ fill: "#c6dbef", teeth: 80, radius: -0.5, origin: [0, 0], annulus: true },
{ fill: "#6baed6", teeth: 16, radius: +0.1, origin: [0, 0] },
{ fill: "#9ecae1", teeth: 32, radius: -0.2, origin: [0, -0.3] },
{ fill: "#9ecae1", teeth: 32, radius: -0.2, origin: [-0.3 * x, -0.3 * y] },
{ fill: "#9ecae1", teeth: 32, radius: -0.2, origin: [0.3 * x, -0.3 * y] }
]
x = Math.sin(2 * Math.PI / 3)
y = Math.cos(2 * Math.PI / 3)
toothRadius = 0.008
holeRadius = 0.02
speed = 0.08
function gear({ teeth, radius, annulus }) {
const n = teeth;
let r2 = Math.abs(radius);
let r0 = r2 - toothRadius;
let r1 = r2 + toothRadius;
let r3 = holeRadius;
if (annulus) (r3 = r0), (r0 = r1), (r1 = r3), (r3 = r2 + toothRadius * 3);
const da = Math.PI / n;
let a0 = -Math.PI / 2 + (annulus ? Math.PI / n : 0);
const path = ["M", r0 * Math.cos(a0), ",", r0 * Math.sin(a0)];
let i = -1;
while (++i < n) {
path.push(
"A",
r0,
",",
r0,
" 0 0,1 ",
r0 * Math.cos((a0 += da)),
",",
r0 * Math.sin(a0),
"L",
r2 * Math.cos(a0),
",",
r2 * Math.sin(a0),
"L",
r1 * Math.cos((a0 += da / 3)),
",",
r1 * Math.sin(a0),
"A",
r1,
",",
r1,
" 0 0,1 ",
r1 * Math.cos((a0 += da / 3)),
",",
r1 * Math.sin(a0),
"L",
r2 * Math.cos((a0 += da / 3)),
",",
r2 * Math.sin(a0),
"L",
r0 * Math.cos(a0),
",",
r0 * Math.sin(a0)
);
}
path.push(
"M0,",
-r3,
"A",
r3,
",",
r3,
" 0 0,0 0,",
r3,
"A",
r3,
",",
r3,
" 0 0,0 0,",
-r3,
"Z"
);
return path.join("");
}
d3 = require("d3@6")
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.
