Skip to content

Instantly share code, notes, and snippets.

@HarryStevens
Last active January 15, 2022 18:11
Show Gist options
  • Save HarryStevens/7518a2ee0ad35172b8ff4782a6ccd2df to your computer and use it in GitHub Desktop.
Save HarryStevens/7518a2ee0ad35172b8ff4782a6ccd2df to your computer and use it in GitHub Desktop.
Scale Bar With Zooming
license: gpl-3.0

This block uses d3-geo-scale-bar with d3-zoom to make a map with a scale bar that updates as the user zooms in and out.

<!DOCTYPE html>
<html>
<head>
<style>
body {
display: table;
margin: 0 auto;
}
svg {
overflow: visible;
}
.state {
fill: #eee;
stroke: #ccc;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="https://unpkg.com/d3-geo-scale-bar@1"></script>
<script>
const projection = d3.geoAlbers();
const path = d3.geoPath(projection);
const scaleBar = d3.geoScaleBar()
.projection(projection)
.left(.1)
.top(.9)
.units(d3.geoScaleMiles)
.tickFormat(d => d)
.zoomClamp(false);
const zoom = d3.zoom()
.scaleExtent([1, 20])
.on("zoom", event => {
const { transform } = event;
g.attr("transform", transform);
scaleBar.zoomFactor(transform.k);
bar.call(scaleBar);
});
const svg = d3.select("body").append("svg");
const g = svg.append("g");
const bar = svg.append("g");
d3.json("ne_50m_admin_1_states_provinces_lakes.json")
.then(data => {
const geojson = topojson.feature(data, data.objects.ne_50m_admin_1_states_provinces_lakes);
const states = g.selectAll(".state")
.data(geojson.features)
.enter().append("path")
.attr("class", "state");
draw();
addEventListener("resize", draw);
function draw(){
const width = Math.min(innerWidth, 800);
const height = width * .63;
projection.fitSize([width, height], geojson);
scaleBar.size([width, height]);
zoom.translateExtent([[0, 0], [width, height]]);
svg
.attr("width", width)
.attr("height", height)
.call(zoom);
bar.call(scaleBar);
states
.attr("d", path)
.on("mouseover", function(){
d3.select(this).style("stroke", "black").raise();
})
.on("mouseout", function(){
d3.select(this).style("stroke", "#ccc");
});
}
});
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment