Search code examples
javascriptd3.jsgisgeojsontopojson

topoJSON on D3: map doesn't show (but it works on www.mapshaper.org)

I'm trying to replicate http://bl.ocks.org/mbostock/4060606 using a UK Counties map.

I followed the following steps - pretty much what is suggested on http://bost.ocks.org/mike/map: 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

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?

For completeness, this is the javascript part of the page:

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");

The counties topoJSON is too big to be pasted here, but roughly it's:

{"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]}}

I'm not a great expert here so I might be doing something fundamentally wrong. However, I have one certainty:

Any idea? I'm happy to paste the complete files if needed.

Thanks!

Solution

  • The coordinates seem to be already projected (i.e. cartesian coordinates).

    In this case you should use

    d3.geo.path().projection(null);

    But make sure you scale your topojson first to the desired size

    topojson --width=960 --height=500 --margin=10 --cartesian -o out.json -- in.shp

    Or reproject the shapefile first using ogr2ogr

    ogr2ogr -t_srs EPSG:4326 out.shp in.shp