mutable arc = []
function drag(projection) {
let r0, p0;
function dragstarted() {
r0 = projection.rotate();
p0 = projection.invert([d3.event.x, d3.event.y]);
}
function dragged() {
// p: spherical coords of the point under the mouse under old rotation
const p = projection.rotate(r0).invert([d3.event.x, d3.event.y]);
// arcRotation moves p0 to p
const arcRotation = attitude().arc(p0, p);
projection.rotate(
attitude(r0)
.compose(arcRotation)
.angles()
);
// for this demo only: show the arc
mutable arc = [arcRotation.invert(p0), p0];
}
return d3
.drag()
.on("start", dragstarted)
.on("drag", dragged);
}
projection = d3[projectionName]()
height = {
const [[x0, y0], [x1, y1]] = d3
.geoPath(projection.fitWidth(width, sphere))
.bounds(sphere);
const dy = Math.ceil(y1 - y0),
l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale((projection.scale() * (l - 1)) / l).precision(0.2);
return dy;
}
sphere = ({type: "Sphere"})
land50 = FileAttachment("land-50m.json").json().then(world => topojson.feature(world, world.objects.land))
land110 = FileAttachment("land-110m.json").json().then(world => topojson.feature(world, world.objects.land))
attitude = require("attitude")
topojson = require("topojson-client@3")
d3 = require("d3@5")
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.
