d3 Tube Map

Draw tube maps in the style of the London Underground using d3.

<html>

<body>
  <div id="tube-map">
  </div>
  <script>
    var container = d3.select('#tube-map');
    var width = 1600;
    var height = 1000;

var map = d3.tubeMap()
      .width(width)
      .height(height)
      .margin({
        top: 20,
        right: 20,
        bottom: 40,
        left: 100,
      })
      .on("click", function (name) {
        console.log(name);
      });

d3.json("./stations.json").then(function(data) {
      container
        .datum(data).call(map);

var svg = container.select('svg');

zoom = d3
        .zoom()
        .scaleExtent([0.5, 6])
        .on('zoom', zoomed);

var zoomContainer = svg.call(zoom);
      var initialScale = 2;
      var initialTranslate = [100, 200];

zoom.scaleTo(zoomContainer, initialScale);
      zoom.translateTo(zoomContainer, initialTranslate[0], initialTranslate[1]);

function zoomed() {
        svg.select('g').attr('transform', d3.event.transform.toString());
      }
    });
  </script>
</body>

</html>

https://d3js.org/d3.v5.js

https://unpkg.com/d3-tube-map@latest/dist/d3-tube-map.js