Built with blockbuilder.org
forked from ungentilgarcon's block: fresh block
license: mit |
Built with blockbuilder.org
forked from ungentilgarcon's block: fresh block
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
path { fill : none ; stroke : black} | |
</style> | |
</head> | |
<body> | |
<script> | |
pyongyang= [125.75,39.03] | |
washington= [-77.01,38.89] | |
portee = d3.geoCircle().radius(6700*360/(2* Math.PI *6371)) | |
.center(pyongyang)() | |
// Feel free to change or delete any of the code you see in this editor! | |
var svg = d3.select("body").append("svg") | |
.attr("width", 960) | |
.attr("height", 500) | |
svg.append("text") | |
.text("Ecole d ete Enssib 2017") | |
.attr("y", 200) | |
.attr("x", 120) | |
.attr("font-size", 36) | |
.attr("font-family", "monospace") | |
//projection = d3.geoOrthographic() | |
projection = d3.geoEquirectangular() | |
//projection = d3.geoTwoPointAzimutal(pyongyang,washington) | |
.rotate([62,11]) | |
path = d3.geoPath(projection) | |
svg.append("path") | |
.attr("d",path({type: "Sphere"})) | |
d3.json("https://rawgit.com/visionscarto/some-geo-data/master/ne_110m_admin_0_countries/countries.geojson" , | |
function(err, continents){ | |
svg.append("path") | |
.attr("d",path(continents)) | |
.style("fill","grey") | |
svg.append("path") | |
.attr("d",path({type:"Point",coordinates:washington})) | |
.style("fill","blue") | |
.style("stroke","red") | |
svg.append("path") | |
.attr("d",path({type:"Point",coordinates:pyongyang})) | |
.style("fill","blue") | |
.style("stroke","red") | |
svg.append("path") | |
.attr("d",path({type:"LineString",coordinates:[pyongyang,washington]})) | |
//.style("fill","blue") | |
.style("stroke","red") | |
svg.append("path") | |
.attr("d",path(portee)) | |
.style("fill","rgba(200,100,100,0.3)") | |
.style("stroke","red") | |
} | |
) | |
//from natural earth | |
</script> | |
</body> |