D3 Examples - trip map

xxxxxxxxxx
 
<!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 drawRoute() {
      context.beginPath();
      context.strokeStyle = 'red';
      context.fillStyle = 'red';
      
      geoGenerator({type: 'Feature', geometry: {type: 'LineString', coordinates: [kyivLon, pieveLon]}});
      context.stroke();
      
      var circle1 = d3.geoCircle()
        .center(kyivLon)
        .radius(.3);
      
      var circle2 = d3.geoCircle()
        .center(pieveLon)
        .radius(.3);
      
      context.beginPath();
      context.strokeStyle = 'red';
      geoGenerator(circle1());
      context.stroke();
      context.fill();     
      
      context.beginPath();
      context.strokeStyle = 'red';
      geoGenerator(circle2());
      context.stroke();
      context.fill();     
    }
    
    function drawGlobe() {
      var graticule = d3.geoGraticule();
      context.beginPath();
      context.strokeStyle = '#ccc';
      geoGenerator(graticule());
      context.stroke();
    }
​
    function drawMap(geojson) {
      context.lineWidth = 0.5;
      context.strokeStyle = '#333';   
      
      context.beginPath();
        geoGenerator({type: 'FeatureCollection', features: geojson.features});
        context.stroke();      
    }
​
  </script>
</body>
​
    