Spilhaus shoreline mapNew Jersey State PlaneCustom cartesian projectionU.S. state choroplethWorld choroplethSpike mapBubble mapChoroplethRotating orthographicOceansWinding orderSolar 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 CurveOrthographic to equirectangularU.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 shading
graticule = d3.geoGraticule10()
chart1 = Chart(d3.geoOrthographic().clipAngle(null), (context, path) => {
context.beginPath();
path(graticule);
context.strokeStyle = "#333";
context.stroke();
})
chart2 = Chart(d3.geoOrthographic().clipAngle(90), (context, path) => {
context.beginPath();
path(graticule);
context.strokeStyle = "#333";
context.stroke();
context.beginPath();
path(sphere);
context.strokeStyle = "#000";
context.lineWidth = 2;
context.stroke();
})
sphere = ({type: "Sphere"})
chart3 = Chart(d3.geoOrthographic().clipAngle(90), (context, path, gradient) => {
if (!gradient) {
const cx = width * 0.75;
const cy = height * 0.25;
const cr = Math.min(width, height) / 2;
gradient = context.createRadialGradient(cx, cy, 0, cx, cy, cr);
gradient.addColorStop(0.05, "#ffd");
gradient.addColorStop(1.00, "#ba9");
}
context.beginPath();
path(sphere);
context.fillStyle = gradient;
context.fill();
context.beginPath();
path(graticule);
context.strokeStyle = "#123";
context.globalAlpha = 0.5;
context.stroke();
context.beginPath();
path(sphere);
context.lineWidth = 2;
context.stroke();
return gradient;
})
function* Chart(projection, render) {
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection.fitExtent([[1, 1], [width - 1, height - 1]], sphere).precision(0.2), context);
context.canvas.style.maxWidth = "100%";
let state;
while (true) {
const t = performance.now();
projection.rotate([vx * t, vy * t]);
context.clearRect(0, 0, width, height);
context.save();
state = render(context, path, state);
context.restore();
yield context.canvas;
}
}
vx = 0.018 // lambda degrees per millisecond
vy = 0.006 // theta degrees per millisecond
width = 960
height = 500
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.
