1

I am following Mike's page (http://bost.ocks.org/mike/map/) to make UK's map. I've converted Mr. Crone's UK postcode shapefile into topojson but failed to display it correctly.

http://www.sharegeo.ac.uk/handle/10672/51?show=full

ogr2ogr -f GeoJSON postcodes.json gb_pca_2010.shp
topojson -o uk.json --id-property Label postcodes.json

The resulting json is of 2.2M big. I have used the following code to display it

var height, svg, width;
width = 960;
height = 1160;

svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

d3.json("uk.json", function(error, uk) {
  var projection, subunits;
  if (error) {
    return console.error(error);
  }
  subunits = topojson.feature(uk, uk.objects.postcodes);
  projection = d3.geo.mercator().translate([width / 2, height / 2]);
  return svg.append("path").datum(subunits).attr("d", d3.geo.path().projection(projection));
});

The result is that firefox freezes and in the end, I get half black and half white display. :( I have also tried mapshaper to simplify it to 1MB but still not working.

What else I could have tried?

  • Have you tried it on other browsers to see if it is a Firefox Issue or generic? – Mark Cupitt Jul 20 '14 at 7:37
  • chrome freezes as well. yes, it is generic. – chfw Jul 20 '14 at 9:09
  • I uploaded the shapefile to mapshaper.org and can do visual simplifications. The results from that website cannot be displayed by above script. – chfw Jul 20 '14 at 11:38
  • here's the actual converted topojson file: dropbox.com/s/b3ic75aws19q9hx/gb_pca_2010.json – chfw Jul 20 '14 at 11:40
1

This worked for me.

var projection = d3.geo.albers().center([ 5.5, 56.4])
  .rotate([4.4, 0]).parallels([50, 60]).scale(1200 * 3);

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

var svg = d3.select("div#ukmap").append("div")
  .classed("svg-container",true)
  .append("svg").attr("preserveAspectRatio", "xMinYMin meet")
  .attr("viewBox", "0 0 1000 800")
  .classed("svg-content-responsive", true);

d3.json("/data/uk/uk.json", function(error, uk) {
  var subunits = topojson.feature(uk, uk.objects.subunits),
  places = topojson.feature(uk, uk.objects.places);

svg.selectAll(".subunit").data(subunits.features)
  .enter().append("path")
  .attr("class", function(d) { return "subunit " + d.id; })
  .attr("d", path);

svg.append("path")
  .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) {
    return a !== b && a.id !== "IRL"; 
  })).attr("d", path).attr("class", "subunit-boundary");

svg.append("path")
  .datum(topojson.mesh(uk, uk.objects.subunits, function(a, b) {
    return a === b && a.id === "IRL";
  })).attr("d", path).attr("class", "subunit-boundary IRL");

svg.selectAll(".subunit-label").data(subunits.features)
  .enter().append("text").attr("class", function(d) {
    return "subunit-label " + d.id;
   }).attr("transform", function(d) {
    return "translate(" + path.centroid(d) + ")"; 
   }).attr("dy", ".35em").text(function(d) {
    return d.properties.name;
   });

svg.append("path").datum(places).attr("d", path).attr("class", "place");

svg.selectAll(".place-label").data(places.features)
  .enter().append("text").attr("class", "place-label")
  .attr("transform", function(d) {
    return "translate(" + projection(d.geometry.coordinates) +  ")";
   }).attr("x", function(d) {
    return d.geometry.coordinates[0] > -1 ? 6 : -6;
   }).attr("dy", ".35em").style("text-anchor", function(d) {
    return d.geometry.coordinates[0] > -1 ? "start" : "end";
   }).text(function(d) {
    return d.properties.name;
   });
});

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.