Public
Edited
Oct 26, 2023
9 forks
27 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 CurveOrthographic to equirectangularU.S. Map with Puerto RicoProjection TransitionsZoom to bounding boxZoomable Raster & VectorWorld Map (SVG)U.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
Web Mercator tiles
projection1 = d3.geoMercator()
.center([0, 0])
.translate([256, 256])
.scale(512 / (2 * Math.PI))
html`<svg width="512" height="512">
<path d="${d3.geoPath(projection1)(land)}" />
</svg>`
mercatorSize = scale => scale * (2 * Math.PI)
mercatorScale = size => size / (2 * Math.PI)
html`<img src="${url(0, 0, 0)}" width="256" height="256">`
html`<div style="position: relative; width: 512px; height: 512px;">
<img src="${url(0, 0, 1)}" style="position: absolute; top: 0px; left: 0px;" width="256" height="256">
<img src="${url(1, 0, 1)}" style="position: absolute; top: 0px; left: 256px;" width="256" height="256">
<img src="${url(0, 1, 1)}" style="position: absolute; top: 256px; left: 0px;" width="256" height="256">
<img src="${url(1, 1, 1)}" style="position: absolute; top: 256px; left: 256px;" width="256" height="256">
</div>`
html`<div style="position: relative; width: 512px; height: 512px;">
<img src="${url(0, 0, 1)}" style="position: absolute; top: 0px; left: 0px;" width="256" height="256">
<img src="${url(1, 0, 1)}" style="position: absolute; top: 0px; left: 256px;" width="256" height="256">
<img src="${url(0, 1, 1)}" style="position: absolute; top: 256px; left: 0px;" width="256" height="256">
<img src="${url(1, 1, 1)}" style="position: absolute; top: 256px; left: 256px;" width="256" height="256">
<svg width="512" height="512" style="position: relative;">
<path fill="none" stroke="red" d="${d3.geoPath(projection1)(land)}" />
</svg>
</div>`
tile1 = d3.tile()
.translate([256, 256])
.scale(512)
.extent([[0, 0], [512, 512]])
tile1()
detroit
projection = d3.geoMercator()
.fitSize([width, height], detroit)
path = d3.geoPath(projection)
tile = d3.tile()
.size([width, height])
.scale(projection.scale() * 2 * Math.PI)
.translate(projection([0, 0]))
svg`<svg viewBox="0 0 ${width} ${height}">
${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}">
`)}
<path fill="none" stroke="red" d="${path(detroit)}"/>
</svg>`
height = Math.min(width, 720)
url = (x, y, z) => `https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/${z}/${x}/${y}${devicePixelRatio > 1 ? "@2x" : ""}?access_token=pk.eyJ1IjoibWJvc3RvY2siLCJhIjoiY2s5ZWRlbTM4MDE0eDNocWJ2aXR2amNmeiJ9.LEyjnNDr_BrxRmI4UDyJAQ`
land = FileAttachment("land-50m.json").json()
.then(topology => topojson.feature(topology, topology.objects.land))
detroit = FileAttachment("detroit.json").json()
.then(topology => topojson.feature(topology, topology.objects.detroit))
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.
