Scale Bars for D3 Maps

Scale bars help viewers understand the geographic extent of maps. Printed maps, even those produced over a century ago, seldom lack them, yet scale bars are commonly missing from modern maps published on the internet. d3-geo-scale-bar makes it easy to add scale bars to maps created with d3-geo, a popular open source library for publishing maps on the web.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
    }
    svg {
      margin: 0 auto;
      display: table;
    }
    path {
      fill: #eee;
      stroke: #ddd;
    }
  </style>
</head>
<body>
  <script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
  <script src="https://d3js.org/d3-selection.v1.min.js"></script>
  <script src="https://d3js.org/d3-transition.v1.min.js"></script>
  <script src="https://d3js.org/d3-zoom.v1.min.js"></script>
  <script src="https://d3js.org/d3-drag.v1.min.js"></script>
  <script src="https://d3js.org/d3-array.v1.min.js"></script>
  <script src="https://d3js.org/d3-geo.v1.min.js"></script>

const scaleBarMiles = svg.append("g");

const kilometers = d3.geoScaleBar()
        .left(.5)
        .top(.1)
        .distance(800);

const scaleBarKilometers = svg.append("g")
        .attr("transform", "translate(0, 40)")
        .append("g");

redraw();
    window.onresize = _ => redraw();

function redraw(){
      width = window.innerWidth;
      height = Math.min(width * 1.12, window.innerHeight);

svg.attr("width", width).attr("height", height);

projection.fitSize([width, height], india);
      polygon.attr("d", path);
      miles.size([width, height]).projection(projection);
      scaleBarMiles.call(miles);
      kilometers.size([width, height]).projection(projection);
      scaleBarKilometers.call(kilometers);
    }
  </script>
</body>
</html>

https://d3js.org/d3-dispatch.v1.min.js

https://d3js.org/d3-selection.v1.min.js

https://d3js.org/d3-transition.v1.min.js

https://d3js.org/d3-zoom.v1.min.js

https://d3js.org/d3-drag.v1.min.js

https://d3js.org/d3-array.v1.min.js

https://d3js.org/d3-geo.v1.min.js

https://unpkg.com/d3-geo-scale-bar@1