jasondavies/index.html

## index.html
<!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.github.com/d3/d3-plugins/clip/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"),
    n = 1000;

var origin = [0, 0],
    velocity = [.01, .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]});

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>
	<!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.github.com/d3/d3-plugins/clip/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"),
	n = 1000;

	var origin = [0, 0],
	velocity = [.01, .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]});

	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>