0

I would like to display a map of the UK Westminster Parliamentary Constituencies in D3 with a width of 980px.

I have downloaded and extracted the ordnance survey ESRI shapefiles from here: https://www.ordnancesurvey.co.uk/opendatadownload/products.html.

I have converted the .shp file to GeoJSON and then to TopoJSON:

ogr2ogr -t_srs WGS84 -f GeoJSON input.json bdline_essh_gb_0516/Data/GB/westminster_const_region.shp
topojson -o output.json -s 7e-7 --id-property NAME constituencies=input.json

The file output.json is about 110K. Here's some sample output:

{
  "type": "Topology",
  "objects": {
    "constituencies": {
      "type": "GeometryCollection",
      "geometries": [
        {
          "type": "Polygon",
          "id": "Aberavon Co Const",
          "arcs": [
            [
              0,
              1,
              2,
              3,
              4,
              5
            ]
          ]
        },
...
      ]
    }
  },
  "arcs": [
    [
      [
        4058,
        1538
      ],
      [
        0,
        6
      ],
      [
        -1,
        0
      ],

    ]
  ],
...
  "transform":{
    "scale":[
      0.09800980098009801,
      -0.18306403629989057
    ],
    "translate":[
      0,
      1830.4572989626058
    ]
  }
}

My D3 code looks like this:

var width = 980;
var height = 980;

var projection = d3.geo.albers()
.center([1.3, 55.4])
.rotate([4.4, 0])
.parallels([50, 60])
.scale(100)
.translate([width / 2, height / 2]);

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

var svg = d3.select("#data-vis")
.append("svg")
.attr("width", width)
.attr("height", height);

queue()
.defer(d3.json, "output.json")
.await(ready);

function ready(error, uk) {
  if (error) throw error;

  svg.append("g")
  .attr("class", "constituencies")
  .selectAll("path")
  .data(topojson.feature(uk, uk.objects.constituencies).features)
  .enter()
  .append("path")
  .attr("d", path);

}

The output looks like this:

enter image description here

I've tried these commands for creating my map data:

  • ogr2ogr -f GeoJSON input1.json bdline_essh_gb_0516/Data/GB/westminster_const_region.shp
  • ogr2ogr -t_srs WGS84 -f GeoJSON input2.json bdline_essh_gb_0516/Data/GB/westminster_const_region.shp
  • ogr2ogr -t_srs EPSG:4326 wgs84.shp bdline_essh_gb_0516/Data/GB/westminster_const_region.shp
  • ogr2ogr -s_srs EPSG:27700 -t_srs EPSG:4326 input4.json bdline_essh_gb_0516/Data/GB/westminster_const_region.shp
  • ogr2ogr -f GeoJSON input4.json wgs84.shp

...and then these:

  • topojson -o output1.json input1.json
  • topojson -o output2.json constituencies=input1.json
  • topojson -o output3.json -q 1e4 constituencies=input1.json
  • topojson -o output4.json -q 1e3 constituencies=input1.json
  • topojson -o output5.json -s constituencies=input1.json
  • topojson -o output5.json -s 7e-7 constituencies=input.json
  • topojson -o output6.json -s 7e-7 --id-property NAME constituencies=input1.json
  • topojson -o output7.json -s 7e-7 --id-property NAME --width 980 constituencies=input1.json
  • topojson -o output8.json -q 1e4 -s 7e-7 --id-property NAME --width 980 constituencies=input1.json
  • topojson -o output9.json -s 7e-7 --id-property NAME constituencies=input2.json
  • topojson -o output10.json --id-property NAME constituencies=input4.json

Where am I going wrong?

  • 1
    what does ogrinfo say about your source shapefile? Has it got the projection right? – Spacedman Jun 20 '16 at 13:48
  • I've added the output from ogrinfo input.json -al -so above. Thanks. – 24ma13wg Jun 20 '16 at 14:00
  • Also, you say output.json in the conversion but ukwpc.json. Its not simply just that is it? – Spacedman Jun 20 '16 at 14:00
  • Sorry, no, I just renamed the file. It's the same. – 24ma13wg Jun 20 '16 at 14:08
  • 1
    -s_srs EPSG:27700 -t_srs EPSG:4326 will set & transform projections – Mapperz Jun 20 '16 at 15:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.