I am trying to build a rectangle using d3.js under the Mollweide projection. However, when I run the following script, the rectangle appears as an arc or a curved rectangle. I find bahaviur somewhat strange, since the parallels in the Mullwade projection are just straight lines. Can someone explain the effect? The same effect is preserved in other latitudes and other projections (even in Equirectangular).
<!DOCTYPE html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
var mainSVG = d3.select('body').append('svg').attr('width', 500).attr('height', 500);
var projection = d3.geoMollweide().scale(400).translate([250,750])
var path = d3.geoPath().projection(projection);
d3.json('test.json', function(error, vData) {
var features = vData.features;
mainSVG.selectAll('path')
.data(features)
.enter().append('path')
.attr('d', path)
.style('fill', 'red')
.style('stroke', 'black');
})
</script>
geojson file:
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "DN": 0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 7.6, 65.0 ], [ 60.4, 65.0 ], [ 60.4, 63.4 ], [ 7.6, 63.4 ], [ 7.6, 65.0 ] ] ] } }
]
}
and the result obtained :
An even stranger result when I try to build several neighboring rectangles at different latitudes :