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 IIGraticule 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
Clipped map tiles
map = svg`<svg viewBox="0 0 ${width} ${height}">
<defs>
<path id="land" d="${path(land)}"/>
<clipPath id="clip"><use xlink:href="${location}#land" /></clipPath>
</defs>
<g clip-path="url(${location}#clip)">
${tile().map(([x, y, z], i, {translate: [tx, ty], scale: k}) => svg`<image xlink:href="${url(x, y, z)}" x="${(x + tx) * k - 0.5}" y="${(y + ty) * k - 0.5}" width="${k + 1}" height="${k + 1}">`)}
${tile().map(([x, y, z], i, {translate: [tx, ty], scale: k}) => svg`<image xlink:href="${url(x, y, z)}" x="${(x + tx) * k}" y="${(y + ty) * k}" width="${k}" height="${k}">`)}
</g>
<use xlink:href="${location}#land" fill="none" stroke="black" stroke-width="0.5" />
</svg>`
url = (x, y, z) => `https://${"abc"[Math.abs(x + y) % 3]}.tiles.mapbox.com/v4/mapbox.natural-earth-2/${z}/${x}/${y}${devicePixelRatio > 1 ? "@2x" : ""}.png?access_token=pk.eyJ1IjoibWJvc3RvY2siLCJhIjoiY2s5ZWRlbTM4MDE0eDNocWJ2aXR2amNmeiJ9.LEyjnNDr_BrxRmI4UDyJAQ`
projection = d3.geoMercator()
path = d3.geoPath(projection)
tile = d3.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
width = 928
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, land)).bounds(land);
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;
}
land = FileAttachment("us.json").json()
.then(topology => topojson.feature(topology, topology.objects.land))
.then(land => ({type: "Polygon", coordinates: land.geometry.coordinates[0]}))
d3 = require("d3-geo@3", "d3-tile@1")
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.
