Used to work on @observablehq — still think it rocks.
🏍 🌎 👶
canvas = {
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection, context);
while (true) {
for (let i = 0, n = 480; i < n; ++i) {
const t = d3.easeCubic(2 * i > n ? 2 - (2 * i) / n : (2 * i) / n);
projection
.alpha(t)
.rotate([0, 0])
.scale(scale);
context.clearRect(0, 0, width, height);
context.beginPath();
path(land);
context.fillStyle = "rgba(0,0,0,0.15)";
context.fill();
if (showGraticule) {
context.beginPath();
path(graticule);
context.lineWidth = 1;
context.strokeStyle = "#aaa";
context.stroke();
context.beginPath();
path(equator);
context.lineWidth = 1.5;
context.strokeStyle = "#777";
context.stroke();
}
yield context.canvas;
}
}
}
scale = width / 6
function mercatorNaturalEarthDemo() {
viewof projection1.input.value = "geoMercatorRaw";
viewof projection2.input.value = "geoNaturalEarth1Raw";
viewof projection1.dispatchEvent(new CustomEvent("input", { bubbles: true }));
viewof projection2.dispatchEvent(new CustomEvent("input", { bubbles: true }));
}
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[projection1], d3[projection2])
.scale(scale)
.translate([width / 2, height / 2])
.rotate([0, 0])
.precision(0.1)
projections = Object.keys(d3).filter(k => /^geo(?!Conic)\w+Raw$/.test(k))
height = Math.round(width / 1.618)
equator = ({type: "LineString", coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]]})
graticule = d3.geoGraticule10()
d3 = require("d3-geo@1", "d3-interpolate@1", "d3-ease@1", "d3-fetch")
topojson = require("topojson-client@3")
world = FileAttachment("world-atlas-110m.json").json()
land = topojson.feature(world, world.objects.land)
import { select, checkbox } from "@jashkenas/inputs"
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.
