title: D3: What projection am I using? / How to simplify with a null projection?
body: <p>I am attempting to simplify a d3 map on zoom, and I am using <a href="http://bl.ocks.org/mbostock/6242308" rel="nofollow">this example</a> as a starting point. However, when I replace the json file in the example with my own (<a href="http://weather-bell.com/res/nws_regions.topojson" rel="nofollow">http://weather-bell.com/res/nws_regions.topojson</a>), I get a tiny upside-down little map.</p>
  
  <p>Here is my jsfiddle: <a href="http://jsfiddle.net/8ejmH" rel="nofollow">http://jsfiddle.net/8ejmH</a>
  code:</p>
  
  <pre><code>var width = 900,
      height = 500;
  
  var chesapeake = [-75.959, 38.250];
  
  var scale,
  translate,
  visibleArea, // minimum area threshold for points inside viewport
  invisibleArea; // minimum area threshold for points outside viewport
  
  var simplify = d3.geo.transform({
      point: function (x, y, z) {
          if (z &lt; visibleArea) return;
          x = x * scale + translate[0];
          y = y * scale + translate[1];
          if (x &gt;= 0 &amp;&amp; x &lt;= width &amp;&amp; y &gt;= 0 &amp;&amp; y &lt;= height || z &gt;= invisibleArea) this.stream.point(x, y);
      }
  });
  
  var zoom = d3.behavior.zoom()
      .size([width, height])
      .on("zoom", zoomed);
  
  // This projection is baked into the TopoJSON file,
  // but is used here to compute the desired zoom translate.
  var projection = d3.geo.mercator().translate([0, 0])
  
  
  
  var canvas = d3.select("#map").append("canvas")
      .attr("width", width)
      .attr("height", height);
  
  var context = canvas.node().getContext("2d");
  
  var path = d3.geo.path()
      .projection(simplify)
      .context(context);
  
  d3.json("http://weather-bell.com/res/nws_regions.topojson", function (error, json) {
      canvas.datum(topojson.mesh(topojson.presimplify(json)))
          .call(zoomTo(chesapeake, 0.05).event)
          .transition()
          .duration(5000)
          .each(jump);
  });
  
  function zoomTo(location, scale) {
      var point = projection(location);
      return zoom.translate([width / 2 - point[0] * scale, height / 2 - point[1] * scale])
          .scale(scale);
  }
  
  function zoomed(d) {
      translate = zoom.translate();
      scale = zoom.scale();
      visibleArea = 1 / scale / scale;
      invisibleArea = 200 * visibleArea;
      context.clearRect(0, 0, width, height);
      context.beginPath();
      path(d);
      context.stroke();
  }
  
  function jump() {
      var t = d3.select(this);
      (function repeat() {
          t = t.transition()
              .call(zoomTo(chesapeake, 100).event)
              .transition()
              .call(zoomTo(chesapeake, 0.05).event)
              .each("end", repeat);
      })();
  }
  </code></pre>
  
  <p>My guess is that the topojson file I am using already has the projection built in, so I should be using a null projection in d3. 
  The map renders properly if I do not use a projection at all: (<a href="http://jsfiddle.net/KQfrK/1/" rel="nofollow">http://jsfiddle.net/KQfrK/1/</a>) - but then I cannot simplify on zoom.</p>
  
  <p>I feel like I am missing something basic... perhaps I just need to somehow rotate and zoom into the map in my first fiddle.</p>
  
  <p>Either way, I'd appreciate some help. Been struggling with this one.</p>
  
  <p><strong>Edit:</strong> I used QGIS to save the geojson file with a "EPSG:3857 - WGS 84 / Pseudo Mercator" projection.
  However, when I convert this to topojson with the topojson command-line utility and then display it with D3 using the same code as above I get a blank screen.</p>
  
  <p>Should I specify the projection within the topojson command-line utility? I tried to do that but I got an error message:</p>
  
  <pre><code>topojson --projection EPSG:3857 E:\gitstore\public\res\nws.geojson -o E:\gitstore\public\res\nws.topojson --id-property NAME
  
  
  [SyntaxError: Unexpected token :]
  </code></pre>