md`# Introducing d3-geo-scale-bar [d3-geo-scale-bar](https://github.com/HarryStevens/d3-geo-scale-bar) is a [D3.js](https://d3js.org/) module that makes it easy to add scale bars to maps created with [d3-geo](https://github.com/d3/d3-geo).

${width < 480 ? "Top A scale bar indicates kilometers in the southwest United States. Bottom A differently styled scale bar shows miles." : "Top Three different scale bars indicate distance in the southwest United States. Bottom-left Two scale bars show kilometers and miles in northern India. Bottom-right A scale bar indicates yards near the National Mall."} In cartography, scale bars help viewers understand the geographic extent of maps. Professional cartographers seldom omit them from reference maps, yet scale bars are commonly missing from interactive maps published on the internet. To be sure, not every map needs a scale bar. For one thing, scale bars indicate distance, but they are not necessarily precise across the entirety of the map; think twice before using them with projections that show large parts of the sphere or that have significant local distortions. They are also often out of place on thematic maps like [choropleth](https://observablehq.com/@d3/choropleth) and [bubble](https://observablehq.com/@d3/bubble-map) maps. To download d3-geo-scale-bar, read its source code, or contribute to the project, visit [its GitHub page](https://github.com/HarryStevens/d3-geo-scale-bar/). Otherwise, dive in to the tutorial below! - [Basic Usage](#basicUsage) - [Styling](#styling) - [Zooming](#zooming) - [Transitions](#transitions) - [Space Bars](#spaceBars)`