Skip to content

Instantly share code, notes, and snippets.

@martgnz
Last active January 23, 2017 07:24
Show Gist options
  • Save martgnz/3366e00fc27b6dfb66e60134457e8097 to your computer and use it in GitHub Desktop.
Save martgnz/3366e00fc27b6dfb66e60134457e8097 to your computer and use it in GitHub Desktop.
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.

<!DOCTYPE html>
<meta charset="utf-8" />
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="https://unpkg.com/rbush@1.4.3/rbush.js"></script>
<script src="https://unpkg.com/spamjs@1.1.0/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("/mbostock/raw/4090846/world-50m.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment