block by lindep 6484deec90f4bfbea6f4

// source http://jsbin.com/sacufe/2

Full Screen

index.html

<style id="jsbin-css">
#vis div {"color":"red"}
</style>
<!DOCTYPE html>
<meta charset="utf-8">
<style>

/* CSS goes here. */

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
  <script src="//code.jquery.com/jquery-git2.js"></script>
  <div id="vis"></div>
<script id="jsbin-javascript">
var width = 200,
    height = 500;

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

var projection = d3.geo.mercator()
    //.rotate([-180,0])
    //.translate([0,0])
    //.scale(500)
    .scale(1)
    .translate([0, 0]);
    //.translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);
       
d3.json("//jsbin.com/mules/2.js", function(error, nz) {
  if (error) return console.error('error:',error);
  var rem = topojson.feature(nz, nz.objects.subunits);
  var s = d3.geo.path().projection(projection).bounds(rem);
$('#vis').append('<div>'+nz.objects.subunits.geometries[0].id+' '+s+'</div>');
  
  var b = path.bounds(rem),
      s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
      t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

  projection
      .scale(s)
      .translate(t);
  
  svg.append("path")
      .datum(topojson.feature(nz, nz.objects.subunits))
      .attr("d", d3.geo.path().projection(projection));
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<meta charset="utf-8">
<style>

/* CSS goes here. */

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"><\/script>
<script src="//d3js.org/topojson.v1.min.js"><\/script>
  <script src="//code.jquery.com/jquery-git2.js"><\/script>
  <div id="vis"></div></script>

<script id="jsbin-source-css" type="text/css">#vis div {"color":"red"}</script>

<script id="jsbin-source-javascript" type="text/javascript">
              
var width = 200,
    height = 500;

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

var projection = d3.geo.mercator()
    //.rotate([-180,0])
    //.translate([0,0])
    //.scale(500)
    .scale(1)
    .translate([0, 0]);
    //.translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);
       
d3.json("//jsbin.com/mules/2.js", function(error, nz) {
  if (error) return console.error('error:',error);
  var rem = topojson.feature(nz, nz.objects.subunits);
  var s = d3.geo.path().projection(projection).bounds(rem);
$('#vis').append('<div>'+nz.objects.subunits.geometries[0].id+' '+s+'</div>');
  
  var b = path.bounds(rem),
      s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
      t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

  projection
      .scale(s)
      .translate(t);
  
  svg.append("path")
      .datum(topojson.feature(nz, nz.objects.subunits))
      .attr("d", d3.geo.path().projection(projection));
});</script>

jsbin.sacufe.css

jsbin.sacufe.js