I want to help more people experience the excitement of exploring Earth's subsurface
Published
Edited
Feb 8, 2021
1 fork
7 stars
path = toothPath + axlePath
size = 2 * (radius + padding)
toothDepth = Math.min(
(toothScale * (2.0 * Math.PI * radius)) / numTeeth,
radius / 2
)
toothAngles = {
const angleDelta = (2 * Math.PI) / numTeeth / 4;
const angleWidener = toothDepth / (radius - toothDepth) / 2;
const tooth = [0, 1, 2 - angleWidener, 3 + angleWidener];
return Array.from({ length: numTeeth }).flatMap((v, i) => {
return tooth.map(v => (v + 4 * i) * angleDelta);
});
}
corners = toothAngles.map((angle, index) => {
let r = index % 4 < 2 ? radius : radius - toothDepth;
return [Math.cos(angle), Math.sin(angle)].map(v =>
(v * r + radius + padding).toFixed(2)
);
})
toothPath = corners.slice(1).reduce((p, corner) => {
p += "L" + corner.join();
return p;
}, "M" + corners[0].join()) + "z"
axleRadius = Math.max(0, radius - toothDepth - ringScale * toothDepth)
axleStart = [padding + radius + axleRadius, padding + radius].map(v =>
v.toFixed(3)
)
arcParams = {
let r = axleRadius.toFixed(3);
let endAngle = Math.PI * 1.999;
let [x, y] = [Math.cos(endAngle), -Math.sin(endAngle)]
.map(v => padding + radius + v * axleRadius)
.map(v => v.toFixed(3));
return [r, r, 0, 1, 0, x, y];
}
axlePath = "M" + axleStart.join() + "A" + arcParams.join() + "z"
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.
