travel map

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Geo interpolator</title>
</head>

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

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js