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.reflectXNon-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
Testing projection visibility
visiblePoints
function tester(projection) {
let visible;
const stream = projection.stream({point() { visible = true; }});
return ([x, y]) => (visible = false, stream.point(x, y), visible);
}
viewof visiblePoints = {
const context = DOM.context2d(width, height);
const projection = d3.geoOrthographic()
.fitExtent([[-1, -1], [width + 1, height + 1]], sphere)
.clipExtent([[-1, -1], [width + 1, height + 1]])
.rotate([0, -30]);
const path = d3.geoPath(projection, context)
.pointRadius(1.5);
function render() {
context.clearRect(0, 0, width, height);
context.beginPath();
path(graticule);
context.lineWidth = 0.5;
context.strokeStyle = "#aaa";
context.stroke();
context.beginPath();
path(land);
context.fillStyle = "#ddd";
context.fill();
context.beginPath();
path(sphere);
context.lineWidth = 1.5;
context.strokeStyle = "#000";
context.stroke();
context.beginPath();
path({type: "MultiPoint", coordinates: points});
context.fillStyle = "#000";
context.fill();
context.canvas.value = points.filter(tester(projection));
context.canvas.dispatchEvent(new CustomEvent("input"));
}
return d3.select(context.canvas)
.call(zoom(projection).on("zoom.render", render))
.call(render)
.node();
}
height = width
sphere = ({type: "Sphere"})
graticule = d3.geoGraticule10()
points = (await FileAttachment("airports.csv").csv()).map(({longitude, latitude}) => [+longitude, +latitude])
land = FileAttachment("land-110m.json").json().then(world => topojson.feature(world, world.objects.land))
import {zoom} from "@d3/versor-zooming"
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.
