Why d3.js works only with GeoJSON that is left-hand formatted?
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[0, 0], [10, 0], [0, 10], [0, 0]
]
]
}
}
]
};
is supposedly well formed and not broken - https://geojsonlint.com/ shows it as follows
while d3.js shows it as a hole in the world (filled area across entire world except that area)
My, likely bungled, d3 attempt code is hosted at https://matkoniecz.github.io/wat/valid.html (with correct GeoJSON). Version with points in reverse order, raising warnings elsewhere works: https://matkoniecz.github.io/wat/map.html
What is going on here? I am likely missing something but I run out of ideas. Maybe d3 is simply not supporting GeoJSON? And all examples that I found are broken/confusing because people who made them were unaware that GeoJSON is not supported?
Code is also posted below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="content">
<svg width="800px" height="600px">
<g class="generated_map" id="generated_map"></g>
</svg>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.6.2/d3.min.js"></script>
<script>
const width = 800;
const height = 600;
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
//[-179, 80], [179, 0], [179, 80], [-179, 80] // works? why?
//[0, 0], [10, 0], [0, 10], [0, 0] // hole in the world
[0, 0], [0, 10], [10, 0], [0, 0]
]
]
}
}
]
};
var projection = d3.geoMercator().fitSize([width, height], geojson)
var geoGenerator = d3.geoPath()
.projection(projection);
function update(geojson) {
var u = d3.select('#content g.generated_map')
.selectAll('path')
.data(geojson.features);
u.enter()
.append('path')
.attr('d', geoGenerator)
.attr("stroke", 'black')
.attr("stroke-width", "1")
.attr("fill", "blue")
}
update(geojson);
</script>
</body>
</html>
