Old school D3 from simpler times

All examples By author By category About

jasondavies

Full window Github gist

Geographic Clipping: Spiral

<!DOCTYPE html>
<meta charset="utf-8">
<title>Geographic Clipping of Spiral</title>
<body>
<script src="https://d3js.org/d3.v2.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/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>

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<title>Geographic Clipping of Spiral</title>
<body>
<script src="https://d3js.org/d3.v2.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/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>
    

Modified http://d3js.org/d3.v2.min.js to a secure url

Updated missing url https://raw.github.com/d3/d3-plugins/clip/geo/clip/clip.js to https://cdn.jsdelivr.net/gh/d3/d3-plugins/clip/geo/clip/clip.js

https://d3js.org/d3.v2.min.js

https://raw.github.com/d3/d3-plugins/clip/geo/clip/clip.js