Skip to content

Instantly share code, notes, and snippets.

@BBischof
Created June 26, 2016 23:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BBischof/705ac31b343d4b94aad5a3f9eb82f25d to your computer and use it in GitHub Desktop.
Save BBischof/705ac31b343d4b94aad5a3f9eb82f25d to your computer and use it in GitHub Desktop.
Orthographic Clipping
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
<style>
circle,
path {
fill: none;
stroke: #333;
}
circle {
stroke-width: 2px;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var rotate = [-71.03, 42.37],
velocity = [.018, .006];
var projection = d3.geo.orthographic()
.scale(240)
.clipAngle(90);
var path = d3.geo.path()
.projection(projection);
var url = "http://enjalot.github.io/wwsd/data/world/world-110m.geojson"
var graticule = d3.geo.graticule();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var feature = svg.append("path")
.datum(graticule);
d3.json(url, function(err, geojson) {
var outlines = svg.append("path")
.attr("d", path(geojson))
d3.timer(function(elapsed) {
projection.rotate([rotate[0] + elapsed * velocity[0], rotate[1] + elapsed * velocity[1]]);
feature.attr("d", path);
outlines.attr("d", path(geojson));
});
})
svg.append("circle")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", 240);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment