Skip to content

Instantly share code, notes, and snippets.

@Fil
Last active Oct 31, 2018
Embed
What would you like to do?
Geographic Clipping: Spiral [UNLISTED]
license: mit
<!DOCTYPE html>
<meta charset="utf-8">
<title>Geographic Clipping of Spiral</title>
<body>
<script src="http://d3js.org/d3.v2.min.js"></script>
<script src="https://raw.githack.com/d3/d3-plugins/67c2f21e93e9a589dd17038c3b2e69f58ddfd8f2/geo/clip/clip.js"></script>
<script>
var xy = d3.geo.azimuthal().scale(200).mode("orthographic").origin([0, 90]),
dy = 5,
clip = d3.geo.clip().origin([0, 90]),
path = d3.geo.path().projection(xy),
svg = d3.select("body").append("svg")
.attr('width', 960)
.attr('height', 600)
,
n = 1000;
var origin = [0, 0],
velocity = [.1, .01],
t0 = Date.now();
var spiral = d3.range(0, 1 + 1 / n, 1 / n).map(function(t) {
return [(360 * 10 * t) % 360 - 180, -90 + dy + (90 - dy) * 2 * t];
}).concat(d3.range(1, 0, -1 / n).map(function(t) {
return [(360 * 10 * t) % 360 - 180, -90 + (90 - dy) * 2 * t];
}));
spiral.push(spiral[0]);
var a = svg.append("path")
.datum({type: "Polygon", coordinates: [spiral]})
.attr("d", path);
//if (0)
d3.timer(function() {
var t = Date.now() - t0,
o = [origin[0] + t * velocity[0], origin[1] + t * velocity[1]];
xy.origin(o);
clip.origin(o);
a.attr("d", function(d) { return path(clip(d)); });
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment