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.
# d3.geo.albersUsa() The Albers USA projection is a composite projection of four Albers projections designed to display the forty-eight lower United States alongside Alaska and Hawaii.
The geographic path generator, d3. geoPath, is similar to the shape generators in d3-shape: given a GeoJSON geometry or feature object, it generates an SVG path data string or renders the path to a Canvas. Canvas is recommended for dynamic or interactive projections to improve performance.
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With