map = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("path")
.attr("fill", "#fff")
.attr("d", path(sphere));
svg.append("path")
.attr("fill", "#eee")
.attr("stroke", "#444")
.attr("stroke-width", 0.5)
.attr("d", path(land));
if (showOverlay) {
const circle = d3.geoCircle();
svg.append("g")
.attr("fill", "none")
.attr("stroke", "#f00")
.selectAll("path")
.data(d3.range(10, 180, 10))
.join("path")
.attr("d", r => path(circle.center(a).radius(r)()));
svg.append("g")
.attr("fill", "none")
.attr("stroke", "#00a2f3")
.selectAll("path")
.data(d3.range(10, 180, 10))
.join("path")
.attr("d", r => path(circle.center(b).radius(r)()));
}
svg.append("path")
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-width", 1.5)
.attr("d", path(sphere));
return svg.node();
}