trip map

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <div id="content">
    <canvas width="800" height="500"></canvas>
  </div>
  <script>
    var kyivLon = [30.4, 50.4];
    var pieveLon = [10.7303628, 45.88];
    
    var context = d3.select('#content canvas').node().getContext('2d');
    var projection = d3.geoOrthographic()
    .scale(1800)
    .rotate([-25, -45]);

var geoGenerator = d3.geoPath()
    .projection(projection)
    .context(context);
    
    		d3.json('https://raw.githubusercontent.com/stefanocudini/leaflet-geojson-selector/master/examples/italy-regions.json', function(error, json) {
          context.fillStyle = 'red';
      context.font = "19pt calibri";

var pieve = json.features[3];
      var pieveCords = geoGenerator.centroid(pieve);
      context.fillText(pieve.properties.name, pieveCords[0] - 120, pieveCords[1] - 40)
      
			drawMap(json);
    })
  
    d3.json('https://raw.githubusercontent.com/EugeneBorshch/ukraine_geojson/master/Ukraine.json', function(error, json) {
      context.fillStyle = 'red';
      context.font = "19pt calibri";

var kyiv = json.features[10];
      var kyivCords = geoGenerator.centroid(kyiv);
      context.fillText(kyiv.properties.name, kyivCords[0], kyivCords[1] - 30)
      
      geoGenerator.area(kyiv);
      
      drawMap(json);
      drawRoute();
      drawGlobe();
    });

function drawMap(geojson) {
      context.lineWidth = 0.5;
      context.strokeStyle = '#333';   
      
      context.beginPath();
    	geoGenerator({type: 'FeatureCollection', features: geojson.features});
    	context.stroke();      
    }

</script>
</body>

https://d3js.org/d3.v4.min.js