D3 Examples - Resize Map on Window Resize

Resize Map on Window Resize

Using an unprojected version of the us-10m.json so that the Albers USA projection may be applied and that d3-geo's projection.fitSize can be used to appropriately scale the rendering of the data to a small SVG container.

It looks smoother to just rescale the SVG on window resize, but this method could be useful if you were doing other things on the map as well.

Thanks to @veltman for the tip.

xxxxxxxxxx
 
<!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; }
    .chart {
      margin: 10px;
    }
  </style>
</head>
​
<body>
  <svg></svg>
  <script>
    var svg = d3.select('svg'),
        width = window.innerWidth,
        height = window.innerHeight;
    
    var states;
    
    function draw() {
      // projection fn so we can fit geodata within svg's area
      var projection = d3.geoAlbersUsa().fitSize([width, height], states);
      
      // use projection fn with geoPath fn
      var path = d3.geoPath().projection(projection);
      
      var g = d3.select('svg g');
      if (g) g.remove();
      
      svg.attr('width', width)
        .attr('height', height);
      
      svg.append("g")
            .attr("class", "states")
        .selectAll("path")
        .data(states.features)
        .enter().append("path")
          .attr("d", path)
            .attr('fill', '#fff')
            .attr('stroke', '#333');
    }
   
    d3.json('us-10m-unprojected.topojson', function(error, us) {
      if (error) throw error;
      
      // convert our topojson to geojson
      states = topojson.feature(us, us.objects.state);
      
      // initial drawing of the map
      draw();
      
      // event listener that redraws when the window size changes
      // you would probably want to throttle this in production
      window.onresize = function() {
        width = window.innerWidth;
        height = window.innerHeight;
        draw();
      };
    });
  </script>
</body>
​
    