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.rawgit.com/mourner/rbush/master/rbush.js"></script>
<script src="//cdn.rawgit.com/newsappsio/spam/master/spam.min.js"></script>
<script type='text/javascript'>
var width = 960,
height = 960
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>