Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
ne_10m_admin_0_countries_lakes
ne_10m_airports
README.md
airports.json
airports.topo.json
countries.json
countries.topo.json
index.html
package.json

README.md

Flight Animation

Create TopoJSON world map

# Download "Admin 0 - Countries" zip file from Natural Earth

# Convert shapefile to GeoJSON (exclude Antartica)
ogr2ogr -f GeoJSON -where "SU_A3 <> 'ATA'" countries.json ne_10m_admin_0_countries_lakes/ne_10m_admin_0_countries_lakes.shp

# Convert GeoJSON to TopoJSON
./node_modules/.bin/topojson --id-property SU_A3 -p name=NAME -p name -o countries.topo.json countries.json

Create TopoJSON airport data

# Download "Airports" zip file from Natural Earth

# Convert shapefile to GeoJSON (include major airpots)
ogr2ogr -f GeoJSON -where "scalerank < 6" airports.json ne_10m_airports/ne_10m_airports.shp

# Convert GeoJSON to TopoJSON
./node_modules/.bin/topojson --id-property abbrev -o airports.topo.json airports.json

Draw maps and airports

Load them via d3.

Draw plane in SVG

var plane = svg.append("path")
    .attr("class", "plane")
    .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");

Draw flight path

Draw an arc between two airports:

var route = svg.append("path")
    .datum({type: "LineString", coordinates: [origin, destination]})
    .attr("class", "route")
    .attr("d", path);

Animate plane

Define the transition function. Use an attrTween and path.getPointAtLength() which returns the coordinate where we should move the plane.

Rotate plane

Find two points on the path and calculate an angle from the North. Add rotate transform to make the plane point to the direction of the flight.

Source

Great information comes from tnoda.