Skip to main content
100%

Basic Map Scale Bar

✓ Published0🌍 Public
Aandrew-reid
Last edited Oct 13, 2016
Created on Oct 12, 2016

A map of Australia rendered with a conic equal-area projection in D3 v4 uses a dynamic scale bar in the lower-left corner. The scale bar automatically measures the physical distance across the center of the map, adjusting its pixel width until the corresponding distance is a clean, round number, then labels it in kilometers or meters accordingly. The map itself uses TopoJSON data with green landmasses and white country boundaries, while the scale bar is constructed from alternating dark and light rectangles with rotated distance labels and a unit caption.

AI-generated description

This is an attempt at a basic scale that could be easily modified. As it stands, it could be dropped into any map. The method used to create a round distance to base the scale off of is just a first attempt, there are likely much better ways to arrive at similar or better outcomes.

At it's most basic, this example aims to make a scale bar 1/4 the width of the map. It begins by measuring the distance between two points on either side of the center of the map (along the x axis), which are 1/4 of the width of the map apart. Then, it adjusts pixel distance between those points, a little at a time, until the physical distance is a nice round number. Once this is achieved, then the pixel distance is used to set the scale width, while the physical distance is used to label the scale.

As scale varies across a projection, the center is the most logical point to measure as it is likely the most representative area to measure.

The scale is based on the distance calculator found at Moveable Type. In both this calculator and the eventual scale there is what I've only seen to be a tolerable degree of error. The distance calculator uses a spherical earth (the equitorial radius of the earth is only 0.3% more than the polar radius), while the indicated scale distance is cleaned by rounding off excess significant digits, which is why it attempts to find a distance to represent that is relatively round prior to rounding.

Similar vizzes