TopoJSON map not rendering properly using D3

Question

I've downloaded this map of Great Britain and Ireland from Highcharts and converted from GeoJSON to TopoJSON format (topojson -o input output) but it just renders as a black box. I'm following the famous 'Let's make a map' tutorial:

var container = d3.select( "#container" );

var margin = 20,
    width = parseInt(container.style( "width" )),
    height = parseInt(container.style( "height" ));

var projection = d3.geo.mercator()
    .scale(50);

var path = d3.geo.path()
    .projection(projection);

var svg = container.append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("http://www.lenart.pl/assets/codepen/gb_all_ireland_topo.json", function(error, gb) {
    svg.append("path")
        .datum(topojson.feature(gb, gb.objects.gb_all_ireland_geo))
        .attr("d", path);

});

http://codepen.io/znak/pen/rVYbNB

I've previewed my TopoJSON file with http://jsoneditoronline.org and found the relevant object containing geometries (I think) but it doesn't work.

My ultimate goal is to visualise an interactive (administrative) map of GB & I. Thanks.

Answer 1

I believe the first spot of bother is the download from Highcharts--it seems to be in a projection that is not wgs84. So the coordinates given are not latitudes and longitudes. If you look at the beginning of highcharts.com/mapdata/custom/gb-all-ireland.geo.json you'll see a few "crs" keys, and mention of "EPSG:7405".

You can convert to wgs84 several ways, including:

ogr2ogr -f geojson eire_4326.geojson gb-all-ireland.geo.json -t_srs epsg:4326 -s_srs epsg:7405

You could then convert to topojson and pick up where you left off.

It's also important to realize that small changes in the scale and center values of the d3 projections can have big impacts.

If you're not tied to Highcharts, it's probably better to get data that's already in wgs84, like http://www.naturalearthdata.com/ or even use a more comprehensive library and data like mapsense https://developer.mapsense.co/tileViewer/. (Disclosure: I work at mapsense.)