[GIS] D3 javascript and GeoJSON: lines in Stockholm map very strange

d3geojsonqgis

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

Best Answer

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.

Related Question