d3.geoPath() returns Error: <path> attribute d: Expected number, "M,ZM,ZM,ZM,Z" - geojson

Question

Edit: recreated the logic on jsfiddle https://jsfiddle.net/exLtcgrq/1/
I am trying to parse a simple GeoJSON file to D3 using the D3 V4 API.
My GeoJSON is simple:
{ "type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[10.0, 10.0], [60.0, 40.0], [50.0, 75.0],[20.0, 60.0]
]
},
"properties": {
"id": "1",
"Type": "campingspot"
}
},
{ "type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[20.0, 65.0], [50.0, 80.0], [50.0, 110.0],[20.0, 115.0]
]
},
"properties": {
"id": "1",
"Type": "campingspot"
}
}
]
}
I load thus using the d3.json() method and try using the d3-geo api to convert it to a path with this code:
var jsonData2 = d3.json("campingGeojson.json", function(error, json){
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", d3.geoPath())
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("fill", "green")
});
The console output on chrome tells me the following
Error: <path> attribute d: Expected number, "M,ZM,ZM,ZM,Z".
Any suggestions what is going wrong with using the geoPath method is highly appreciated.
Thank you.

Answer 1

Coordinates for geoJson polygons are an array of coordinate arrays (with the coordinates themselves being arrays). The first array indicates the shell, following arrays indicate holes.
So I think your geoJson should look more like:
"coordinates": [
[ [10.0, 10.0], [60.0, 40.0], [50.0, 75.0],[20.0, 60.0] ]
]