Skip to content

Instantly share code, notes, and snippets.

Last active August 17, 2017 13:54
  • Star 0 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
Star You must be signed in to star a gist
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

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