Skip to content

Instantly share code, notes, and snippets.

Last active Aug 17, 2017
What would you like to do?
Great Arc
license: gpl-3.0

A simple example drawing a great arc as a LineString. The projection is rotated to avoid interrupting the arc. See also an earlier example with multiple great arcs.

<!DOCTYPE html>
<meta charset="utf-8">
.graticule {
fill: none;
stroke: #777;
stroke-width: .5px;
stroke-opacity: .5;
.land {
fill: #bbb;
.arc {
fill: none;
stroke: red;
stroke-width: 3px;
stroke-linecap: round;
.boundary {
fill: none;
stroke: #fff;
stroke-width: .5px;
stroke-linejoin: round;
stroke-linecap: round;
<script src="//"></script>
<script src="//"></script>
var width = 960,
height = 480;
var projection = d3.geo.equirectangular()
.rotate([160, 0])
.translate([width / 2, height / 2])
var path = d3.geo.path()
var graticule = d3.geo.graticule();
var svg ="body").append("svg")
.attr("width", width)
.attr("height", height);
.attr("class", "graticule")
.attr("d", path);
.datum({type: "LineString", coordinates: [[-77.05, 38.91], [116.35, 39.91]]})
.attr("class", "arc")
.attr("d", path);
d3.json("/mbostock/raw/4090846/world-50m.json", function(error, world) {
if (error) throw error;
svg.insert("path", ".graticule")
.attr("class", "land")
.attr("d", path);
svg.insert("path", ".graticule")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
.attr("class", "boundary")
.attr("d", path);
});"height", height + "px");
Copy link

sidsamant commented Aug 13, 2017

Thanks for the nice example. I am new to d3 and the map projections.

Is there any example to draw an uninterrupted great arc without rotating the equirectangular projection?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment