djvanderlaan/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Answer to a question on stackoverflow. I used the answers to another question to centre and scale the map

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <script src="http://d3js.org/d3.v3.min.js"></script>
  </head>
  <body>
    <div id="vis">
    </div>

    <script>
      var height = 400;
      var width  = 400;

      var vis = d3.select("#vis").append("svg")
          .attr("width", width).attr("height", height)

      d3.json("po_2012_simplified.json", function(json) {

          var projection = d3.geo.projection(function(x, y) { return [x, y];})
            .precision(0).scale(1).translate([0, 0]);

          var path = d3.geo.path().projection(projection);

          var bounds = path.bounds(json),
              scale  = .95 / Math.max((bounds[1][0] - bounds[0][0]) / width,
                      (bounds[1][1] - bounds[0][1]) / height),
              transl = [(width - scale * (bounds[1][0] + bounds[0][0])) / 2,
                      (height - scale * (bounds[1][1] + bounds[0][1])) / 2];

          projection.scale(scale).translate(transl);

          vis.selectAll("path").data(json.features).enter().append("path")
            .attr("d", path)
            .style("fill", "#D0D0D0")
            .style("stroke-width", "0.5px")
            .style("stroke", "black")
        });

    </script>
  </body>
</html>

## po_2012_simplified.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              po_2012_simplified.json
            
          
      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>
	<html>
	<head>
	<meta charset="utf-8" />

	<script src="http://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
	<div id="vis">
	</div>

	<script>
	var height = 400;
	var width = 400;

	var vis = d3.select("#vis").append("svg")
	.attr("width", width).attr("height", height)

	d3.json("po_2012_simplified.json", function(json) {

	var projection = d3.geo.projection(function(x, y) { return [x, y];})
	.precision(0).scale(1).translate([0, 0]);

	var path = d3.geo.path().projection(projection);

	var bounds = path.bounds(json),
	scale = .95 / Math.max((bounds[1][0] - bounds[0][0]) / width,
	(bounds[1][1] - bounds[0][1]) / height),
	transl = [(width - scale * (bounds[1][0] + bounds[0][0])) / 2,
	(height - scale * (bounds[1][1] + bounds[0][1])) / 2];

	projection.scale(scale).translate(transl);

	vis.selectAll("path").data(json.features).enter().append("path")
	.attr("d", path)
	.style("fill", "#D0D0D0")
	.style("stroke-width", "0.5px")
	.style("stroke", "black")
	});

	</script>
	</body>
	</html>