Maps, Infovis, Code
circles = {
const step = 20;
const circle = d3.geoCircle().center(d => d).radius(step / 6).precision(10);
const coordinates = [];
for (let y = -80; y <= 80; y += step) {
for (let x = -180; x < 180; x += step) {
// draw only every second circle near poles
if (Math.abs(y) < 70 || ((x / step) % 2 == 0)) {
coordinates.push(circle([x, y]).coordinates);
}
}
}
return {type: "MultiPolygon", coordinates};
}
projection = {
let proj = selectedProjection;
if (proj.rotate) proj.rotate([-lambda0,-phi0,gamma0]);
if (proj.angle) proj.angle(angle);
// for conic projections
if (proj.parallels) proj.parallels([phi1, phi2]);
if (proj.parallel) proj.parallel(phi1);
if (proj.tilt) proj.tilt(tilt);
if (proj.distance) proj.distance(distance);
try {
if (proj.lobes) proj.lobes(lobes);
}
catch (e) {
// happens for Bogg's interrupted :\
}
return proj;
}
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);
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;
}
projections = [
{
category: "Azimuthal Projections",
projections: []
},
{name: "Airy’s minimum error", value: d3.geoAiry},
{name: "Azimuthal equidistant", value: d3.geoAzimuthalEquidistant, highlight: true},
{name: "General perspective", value: d3.geoSatellite, highlight: true},
{name: "Gnomonic", value: d3.geoGnomonic},
{name: "Lambert Azimuthal equal-area", value: d3.geoAzimuthalEqualArea, highlight: true},
{name: "Orthographic", value: d3.geoOrthographic, highlight: true},
{name: "Stereographic", value: d3.geoStereographic},
{category: "Conic Projections"},
{name: "Conic equal-area", value: d3.geoConicEqualArea, highlight: true},
{name: "Conic equidistant", value: d3.geoConicEquidistant},
//{name: "conic conformal", value: d3.geoConicConformal}, // Not suitable for world maps.
{category: "Cylindrical Projections"},
{name: "Equirectangular (plate carrée)", value: d3.geoEquirectangular, highlight: true},
{name: "Cylindrical equal-area", value: d3.geoCylindricalEqualArea, highlight: true},
{name: "Cylindrical stereographic", value: d3.geoCylindricalStereographic},
{name: "Collignon", value: d3.geoCollignon},
{name: "Mercator", value: d3.geoMercator, highlight: true},
{name: "Transverse Mercator", value: d3.geoTransverseMercator, highlight: true},
{name: "Miller cylindrical", value: d3.geoMiller},
{name: "Patterson cylindrical", value: d3.geoPatterson},
{category: "Interrupted / Polyhedral Projections"},
{name: "Berghaus’ star", value: d3.geoBerghaus},
{name: "Boggs’ eumorphic (interrupted)", value: d3.geoInterruptedBoggs},
{name: "Butterfly (gnomonic)", value: d3.geoPolyhedralButterfly},
{name: "Butterfly (Collignon)", value: d3.geoPolyhedralCollignon},
{name: "Butterfly (Waterman)", value: d3.geoPolyhedralWaterman},
{name: "Gingery", value: d3.geoGingery},
{name: "Goode’s homolosine (interrupted)", value: d3.geoInterruptedHomolosine},
{name: "HEALPix", value: d3.geoHealpix},
{name: "Mollweide (Goode’s interrupted)", value: d3.geoInterruptedMollweide},
{name: "Mollweide (interrupted hemispheres)", value: d3.geoInterruptedMollweideHemispheres},
{name: "sinusoidal (interrupted)", value: d3.geoInterruptedSinusoidal},
{name: "sinu-Mollweide (interrupted)", value: d3.geoInterruptedSinuMollweide},
{category: "Hybrid / Compromise / Other Projections"},
{name: "Aitoff", value: d3.geoAitoff},
{name: "American polyconic", value: d3.geoPolyconic},
{name: "Armadillo", value: d3.geoArmadillo},
{name: "August", value: d3.geoAugust},
{name: "Baker dinomic", value: d3.geoBaker},
{name: "Bertin’s 1953", value: d3.geoBertin1953},
{name: "Boggs’ eumorphic", value: d3.geoBoggs},
{name: "Bonne", value: d3.geoBonne, highlight: true},
{name: "Bottomley", value: d3.geoBottomley},
{name: "Bromley", value: d3.geoBromley},
{name: "Craig retroazimuthal", value: d3.geoCraig},
{name: "Craster parabolic", value: d3.geoCraster},
{name: "Eckert I", value: d3.geoEckert1},
{name: "Eckert II", value: d3.geoEckert2},
{name: "Eckert III", value: d3.geoEckert3},
{name: "Eckert IV", value: d3.geoEckert4},
{name: "Eckert V", value: d3.geoEckert5},
{name: "Eckert VI", value: d3.geoEckert6},
{name: "Eisenlohr conformal", value: d3.geoEisenlohr},
{name: "Equal Earth", value: d3.geoEqualEarth, highlight: true},
{name: "Fahey pseudocylindrical", value: d3.geoFahey},
{name: "Foucaut’s stereographic equivalent", value: d3.geoFoucaut},
{name: "Foucaut’s sinusoidal", value: d3.geoFoucautSinusoidal},
{name: "Gilbert’s two-world", value: d3.geoGilbert},
{name: "Ginzburg V", value: d3.geoGinzburg5},
{name: "Ginzburg VI", value: d3.geoGinzburg6},
{name: "Ginzburg VIII", value: d3.geoGinzburg8},
{name: "Ginzburg IX", value: d3.geoGinzburg9},
{name: "Gringorten quincuncial", value: d3.geoGringortenQuincuncial},
{name: "Gringorten square", value: d3.geoGringorten},
{name: "Guyou square", value: d3.geoGuyou},
{name: "Goode’s homolosine", value: d3.geoHomolosine},
{name: "Hammer", value: d3.geoHammer},
{name: "Hammer retroazimuthal", value: d3.geoHammerRetroazimuthal},
{name: "Hill eucyclic", value: d3.geoHill},
{name: "Hufnagel pseudocylindrical", value: d3.geoHufnagel},
{name: "Kavrayskiy VII", value: d3.geoKavrayskiy7},
{name: "Lagrange conformal", value: d3.geoLagrange},
{name: "Larrivée", value: d3.geoLarrivee},
{name: "Laskowski tri-optimal", value: d3.geoLaskowski},
// {name: "Littrow retroazimuthal", value: d3.geoLittrow}, // Not suitable for world maps.
{name: "Loximuthal", value: d3.geoLoximuthal},
{name: "Mollweide", value: d3.geoMollweide},
{name: "McBryde–Thomas flat-polar parabolic", value: d3.geoMtFlatPolarParabolic},
{name: "McBryde–Thomas flat-polar quartic", value: d3.geoMtFlatPolarQuartic},
{name: "McBryde–Thomas flat-polar sinusoidal", value: d3.geoMtFlatPolarSinusoidal},
{name: "Natural Earth", value: d3.geoNaturalEarth1},
{name: "Natural Earth II", value: d3.geoNaturalEarth2},
{name: "Nell–Hammer", value: d3.geoNellHammer},
{name: "Nicolosi globular", value: d3.geoNicolosi},
{name: "Peirce quincuncial", value: d3.geoPeirceQuincuncial},
{name: "rectangular polyconic", value: d3.geoRectangularPolyconic},
{name: "Robinson", value: d3.geoRobinson, highlight: true},
{name: "sinusoidal", value: d3.geoSinusoidal},
{name: "sinu-Mollweide", value: d3.geoSinuMollweide},
{name: "Times", value: d3.geoTimes},
{name: "Tobler hyperelliptical", value: d3.geoHyperelliptical},
{name: "Van der Grinten", value: d3.geoVanDerGrinten},
{name: "Van der Grinten II", value: d3.geoVanDerGrinten2},
{name: "Van der Grinten III", value: d3.geoVanDerGrinten3},
{name: "Van der Grinten IV", value: d3.geoVanDerGrinten4},
{name: "Wagner IV", value: d3.geoWagner4},
{name: "Wagner VI", value: d3.geoWagner6},
{name: "Wagner VII", value: d3.geoWagner7},
{name: "Werner", value: () => d3.geoBonne().parallel(90)},
{name: "Wiechel", value: d3.geoWiechel},
{name: "Winkel tripel", value: d3.geoWinkel3}
]
outline = ({type: "Sphere"})
graticule = d3.geoGraticule10()
land = topojson.feature(world, world.objects.land)
world = FileAttachment("land-50m.json").json()
function projectionInput({ name = "", value } = {}) {
const form = html`<form><select name=i>${projections.map((p) => {
if (p.category) {
return Object.assign(html`<option>`, {
textContent: "====== " + p.category + " ======",
style: "font-style: italic; font-weight: bold;"
});
}
return Object.assign(html`<option>`, {
textContent: p.name,
style: p.highlight ? "font-weight: bold;" : "",
selected: p.name === value
});
})}</select> <i style="font-size:smaller;">${name}</i>`;
form.onchange = () => form.dispatchEvent(new CustomEvent("input"));
//form.i.selectedIndex = 2;
form.oninput = () => {
let proj = projections[form.i.selectedIndex];
let nextProj = projections[form.i.selectedIndex + 1];
if (typeof proj.value === "function") {
proj = proj.value();
} else if (typeof nextProj.value === "function") {
proj = nextProj.value();
} else {
proj = d3.geoEquirectangular;
}
form.value = proj;
return proj;
};
form.oninput();
return form;
}
path = d3.geoPath(projection)
topojson = require("topojson-client@3")
d3 = require("d3-geo@2", "d3-geo-projection@3")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.