I'm using the d3.geo.conicEquidistant() projection on a world map approximately centered on the Pacific, my aim is to draw circles from a point, illustrating a specific distance, say 1000km, from this point on the map.
How can i calculate the correct radius on the projection, given specific kilometers?
Here is my code example (yes, it's about missile reaches from North Korea. Using artificially Pyongyang as launching point :), building on this question: Scale a circle's radius (given in meters) to D3.js d3.geo.mercator map
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke: white;
stroke-width: 0.25px;
fill: grey;
}
circle {
stroke: red;
stroke-width: 1px;
stroke-dasharray: 5;
fill: transparent;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
height = 500;
var projection = d3.geo.conicEquidistant()
.center([0, 5 ])
.scale((width + 1) / 2 / Math.PI)//.scale(150)
.rotate([-160,0]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var path = d3.geo.path()
.projection(projection);
var g = svg.append("g");
var missiles = [
{
name: "missile1",
location: { // appx lat&long of pyongyang
latitude: 125.6720717,
longitude: 39.0292506
},
reach: 1000 //radius of circle in kilometers on map
},
{
name: "missile2",
location: { // appx lat&long of pyongyang
latitude: 125.6720717,
longitude: 39.0292506
},
reach: 3500 //radius of circle in kilometers on map
},
];
// load and display the World
d3.json("https://s3-us-west-2.amazonaws.com/vida-public/geo/world-topo-min.json", function(error, topology) {
g.selectAll("path")
.data(topojson.object(topology, topology.objects.countries)
.geometries)
.enter()
.append("path")
.attr("d", path)
});
svg.selectAll(".pin")
.data(missiles)
.enter().append("circle", ".pin")
.attr("r", scaledRadius)
/*function(d) {
return d.reach
})*/
.attr("transform", function(d) {
return "translate(" + projection([
d.location.latitude,
d.location.longitude
]) + ")"
})
</script>
</body>
</html>
I looked at this answer, trying it out above, but was not quite able to apply it to my code (i'm quite new to d3 to be honest, there might be something very obvious wrong): https://stackoverflow.com/a/31616927/4623519
Further question: is this solution specific to the mercator projection?
(Let's ignore that we really need to hide Antarctica in this projection.)