title: Loading topojson files into d3
body: <p>I'm working on loading geojson shape files into d3(I'm new to this-design background.) I have a map of the UK voting constituencies which is supplied by the Ordnance Survey. I have managed to translate this into a simplified shapefile with the WG8 projection and use it with a Mike Bostock tutorial, similiar to this one <a href="http://bl.ocks.org/2206590" rel="nofollow">http://bl.ocks.org/2206590</a>. I have pretty much got this working. The problem is that the shape file is massive, 5.2MB so I'm trying to get this into a topojson format. I've tried following the titorial at <a href="http://bost.ocks.org/mike/map/" rel="nofollow">http://bost.ocks.org/mike/map/</a> and have hit a couple of problems</p>
  
  <ol>
  <li><p>I don't have Homebrew on my Mac, and I'm not going to be getting it any time soon. The access privilidges on our machines are locked down incredibly tightly and the tech guys won't install any software for us. I've bypassed this by putting my shape file through the translator at <a href="http://www.shpescape.com/" rel="nofollow">http://www.shpescape.com/</a> but I think the shape file it topojson file it produces doen't quite have the syntax for the tutorial I'm working with and I'm not sure how to change it. A sample of it looks like this</p>
  
  <p>{"objects": {"pcon_gb_2010_area 1": {"type": "GeometryCollection","geometries":[{"type":"Polygon", "arcs": [[0, 1, 2, 3, 4, 5, 6, 7, 8,9, 10]]}, {"type": "Polygon", "arcs": [[11,12, 13, 14, 15, 16, 17, 18,19, 20, 21, 22]]}, {"type": "Polygon", "arcs": [[23, 24, 25, 26, 27, 28,29, 30, 31]]}, {"type": "Polygon", "arcs": [[32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44]]}, {"type": "Polygon", "arcs": [[45, 46, 47, 48,49, 50, 51, 52, 53, 54, 55, 56]]}, {"type": "Polygon", "arcs": [[57, 58,59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70]]}</p></li>
  </ol>
  
  <p>and the code I'm using looks like this</p>
  
  <pre><code>d3.json("assets/test21.json", function(error, uk) {
      console.log(uk);
  
      var width = 960,
      height = 1160;
  
      var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
  
      d3.json("uk.json", function(error, uk) {svg.append("path")
                .datum(topojson.object(uk, uk.objects.subunits))
                .attr("d", d3.geo.path().projection(d3.geo.mercator()));
  </code></pre>
  
  <p>The object seems to load OK and I can examine it in the console log but I get this error</p>
  
  <p>NS_ERROR_DOM_BAD_URI: Access to restricted URI denied
  [Break On This Error]   </p>
  
  <p>.../apis.google.com/<em>/abc-static/</em>/js/gapi/iframes,googleapis_client/rt=j/ver=GyFIW...</p>
  
  <p>I'm using d3 shape files rather than loading a .svg file so I can perform some transitions later on. The shape file was generated using the MacPublisher plug in for illustrator.</p>
  
  <p>Any help gratefully received</p>