Simple Flight Animation

forked from AbnormalDistribution-2020's block: Simple Flight Animation

<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">

</style>
<body>

</body>
<script src="https://unpkg.com/topojson@3.0.2/dist/topojson.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>

var margins = {top:20, bottom:300, left:30, right:100};

var height = 600;
var width = 900;

var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;
var projection = d3.geoMercator().rotate([-80,0]).scale(500).translate([-200,500]);

var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);

var path = d3.geoPath().projection(projection);
/*
var svg = d3.select("body")
    .append('svg')
    .attr('width', 310)
    .attr('height', 150);
*/
var topoData = d3.json("world-continents.json");

var graphGroup = svg.append('g')
.attr('transform', "translate("+margins.left+","+margins.top+")");

svg.append('rect')
    .attr('width', width*2)
    .attr('height',height*2)
    .attr('x',0)
    .attr('y',0)
    .style('fill',"steelblue");

topoData.then(function(mapData) {

var map = svg.append('g').attr('class', 'boundary');

var continents = topojson.feature(mapData, mapData.objects.continent).features;

var world = map.selectAll('path').data(continents);

//var continent = map.selectAll('.continent').data(continents);

//var continents = topojson.feature(mapData, mapData.objects.continent).features;

world.enter()
    .append('path')
    .attr('d', path)
    .style('fill','lightgreen');

var plane = svg.append("path")
               .attr("class", "plane")
               .style('fill','#fff')
               .attr("d", "m25.21488,3.93375c-0.44355,0 -0.84275,0.18332 -1.17933,0.51592c-0.33397,0.33267 -0.61055,0.80884 -0.84275,1.40377c-0.45922,1.18911 -0.74362,2.85964 -0.89755,4.86085c-0.15655,1.99729 -0.18263,4.32223 -0.11741,6.81118c-5.51835,2.26427 -16.7116,6.93857 -17.60916,7.98223c-1.19759,1.38937 -0.81143,2.98095 -0.32874,4.03902l18.39971,-3.74549c0.38616,4.88048 0.94192,9.7138 1.42461,13.50099c-1.80032,0.52703 -5.1609,1.56679 -5.85232,2.21255c-0.95496,0.88711 -0.95496,3.75718 -0.95496,3.75718l7.53,-0.61316c0.17743,1.23545 0.28701,1.95767 0.28701,1.95767l0.01304,0.06557l0.06002,0l0.13829,0l0.0574,0l0.01043,-0.06557c0,0 0.11218,-0.72222 0.28961,-1.95767l7.53164,0.61316c0,0 0,-2.87006 -0.95496,-3.75718c-0.69044,-0.64577 -4.05363,-1.68813 -5.85133,-2.21516c0.48009,-3.77545 1.03061,-8.58921 1.42198,-13.45404l18.18207,3.70115c0.48009,-1.05806 0.86881,-2.64965 -0.32617,-4.03902c-0.88969,-1.03062 -11.81147,-5.60054 -17.39409,-7.89352c0.06524,-2.52287 0.04175,-4.88024 -0.1148,-6.89989l0,-0.00476c-0.15655,-1.99844 -0.44094,-3.6683 -0.90277,-4.8561c-0.22699,-0.59493 -0.50356,-1.07111 -0.83754,-1.40377c-0.33658,-0.3326 -0.73578,-0.51592 -1.18194,-0.51592l0,0l-0.00001,0l0,0z");
//start
               var coordinatesSH = projection([121.4737,31.2304]);

var coordinatesHN = projection([-157.8583,21.3069]);

var coordinatesTK = projection([139.7690,35.3804]);

var routeOne = svg.append('path')
                  .datum({type: "LineString", coordinates: [[121.4737,31.2304],[139.7690,35.3804]]})
                  .attr('class', 'route')
                  .attr('d', path);

function transition(plane, route) {
    var l = route.node().getTotalLength();
    plane.transition()
        .duration(2000)
        .attrTween('transform', delta(route.node()));

}

function delta(path) {
  var l = path.getTotalLength();

return function(i) {
    return function(t) {
      var p = path.getPointAtLength(t*l);
      return "translate(" +p.x+","+p.y+ ")";
    }
  }

}

transition(plane, routeOne);

svg.append("circle")
                       .attr("cx", coordinatesSH[0])
                       .attr("cy", coordinatesSH[1])
                       .attr("r", 3)
                       .style("fill", "black");

svg.append("circle")
                         .attr("cx", coordinatesHN[0])
                         .attr("cy", coordinatesHN[1])
                         .attr("r", 3)
                         .style("fill", "black");

svg.append("circle")
                         .attr("cx", coordinatesTK[0])
                         .attr("cy", coordinatesTK[1])
                         .attr("r", 3)
                         .style("fill", "black");
});
</script>

https://unpkg.com/topojson@3.0.2/dist/topojson.js

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