Published
Edited
Aug 25, 2020
1 fork
1 star
projection = {
// call map() as soon as possible, in order to set the projection's translate and scale
let projection = d3.geoStereographic().clipAngle(80).rotate([0,0]);
map(projection)
return projection
}
// the stereographic projection maps small circles to circles
// but the centers of the projected circles are *not* the projections
// of the centers of the small circles
function circle(n) {
let p0 = projection([0,n]),
p1 = projection([180,n]),
center = Math.abs(p1[1] + p0[1]) / 2,
radius = Math.abs(p1[1] - p0[1]) / 2;
return { center, radius }
}
// intersect the stereographic small circle at n with the circle centered on [0,0] and angle = clipangle
// http://mathworld.wolfram.com/Circle-CircleIntersection.html
function intersection(circle, angle) {
let t = projection.translate(),
rotate = projection.rotate();
projection.rotate([0,0]);
let d = circle.center + t[1], r = circle.radius, R = projection([angle,0])[0] - projection([0,0])[0];
projection.rotate(rotate);
let y = Math.sqrt(Math.abs(
(-d + r - R) * (-d -r + R) * (-d + r + R) * (d + r + R)
)) / d / 2;
let alpha = Math.acos(y/R);
return [y + t[0], -R * Math.sin(alpha) + t[1]]
}
positions = d3.range(projection.clipAngle()/10).map(
d => intersection(circle(0.0001 + 10*d), projection.clipAngle())
)
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.
