Skip to content

Instantly share code, notes, and snippets.

@jasondavies
Created July 9, 2012 12:50
Show Gist options
  • Save jasondavies/3076312 to your computer and use it in GitHub Desktop.
Save jasondavies/3076312 to your computer and use it in GitHub Desktop.
Geographic Clipping: Holes
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
fill: none;
stroke: #000;
}
circle {
fill: none;
stroke: #000;
stroke-width: 3px;
}
</style>
<body>
<script src="http://d3js.org/d3.v2.min.js"></script>
<script src="https://raw.github.com/d3/d3-plugins/clip/geo/clip/clip.js"></script>
<script src="resample.js"></script>
<script>
var width = 400,
height = 400;
var origin = [0, 0],
velocity = [-.01, .01],
t0 = Date.now();
var projection = d3.geo.azimuthal()
.translate([width / 2, height / 2])
.mode("orthographic")
.origin(origin)
.scale(180);
var clip = d3.geo.clip()
.origin(origin);
var path = d3.geo.path()
.projection(projection);
var feature = {
type: "Polygon",
coordinates: [
[[-45, 45], [45, 45], [45, -45], [-45, -45], [-45, 45]],
[[-40, 40], [-40, -40], [-5, -40], [-5, 40], [-40, 40]],
[[5, 40], [5, -40], [40, -40], [40, 40], [5, 40]]
].map(d3.geo.resample)
};
var a = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("path")
.datum(feature);
var b = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("path")
.style("stroke", "blue")
.datum(feature);
d3.timer(function() {
var t = Date.now() - t0,
o = [origin[0] + t * velocity[0], origin[1] + t * velocity[1]];
projection.origin(o);
clip.origin(o);
a.attr("d", function(d) { return path(clip(d)); });
b.attr("d", path);
});
</script>
d3.geo.resample = (function() {
var arc = d3.geo.greatArc().target(function(d) { return d; });
// Resample coordinates, creating great arcs between each.
function resample(coordinates) {
var i = 0,
n = coordinates.length,
j,
m,
resampled = n ? [coordinates[0]] : coordinates,
resamples,
origin = arc.source();
while (++i < n) {
resamples = arc.source(coordinates[i - 1])(coordinates[i]).coordinates;
for (j = 0, m = resamples.length; ++j < m;) resampled.push(resamples[j]);
}
arc.source(origin);
return resampled;
}
return resample;
})();
@syntagmatic
Copy link

clip branch is missing, update to the projection branch

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