D3 Examples - Simple Ellipsoid Gravity

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
path {
  stroke: #000;
  stroke-width: .5px;
}
​
circle {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}
​
</style>
<body>
<script src="https://d3js.org/d3.v2.min.js?2.9.6"></script>
<script src="geodesic.js"></script>
<script>
​
var width = 960,
    height = 500;
​
var origin = [0, 0],
    velocity = [.010, .005],
    t0 = Date.now();
​
var projection = d3.geo.azimuthal()
    .mode("orthographic")
    .origin(origin)
    .scale(240);
​
var path = d3.geo.path()
    .projection(projection);
​
var arc = d3.geo.greatArc()
    .source(origin)
    .target(function(d) { return d; });
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
svg.selectAll("path")
    .data(d3.geodesic.polygons(8))
  .enter().append("path")
    .style("fill", function(d) { return d3.hsl(d.coordinates[0][0][0], .7, .5); });
​
svg.append("circle")
    .attr("transform", "translate(" + projection(origin) + ")")
    .attr("r", 240);
​
d3.timer(function() {
  var t = Date.now() - t0,
      o = [origin[0] + t * velocity[0], origin[1] + t * velocity[1]];
  projection.origin(o);
  arc.source(o);
  svg.selectAll("path").attr("d", function(d) { return visible(d) ? path(d) : null; });
});
​
function visible(d) {
  return d.coordinates[0].some(function(p) {
    return arc.distance(p) < Math.PI / 2;
  });
}
​
</script>
    