This example to illustrate d3.geoCircle
for Spaxe.
forked from mbostock's block: Two Point Equidistant
license: gpl-3.0 |
This example to illustrate d3.geoCircle
for Spaxe.
forked from mbostock's block: Two Point Equidistant
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.land { | |
fill: #eee; | |
stroke: #444; | |
stroke-width: .5px; | |
} | |
.circle { | |
fill: none; | |
} | |
.circle.a { | |
stroke: #f00; | |
} | |
.circle.b { | |
stroke: #00a2f3; | |
} | |
</style> | |
<body> | |
<script src="//d3js.org/d3.v4.0.0-rc.2.js"></script> | |
<script src="//d3js.org/topojson.v1.min.js"></script> | |
<script> | |
var width = 960, | |
height = 500; | |
var a = [0, 90], // NORTH POLE | |
b = [-77, 39], // Washington, DC | |
circle = d3.geoCircle(); | |
console.log(d3) | |
var projection = d3.geoEquirectangular() | |
.scale(140) | |
.translate([width / 2, height / 2]) | |
.precision(.1); | |
var path = d3.geoPath() | |
.projection(projection); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
svg.append("g") | |
.attr("class", "circle a") | |
.selectAll("path") | |
.data(d3.range(5, 90, 5)) | |
.enter().append("path") | |
.attr("d", function(r) { return path(circle.center(a).radius(r)()); }); | |
svg.append("g") | |
.attr("class", "circle b") | |
.selectAll("path") | |
.data(d3.range(5, 90, 5)) | |
.enter().append("path") | |
.attr("d", function(r) { return path(circle.center(b).radius(r)()); }); | |
d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-110m.json", function(error, world) { | |
if (error) throw error; | |
svg.insert("path", ".circle") | |
.datum(topojson.feature(world, world.objects.land)) | |
.attr("class", "land") | |
.attr("d", path); | |
}); | |
d3.select(self.frameElement).style("height", height + "px"); | |
</script> |