Circle clip and projection with D3 orthographic

Question

I'm working on this and I'm having trouble with clipping the red circle elements as they appear on the globe even past the 90˚ clip angle. Also, is there a way you can apply the projection to the red circles, as in so it looks like they're on the surface of the globe relative to the orthographic angle? At the moment they just appear as 2d circles relative to the screen.

Stipulation

Answer 1

Instead of using <circle> elements, you can use GeoJSON point geometries:

{type: "Point", coordinates: [λ, φ]}

These can then be clipped via D3’s projection system, depending on the clipAngle that you’ve set. So you might have something like:

var path = d3.geo.path().projection(…);

data.forEach(function(d) {
  svg.append("path")
      .datum({type: "Point", coordinates: [d.Lon, d.Lat]})
      .attr("d", path.pointRadius(d.Magnitude));
});

Note how the radius of the point is set via the path for each point. You can also set the pointRadius to be a function, so you could do something like:

var path = d3.geo.path()
    .projection(…)
    .pointRadius(function(d) { return d.radius; });

svg.selectAll("path.point")
    .data(data)
  .enter().append("path")
    .datum(function(d) {
       return {type: "Point", coordinates: [d.Lon, d.Lat], radius: d.Magnitude};
    })
    .attr("class", "point")
    .attr("d", path);

The second part of your question asks whether the circles can be true geographic circles. d3.geo.circle can generate geographic circle features (again, as GeoJSON), which will be properly clipped:

var path = d3.geo.path().projection(…),
    circle = d3.geo.circle();

svg.selectAll("path.point")
    .data(data)
  .enter().append("path")
    .datum(function(d) {
       return circle
           .origin([d.Lon, d.Lat])
           .angle(d.Magnitude)();
    })
    .attr("class", "point")
    .attr("d", path);

Dour

Thank you for taking the time to provide an answer, I really appreciate it. Your code was exactly what I was after. Also, thank you for all of your wonderful contributions to D3 itself! – Stipulation

@Jason is there any way to transition the d3.geo.circles angle/radius? How about origin? – Oviduct

Do you have any suggestions on how to best handle large datasets? I have implemented something similar to your last suggestion, but have found that there is a considerable lag with 2k+ points on a rotating globe (as is too be expected). Wondering if there are any tricks to smooth things out a bit. – Inapprehensible