D3 Examples - Vega vs leafletjs

Vega vs leaflet.js

Same GeoJSON but different results:)

Where curves come from? It should be rectangles as graticule on the same projection.

Why rectangles are holes? This is a simple polygon with exterior which fulfills rfc7946. 3.1.6. Polygon

Feature with id==2 has invalid coordinates as (-100.0,-110.0) but leaflet.js just clip it with valid area.

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega@4"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@3.0.0-rc3"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
  <script type="text/javascript" src="https://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
  <style>
​
  </style>
​
</head>
​
<body> 
​
<div>  
  <div id="mapid" style="height: 400px; float: left; width: 500px"  ></div>
  <div id="vis" style=" float: left"></div>
 </div> 
<script>
​
    d3.json("data.geo.json", function(error, data) {
    
  
    var layer = new L.StamenTileLayer("toner-lite");
    var map = new L.Map("mapid", {
        center: new L.LatLng(0, 0),
        zoom: 1
    });
    map.addLayer(layer);
​
​
    L.geoJSON(data,{
      style: function (f){
        return {color:f.properties.color}
      }
  }).addTo(map);
 });
​
    const spec = "map.vg.json";
    vegaEmbed('#vis', spec, {defaultStyle: true}).catch(console.warn);
  </script>
</body>
    