TopoJSON Map of Los Angeles by jonsadka

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  path {
    stroke: gray;
    fill: none;
  }   
  </style>
</head>

<body>
  <script>
    const width = 960;
    const height = 960;
    const svg = d3.select('body').append('svg')
      .attr('height', width)
      .attr('width', height);

    d3.queue()
        .defer(d3.json, 'la.json')
      .await(render)

    function render(error, la) {
      if (error) return console.warn(error);

      // Create a unit projection.
      const laProjection = d3.geoAlbers()
                              .scale(1)
                              .translate([0, 0]);

      // Create a path generator                              
      const path = d3.geoPath()
                        .projection(laProjection);

      // Compute the bounds of a feature of interest, 
      // then derive scale & translate.
      const laBounds = path.bounds(la);
      const laScale = 0.95 / Math.max(
                (laBounds[1][0] - laBounds[0][0]) / width,
                (laBounds[1][1] - laBounds[0][1]) / height
              );
      const laTranslate = [
        (width - laScale * (laBounds[1][0] + laBounds[0][0])) / 2, 
        (height - laScale * (laBounds[1][1] + laBounds[0][1])) / 2
      ];

      // Update the projection to use computed scale & translate.
      console.log(laBounds);
      console.log(laScale, laTranslate)
      laProjection.scale(laScale)
                  .translate(laTranslate);

      svg.append('path')
          .datum(la)
          .attr('d', path);
    }
  </script>
</body>