Responsive Map

An experiment with responsive maps and svg's with d3.

The projection paths are defined in the svg's section, and the states are rendered on screen using svg's statements, one for each state. Additionally, since d3's albersUsa projection assumes a screen size of 960x500, the viewBox attribute is set to those dimensions, but the svg itself doesn't have any sizing information. This makes it fill up the available space of its containing

(or, in this case).

To see the resizing, click "Open in a new window"

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; }
    use { stroke-width: 1.5px; }
  </style>
</head>

<body>
  <script>
    var margin = {top: 20, right: 10, bottom: 20, left: 10};
    var width = 960 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
    var svg = d3.select("body")
    	.append("svg")
      	.attr("viewBox", "0 0 960 500")
   	;
    var g = svg
    	.append("g")
    		.attr("transform", "translate(" + margin.top + "," + margin.left + ")")
    ;
    var projection = d3.geo.albersUsa()
    	, path = d3.geo.path().projection(projection)
    	, states = []
    ;
    d3.json("usa.json", function(error, usa) {
      svg.datum(usa)
        .append("defs")
        .append("g") // state shapes
        	.attr("id", "shapes")
        	.selectAll("path")
        	.data(geogrify(svg.datum()))
        .enter().append("path")
        	.attr("id", function(d) { return slugify(d.feature.id); })
        	.attr("d", function(d) { return path(d.feature); })
        	.style("all", "inherit")
      ;
      draw();
    })
    ;
    function geogrify(us) {
        return topojson.feature(us, us.objects.states).features
            .map(function(d) {
          			states.push(d.id);
                var centroid = path.centroid(d);

if(centroid.some(isNaN)) return;

centroid.x = centroid[0];
                centroid.y = centroid[1];
                centroid.feature = d;

return centroid;
              })
            .filter(function(d) { return d; }) // remove NaNs
        ;
    } // geogrify()
    
    function draw() {
        g.selectAll(".state")
            .data(
                  states.map(function(d) { return { State: d }; })
                , function(d) { return d.State; }
              )
          .enter().append("g")
            .attr("class", function(d) { return slugify(d.State); })
            .classed("state", true)
          .append("use")
            .attr("class", "shape")
            .attr("xlink:href", function(d) { return "#" + slugify(d.State); })
            .attr("fill", "#ccc")
        ;
    }
    
		function slugify(arg) {
    		return arg.toLowerCase()
          	.split(' ').join('_')
        ;
    }
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js