block by HarryStevens afca63d606902cd830edfb855d19417d

Scale Bar Transition

Full Screen

Like axes in D3.js, scale bars created with the module d3-geo-scale-bar play nicely with transitions, so you can smoothly change the bar if your projection changes. In the map below, as the state changes, the scale bar selects a default distance based on the projection, but you can always set it manually with scaleBar.distance.

This example uses Noah Veltman’s lovely library flubber to smoothly transition from one state’s boundary to another.