This example uses d3.geo.circle and d3.geo.azimuthalEquidistant to draw rings of constant distance from Sydney.
forked from http://bl.ocks.org/mbostock/4436875
This example uses d3.geo.circle and d3.geo.azimuthalEquidistant to draw rings of constant distance from Sydney.
forked from http://bl.ocks.org/mbostock/4436875
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
background: #fcfcfa; | |
} | |
.stroke { | |
fill: none; | |
stroke: #000; | |
stroke-width: 3px; | |
} | |
.fill { | |
fill: #fff; | |
} | |
.graticule { | |
fill: none; | |
stroke: #777; | |
stroke-width: .5px; | |
stroke-opacity: .5; | |
} | |
.land { | |
fill: #222; | |
} | |
.boundary { | |
fill: none; | |
stroke: #fff; | |
stroke-width: .5px; | |
} | |
</style> | |
<body> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script> | |
<script> | |
var width = 960, | |
height = 960; | |
var projection = d3.geo.azimuthalEquidistant() | |
.scale(150) | |
.rotate([-151, 33.5]) | |
.clipAngle(180 - 1e-3) | |
.translate([width / 2, height / 2]) | |
.precision(.1); | |
var circle = d3.geo.circle() | |
.origin([151, -33.5]); | |
var path = d3.geo.path() | |
.projection(projection); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
svg.append("defs").append("path") | |
.datum({type: "Sphere"}) | |
.attr("id", "sphere") | |
.attr("d", path); | |
svg.append("use") | |
.attr("class", "stroke") | |
.attr("xlink:href", "#sphere"); | |
svg.append("use") | |
.attr("class", "fill") | |
.attr("xlink:href", "#sphere"); | |
svg.append("g") | |
.attr("class", "graticule") | |
.selectAll("path") | |
.data(d3.range(10, 190, 10).map(function(d) { return circle.angle(d)(); })) | |
.enter().append("path") | |
.attr("d", path); | |
d3.json("/mbostock/raw/4090846/world-50m.json", function(error, world) { | |
if (error) throw error; | |
svg.insert("path", ".graticule") | |
.datum(topojson.feature(world, world.objects.land)) | |
.attr("class", "land") | |
.attr("d", path); | |
svg.insert("path", ".graticule") | |
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) | |
.attr("class", "boundary") | |
.attr("d", path); | |
}); | |
d3.select(self.frameElement).style("height", height + "px"); | |
</script> |