// Slightly adjusted rough coordinates from https://www.reddit.com/r/MapPorn/comments/xn7dvj/without_touching_a_single_piece_of_land_its/
// I eyeballed the coordinate under South America...sorry
IndiaToUSA = ({
type: "LineString",
coordinates: [
[-162.64094, 55.11279],
[-75.2667, -55.983],
[70.33447, 20.7972]
]
})
world = FileAttachment("land-110m.json").json()
land = topojson.feature(world, world.objects.land)
function interpolateProjection(raw0, raw1) {
const mutate = d3.geoProjectionMutator((t) => (x, y) => {
const [x0, y0] = raw0(x, y),
[x1, y1] = raw1(x, y);
return [x0 + t * (x1 - x0), y0 + t * (y1 - y0)];
});
let t = 0;
return Object.assign(mutate(t), {
alpha(_) {
return arguments.length ? mutate((t = +_)) : t;
}
});
}
projection = interpolateProjection(d3.geoOrthographicRaw, d3.geoMercatorRaw) // change from equirectangular to mercator
.scale(scale(0))
.translate([width / 2, height / 2])
.rotate(rotate(0))
.precision(0.1)
rotate = d3.interpolate([10, 100], [0, 0]) // 10 and 20 before, 10 and 100 works pretty well
scale = d3.interpolate(width / 4, (width - 2) / (2 * Math.PI))
height = width / 1.8
equator = ({type: "LineString", coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]]})
sphere = ({type: "Sphere"})
graticule = d3.geoGraticule10()
d3 = require("d3-geo@2", "d3-interpolate@2", "d3-ease@2")
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.
