seemantk/README.md Secret

## README.md

      
    Raw
  

              README.md
            
          
    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

  
## index.html
<!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>

## usa.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              usa.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!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>