Great Arcs

Instead of drawing straight lines from a certain set of coordinates to another, d3.geo generates great arcs. These paths are the shortest distance between two points on a sphere.

forked from martgnz's block: Great Arcs

<!DOCTYPE html>
<meta charset="utf-8" /> 
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/mourner/rbush/rbush.js"></script>
<script src="//cdn.jsdelivr.net/gh/newsappsio/spam/spam.min.js"></script>

var graticule = d3.geo.graticule()

var route = {
    type: "LineString",
    coordinates: [
        [-77.05, 38.91], [116.35, 39.91],
        [-39.927962, -5.058878], [46.587640, -18.909864]
    ]
}

d3.json("world.json", function(error, d) {
    topojson.presimplify(d)

var map = new StaticCanvasMap({
        element: "body",
        width: width,
        height: height,
        projection: d3.geo.azimuthalEquidistant()
            .scale(160)
            .translate([width / 2, height / 2])
            .clipAngle(180 - 4e-3)
            .precision(.1),
        data: [{
                features: topojson.feature(d, d.objects["countries"]),
                static: {
                    prepaint: function(parameters) {
                        parameters.context.beginPath()
                        parameters.path(graticule())
                        parameters.context.lineWidth = 0.2
                        parameters.context.strokeStyle = 'rgba(30,30,30, 0.5)'
                        parameters.context.stroke()
                    },
                    paintfeature: function(parameters, d) {
                        parameters.context.lineWidth = 1.5
                        parameters.context.strokeStyle = "rgb(255,255,255)"
                        parameters.context.stroke()

parameters.context.fillStyle = "rgb(225, 220, 220)";
                        parameters.context.fill()
                    },
                    postpaint: function(parameters) {                        
                        parameters.context.beginPath()
                        parameters.path(route)
                        parameters.context.strokeStyle = "rgb(209, 25, 25)"
                        parameters.context.stroke()
                    }
                }
            }
        ]
    })
    map.init()
})
</script>

Updated missing url //cdn.rawgit.com/mourner/rbush/master/rbush.js to //cdn.jsdelivr.net/gh/mourner/rbush/rbush.js

Updated missing url //cdn.rawgit.com/newsappsio/spam/master/spam.min.js to //cdn.jsdelivr.net/gh/newsappsio/spam/spam.min.js

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

https://d3js.org/topojson.v1.min.js

https://d3js.org/d3.geo.projection.v0.min.js

https://cdn.rawgit.com/mourner/rbush/master/rbush.js

https://cdn.rawgit.com/newsappsio/spam/master/spam.min.js