Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active August 17, 2017 13:54
Show Gist options
  • Save mbostock/5928813 to your computer and use it in GitHub Desktop.
Save mbostock/5928813 to your computer and use it in GitHub Desktop.
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">
<style>
.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;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 480;
var projection = d3.geo.equirectangular()
.scale(153)
.rotate([160, 0])
.translate([width / 2, height / 2])
.precision(.1);
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
svg.append("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")
.datum(topojson.feature(world, world.objects.land))
.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);
});
d3.select(self.frameElement).style("height", height + "px");
</script>
@sidsamant
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