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
license: mit | |
border: none | |
height: 960 |
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> |