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 VoronoiTesting 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
projection.reflectX
chart = {
const context = DOM.context2d(width, height);
const path = d3.geoPath(projection, context);
function render(land) {
context.clearRect(0, 0, width, height);
context.beginPath(), path(sphere), context.fillStyle = "#fff", context.fill();
const r = projection.rotate();
projection.reflectX(true).rotate([r[0] + 180, -r[1], -r[2]]);
context.beginPath(), path(land), context.fillStyle = "rgba(0,0,0,0.1)", context.fill();
projection.reflectX(false).rotate(r);
context.beginPath(), path(land), context.fillStyle = "#000", context.fill();
context.beginPath(), path(sphere), context.stroke();
}
return d3.select(context.canvas)
.call(zoom(projection)
.on("zoom.render", () => render(land110))
.on("end.render", () => render(land50)))
.call(() => render(land50))
.node();
}
projection = d3.geoOrthographic()
.rotate([160, 0])
.precision(0.1)
.fitSize([width, height], sphere)
height = Math.floor(width * 0.6)
sphere = ({type: "Sphere"})
land50 = FileAttachment("land-50m.json").json().then(world => topojson.feature(world, world.objects.land))
land110 = FileAttachment("land-110m.json").json().then(world => topojson.feature(world, world.objects.land))
import {zoom} from "@d3/versor-zooming@322"
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.
