1

I am trying to plot a rectangle using d3.js under the Mollweide projection. However, when I run the following script the rectangle appears as an arc or curved rectangle. I find the bahaviour somewhat strange since the parallels in Mollweide projection are just straight lines. Could someone explain the effect? The same effect persists in other latitudes and other projections (even the Equirectangular one) as well.

<!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>

the 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 resulting figure:

enter image description here

An even more weird result when I try to plot several neighbouring rectangles at different latitudes: enter image description here