[SOLVED] Parsing error when drawing SVG paths from GeoJSON

Parsing error when drawing SVG paths from GeoJSON

I made a world map with D3.js. Everything worked like a charm. I then used the same code for a different geojson file, depicting Sweden only, and got multiple parsing errors. Both json files have the same structure, are well-formatted and so on. The only difference is the coordinates, so I'm suspecting that's were the problem lies. Any ideas?

I'm using QGIS to convert shapefiles to the geojson format. The error I'm getting is: "Error: Problem parsing d='[the path string]'". And the path string contains NaN here and there.

Sweden.json excerpt:

{
"type": "Feature",
"id": 0,
"properties": {
    "KNKOD": "0114",
    "KNNAMN": "Upplands Väsby",
    "LANDAREAKM": 75.4
},
"geometry": {
    "type": "Polygon",
    "coordinates": [
        [
            [
                1620218.000425555,
                6599561.998826771
            ],...

Countries.json excerpt

{
"type": "Feature",
"id": 0,
"properties": {
    "type": "Country",
    "name": "Aruba"
},
"geometry": {
    "type": "Polygon",
    "coordinates": [
        [
            [
                -69.89912109375,
                12.452001953124991
            ],...

Javascript

var canvas = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 1000)

d3.json("sweden/countries.geojson", function (data) {

var group = canvas.selectAll("g")
    .data(data.features)
    .enter()
    .append("g")

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

var areas = group.append("path")
    .attr("d", path)
})

Solution

Your GeoJSON files aren't in the same coordinate system. The coordinates for Sweden look like they're in UTM. When converting to GeoJSON with QGIS, make sure that you're using the same coordinate system for Sweden as you did for the world file -- this should fix the error.