D3 Examples - travel map

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Geo interpolator</title>
</head>
​
<style>
body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
}
</style>
​
<body>
  <div id="content">
    <canvas width="800" height="400"></canvas>
  </div>
​
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
​
  <script>
var geojson = {}
​
var context = d3.select('#content canvas')
  .node()
  .getContext('2d');
​
var projection = d3.geoOrthographic()
  .scale(400)
  .rotate([-123, -27, -25]);
​
var geoGenerator = d3.geoPath()
  .projection(projection)
  .pointRadius(4)
  .context(context);
​
var TaichungLonLat = [120.59, 24.25];
var TokyoLonLat = [139.78, 35.55];
var ShanghaiLonLat = [121, 31];
var HochininhLonLat = [106.65, 10.8];
var IncheonLonLat = [126.44, 37.4];
var geoInterpolator = d3.geoInterpolate(TaichungLonLat, TokyoLonLat);
var u = 0;
var geoInterpolator1 = d3.geoInterpolate(TaichungLonLat, ShanghaiLonLat);
var v = 0;
var geoInterpolator2 = d3.geoInterpolate(TaichungLonLat, HochininhLonLat);
var p = 0;
var geoInterpolator3 = d3.geoInterpolate(TaichungLonLat, IncheonLonLat);
var r = 0;
​
​
​
function update() {
  context.clearRect(0, 0, 800, 600);
​
  context.lineWidth = 0.5;
  context.strokeStyle = '#333';
​
  context.beginPath();
  geoGenerator({type: 'FeatureCollection', features: geojson.features})
  context.stroke();
​
  // Graticule
  var graticule = d3.geoGraticule();
  context.beginPath();
  context.strokeStyle = '#ccc';
  geoGenerator(graticule());
  context.stroke();
​
  
​
  // Taichung - Tokyo
  context.beginPath();
  context.strokeStyle = 'red';
  geoGenerator({type: 'Feature', geometry: {type: 'LineString', coordinates: [TaichungLonLat, TokyoLonLat]}});
  context.stroke();
​
  // Taichung - Shanghai
  context.beginPath();
  context.strokeStyle = 'red';
  geoGenerator({type: 'Feature', geometry: {type: 'LineString', coordinates: [TaichungLonLat, ShanghaiLonLat]}});
  context.stroke();
​
  // Taichung - Shanghai
  context.beginPath();
  context.strokeStyle = 'red';
  geoGenerator({type: 'Feature', geometry: {type: 'LineString', coordinates: [TaichungLonLat, ShanghaiLonLat]}});
  context.stroke();
​
  // Taichung - Hochininh
  context.beginPath();
  context.strokeStyle = 'red';
  geoGenerator({type: 'Feature', geometry: {type: 'LineString', coordinates: [TaichungLonLat, HochininhLonLat]}});
  context.stroke();
​
  // Taichung - IncheonLon
  context.beginPath();
  context.strokeStyle = 'red';
  geoGenerator({type: 'Feature', geometry: {type: 'LineString', coordinates: [TaichungLonLat, IncheonLonLat]}});
  context.stroke();
​
​
 // Point
  context.beginPath();
  context.fillStyle = 'red';
  geoGenerator({type: 'Feature', geometry: {type: 'Point', coordinates: geoInterpolator1(v)}});
  context.fill();
​
​
 // Point
  context.beginPath();
  context.fillStyle = 'red';
  geoGenerator({type: 'Feature', geometry: {type: 'Point', coordinates: geoInterpolator(v)}});
  context.fill();
​
​
 // Point
  context.beginPath();
  context.fillStyle = 'red';
  geoGenerator({type: 'Feature', geometry: {type: 'Point', coordinates: geoInterpolator2(v)}});
  context.fill();
​
​
​
 // Point
  context.beginPath();
  context.fillStyle = 'red';
  geoGenerator({type: 'Feature', geometry: {type: 'Point', coordinates: geoInterpolator3(v)}});
  context.fill();
​
  v += 0.02
  if(v > 1) v = 0
​
}
​
​
// REQUEST DATA
d3.json('https://gist.githubusercontent.com/d3indepth/f28e1c3a99ea6d84986f35ac8646fac7/raw/c58cede8dab4673c91a3db702d50f7447b373d98/ne_110m_land.json', function(err, json) {
  geojson = json;
  window.setInterval(update, 50);
  // update(json);
})
​
  </script>
</body>
</html>
    