News and graphics at @ClimateLab, a project of @PostGraphics.
Public
Edited
Feb 7, 2024
13 stars
geoSquareIndia Proj4Fil’s DymaxionDorling CartogramIntroducing d3-geo-scale-barGilbert ProjectionRaster Reprojectiond3.geoCirclegeoLine, geoSwoop
Map zooming with slippy tiles and a scale bar
Also listed in…
d3-geo-scale-bar
scaleBarBottom = 20
scaleBarRight = 165
scaleBarIndiaTopZoom = d3.geoScaleBar()
.projection(projectionIndia)
.top(1 - scaleBarBottom / mapHeight)
.left(1 - scaleBarRight / mapWidth)
.size(size)
.orient(d3.geoScaleTop)
.label(null)
.tickPadding(2)
.tickSize(0)
.tickFormat((d, i, e) => i === e.length - 1 ? `${d} km.` : d)
.zoomClamp(false);
scaleBarIndiaBottomZoom = d3.geoScaleBar()
.projection(projectionIndia)
.top(1 - scaleBarBottom / mapHeight)
.left(1 - scaleBarRight / mapWidth)
.size(size)
.units(d3.geoScaleMiles)
.label(null)
.tickPadding(2)
.tickSize(0)
.tickFormat((d, i, e) => i === e.length - 1 ? `${d} mi.` : d)
.zoomClamp(false);
function styleBar(bar){
bar.selectAll("rect")
.remove();
bar.select(".domain")
.attr("shape-rendering", "crispEdges");
const text = bar.select(".tick:last-of-type").text();
const ticks = bar.selectAll(".tick");
ticks.select("line")
.attr("y2", text.includes("km") ? -10 : 10)
.style("display", (d, i, e) => i === e.length - 1 ? "block" : "none")
ticks.select("text")
.attr("dy", text.includes("km") ? -3 : 12)
.attr("text-anchor", "start")
.attr("font-size", 14)
.style("user-select", "none")
.style("display", (d, i, e) => i === 0 ? "block" : "none")
.style("paint-order", "stroke fill")
.style("stroke", "white")
.style("stroke-linecap", "round")
.style("stroke-linejoin", "round")
.style("stroke-opacity", .5)
.style("stroke-width", 4);
bar.select(".tick text")
.text(text);
}
// © OpenStreetMap contributors https://www.openstreetmap.org/copyright
url = d => `http://${"abc"[d[1] % 3]}.tile.openstreetmap.org/${d[2]}/${d[0]}/${d[1]}.png`
deltas = [-100, -4, -1, 0]
india = {
const topo = await FileAttachment("india@1.json").json();
return topojson.feature(topo, topo.objects.india);
}
mapWidth = Math.min(width, 600);
mapHeight = mapWidth * 1.13;
size = [mapWidth, mapHeight];
projectionIndia = d3.geoMercator().fitSize(size, india);
d3 = require("d3@7", "d3-geo-scale-bar@1.2.5", "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.
