Public
Edited
Aug 1, 2023
60 forks
Importers
77 stars
Spilhaus shoreline mapNew Jersey State PlaneCustom cartesian projectionU.S. state choroplethWorld choroplethSpike mapBubble mapChoroplethRotating orthographicOceansWinding orderOrthographic shadingSolar TerminatorU.S. airports VoronoiStar mapSolar pathRaster tilesThreshold ChoroplethMapbox Vector TilesRaster Tiles (Canvas)Raster & vector IIClipped map tilesGraticule labels (stereographic)Sketchy EarthCloud ContoursCountries by AreaVector fieldRaster & vectorVector tilesHexbin mapAntimeridian CuttingWorld AirportsWorld Airports DelaunayWorld airports Voronoiprojection.reflectXTesting projection visibilityNon-contiguous cartogramVersor ZoomingThree-Axis RotationContext to CurveU.S. Map with Puerto RicoProjection TransitionsZoom to bounding boxZoomable Raster & VectorWorld Map (SVG)Web Mercator tilesU.S. Map (Canvas)Bivariate choroplethTissot’s indicatrixProjection comparisonCassiniWorld tourU.S. State CapitalsWorld map (canvas)U.S. MapConic Equal-AreaTransverse MercatorVersor draggingStereographicGnomonicOrthographicMercatorAzimuthal Equal-AreaAzimuthal EquidistantEquirectangularConic ConformalTobler–MercatorConic EquidistantNatural EarthEqual EarthOrthographic (SVG)Quantile Choropleth
Orthographic to equirectangular
Also listed in…
Gallery
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(rotate(t)).scale(scale(t));
context.clearRect(0, 0, width, height);
context.beginPath();
path(graticule);
context.lineWidth = 1;
context.strokeStyle = "#aaa";
context.stroke();
context.beginPath();
path(sphere);
context.lineWidth = 1.5;
context.strokeStyle = "#000";
context.stroke();
context.beginPath();
path(equator);
context.lineWidth = 1.5;
context.strokeStyle = "#f00";
context.stroke();
yield context.canvas;
}
}
}
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.geoEquirectangularRaw)
.scale(scale(0))
.translate([width / 2, height / 2])
.rotate(rotate(0))
.precision(0.1)
rotate = d3.interpolate([10, -20], [0, 0])
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.
