title: d3js scale, transform and translate
body: <p>I've created <a href="https://github.com/climboid/nycMap">nycMap</a>, a project that uses angularJS (MVC), yeoman (build), d3 (mapping) and geoJSON (geo data). </p>
  
  <p>Everything works very nicely, but I did have to spend quite some time getting the right scale and translation. I was wondering how I can automatically figure out at what scale the map will show its best and what x and y values go into the translation?</p>
  
  <pre><code>'use strict';
  
  japanAndCo2App.controller('MainCtrl', function($scope) {
  
   function makeJapanAll(){
      var path, vis, xy;
  
      xy = d3.geo.mercator().scale(16000).translate([-5600,2200]);
      path = d3.geo.path().projection(xy);
      vis = d3.select("#japanAll").append("svg:svg").attr("width", 1024).attr("height", 700);
      d3.json("data/JPN_geo4.json", function(json) {
        return vis.append("svg:g")
            .attr("class", "tracts")
            .selectAll("path")
            .data(json.features).enter()
            .append("svg:path")
            .attr("d", path)
            .attr("fill",function(d,i){ return d.properties.color || "transparent"});
      });
    }
    makeJapanAll();
  });
  </code></pre>
  
  <p>(If you are interested in the code, it's all <a href="https://github.com/climboid/nycMap">on github</a>. The code for the map is in <a href="https://github.com/climboid/nycMap/blob/master/app/scripts/controllers/main.js">scripts/controllers/main.js</a> which is the same as shown above.)</p>