3

All the code and shapefiles that I'm using are available in this GitHub repo.

I'm trying to draw a map of Stockholm with D3. The shapefile looks ok in QGIS:

Stockholm Shapefile

However, drawing the GeoJSON produces something that looks like abstract art:.

Stockholm GeoJSON

Is my shapefile corrupted or am I doing something wrong otherwise?

The steps to produce my GeoJSON are as follows:

  1. Open the Adm.shp file as layer in QGIS
  2. Save the layer as GeoJSON
  3. Drawing GeoJSON using D3 in stockholm.html

I have tried ogr2ogr on the command line as well with the same results.

EDIT

I did some operations on the coordinates, dividing lat by 1E4 and long by 1E5. The result looks a bit better (but far from the image that is seen in QGIS (probably an issue with the projection?)):

enter image description here

  • What projection is your shapefile in, and have you accounted for that? – Richard Law Sep 7 '15 at 9:10
  • The projection (Coordinate Reference System) is SWEREF99 1800. I previsously tried to save the GeoJSON in a different projection (World Mercator), but I got the same results. If I understand the GeoJSON format correctly, the projection should not matter though. I.e. the coordinates that are stored in GeoJSON should be indenpendent of the projection. Is that correct? – seb Sep 7 '15 at 9:24
  • 1
    Coordinates can be saved into GeoJSON in any projection geojson.org/…. They try to force EPSG:4326 long-lat coordinates for the new version of the spec tools.ietf.org/html/draft-butler-geojson-06#section-3. I do not know what projections D3 accepts but it may be best to converts your data into EPSG:4326 by using ogr2ogr with -s_srs and -t_srs parameters. – user30184 Sep 7 '15 at 10:17
  • 1
    Reprojecting the EPSG:3031 to EPSG:4326 gives me the same squished map view. – nmtoken Sep 7 '15 at 10:37
  • 1
    ogr2ogr is only doing what you ask it to do and it creates GeoJSON in EPSG:3011. If D3 can only handle the default long-lat GeoJSON, make conversion as ogr2ogr -f "GeoJSON" -s_srs epsg:3011 -t_srs epsg:4326 adm.json adm.shp For adjusting how the map is rendered you must perhaps study github.com/mbostock/d3/wiki/Geo-Projections. – user30184 Sep 7 '15 at 10:39
4

Your test.geojson gives you this result, because it is projected as EPSG:3031 as stated in the comments, and you are telling d3 that that is a Mercator projection.

If you reproject to EPSG:4326, as also suggested, a squished map is exactly what you expect. Your location is rather up north. Remember that Mercator projects well only around the equator and the further north (or south) you go the more distorted your areas become.

Since you have a projected shape file as source I would suggest you work with projected topojson.

You can generate your topojson from the shapefile like this (following Mike Bostock's block):

topojson \
  --width 960 \
  --height 1160 \
  -s .25 \
  -o adm.json \
  -- adm=Adm.shp    

Then use this in d3:

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

The complete code:

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>

<script>
var width = 960,
    height = 1160;

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

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

d3.json("adm.json", function(error, stkhlm) {
  if (error) return console.error(error);
  svg.append("path")
      .datum(topojson.feature(stkhlm, stkhlm.objects.adm))
      .attr("d", path)
      .style("stroke", "white");
});
</script>

enter image description here

So there is nothing corrupt with your coordinates. However, you do want to check your shapefile: there are multiple polygons on top of each other, covering the same area. As you can see, the d3 shows many more polygons than what you see with Qgis. Check your attribute table: you have 158 administrative areas, but the areas you see with Qgis are far fewer than that.

  • Thanks for your excellent problem analysis and well-written answer! – seb Sep 9 '15 at 6:28

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.