javascript - 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.

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);