title: topoJSON on D3: map doesn't show (but it works on www.mapshaper.org)
body: <p>I'm trying to replicate <a href="http://bl.ocks.org/mbostock/4060606" rel="nofollow">http://bl.ocks.org/mbostock/4060606</a> using a UK Counties map. </p>
  
  <p>I followed the following steps - pretty much what is suggested on <a href="http://bost.ocks.org/mike/map" rel="nofollow">http://bost.ocks.org/mike/map</a>:
  1) I downloaded the shapefile from Ordnance Survey and extracted some data using qGIS
  2) when ready, I translated the shapefile into GeoJSON using ogr2ogr 
  3) I converted the GeoJSON into topoJSON making sure the IDs were preserved</p>
  
  <p>I pretty much copied the original example for the choropleth from mbostock. However, instead of a nice map, I get a... circle. I wonder if I'm doing some errors with the projection?</p>
  
  <p>For completeness, this is the javascript part of the page:</p>
  
  <pre><code>var width = 960,
      height = 600;
  
  var rateById = d3.map();
  
  var quantize = d3.scale.quantize()
      .domain([0, .15])
      .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));
  
  var projection = d3.geo.albers()
            .center([0, 55.4])
            .rotate([4.4, 0])
            .parallels([50, 60])
            .scale(50)
            .translate([width / 2, height / 2]);
  
  var path = d3.geo.path()
      .projection(projection);
  
  
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
  
  queue()
      .defer(d3.json, "uk.topo.json")
      .defer(d3.tsv, "unemployment.tsv", function(d) { rateById.set(d.id, +d.rate); })
      .await(ready);
  
  function ready(error, uk) {
      svg.append("g")
       .attr("class", "counties")
       .selectAll("path")
       .data(topojson.feature(uk, uk.objects.counties).features)
       .enter().append("path")
  //     .attr("class", function(d) { return quantize(rateById.get(d.id)); })
       .attr("class", "q5-9" )
       .attr("d", path);
  
  //  svg.append("path")
  //     .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
  //      .attr("class", "states")
  //     .attr("d", path);
  }
  
  d3.select(self.frameElement).style("height", height + "px");
  </code></pre>
  
  <p>The counties topoJSON is too big to be pasted here, but roughly it's:</p>
  
  <pre><code>{"type":"Topology","objects":{"counties":{"type":"GeometryCollection","bbox":[220956.7,35190.3,655967.1,586683],"geometries":[{"type":"Polygon","properties":{"name":"Buckinghamshire"},"id":11901,"arcs":[[-1,-2,-3,-4,-5,-6]]},{"type":"Polygon","properties":{"name":"Cambridgeshire"},"id":1386,"arcs":[[-7,-8,-9,-10,-11,-12,-13,-14]]},{"type":"Polygon","properties":{"name":"Cumbria"},"id":13244,"arcs":[[-15,-16,-17]]},{"type":"Polygon","properties":{"name":"Derbs"},"id":13688,"arcs":[[-18,-19,-20,-21],[-22]]},...},"arcs":[[[5876,2688],[-67,53],[-21,101],[7,65],[96,66],[-7,66],[-78,69],[-234,12],[-5,42],...},"transform":{"scale":[43.5053905390539,55.15478547854785],"translate":[220956.7,35190.3]}}
  </code></pre>
  
  <p>I'm not a great expert here so I might be doing something fundamentally wrong. However, I have one certainty:</p>
  
  <ul>
  <li>the UK counties map is correct, as it displays correctly on <a href="http://www.mapshaper.org/" rel="nofollow">http://www.mapshaper.org/</a></li>
  </ul>
  
  <p>Any idea? I'm happy to paste the complete files if needed.</p>
  
  <p>Thanks!</p>