Skip to content

Instantly share code, notes, and snippets.

@jasondavies

jasondavies/index.html

Created September 28, 2012 18:32
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 jasondavies/3801416 to your computer and use it in GitHub Desktop.
Save jasondavies/3801416 to your computer and use it in GitHub Desktop.
Download ZIP
Clipping Self-Intersections
Raw
index.html
<!DOCTYPE html>
<style>
path {
stroke: #ccc;
fill: none;
}
path.clip {
stroke: #fff;
fill: #fc0;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var polygon = {
type: "Polygon",
coordinates: [[
[-30, -30],
[-30, 30],
[ 10, -10],
[-20, 10],
[-20, -20],
[ 20, -20],
[ 20, 10],
[-10, -10],
[ 30, 30],
[ 30, -30],
[-30, -30]
]]
};
var path = d3.geo.path().projection(d3.geo.mercator().translate([width / 2, height / 2]).scale(width));
var svg = d3.select("body").append("svg");
svg.append("path")
.datum(polygon)
.attr("d", path);
var circle = d3.geo.circle().origin([0, -90]);
var clipPath = svg.append("path").attr("class", "clip");
d3.timer(function(elapsed) {
clipPath
.datum(circle.angle(45 + elapsed / 100).clip(polygon))
.attr("d", path);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment