|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } |
|
svg { width:100%; height: 100% } |
|
|
|
.stroke { |
|
fill: none; |
|
stroke: #000; |
|
stroke-width: 3px; |
|
} |
|
|
|
.fill { |
|
fill: #fff; |
|
} |
|
|
|
.graticule { |
|
fill: none; |
|
stroke: #777; |
|
stroke-width: 0.5px; |
|
stroke-opacity: 0.5; |
|
} |
|
|
|
.land { |
|
fill: #222; |
|
} |
|
.boundary { |
|
fill: none; |
|
stroke: #fff; |
|
stroke-width: .5px; |
|
} |
|
|
|
/* Issue with Afghanistan */ |
|
/* |
|
.land { |
|
fill: #222; |
|
stroke: #fff; |
|
stroke-width: 0.5px; |
|
} |
|
*/ |
|
|
|
</style> |
|
<body> |
|
<script src="https://unpkg.com/d3@4"></script> |
|
<script src="https://unpkg.com/d3-geo-projection@2"></script> |
|
<script src="https://unpkg.com/topojson-client@3"></script> |
|
<script> |
|
var width = 960; |
|
var height = 500; |
|
|
|
var svg = d3.select("body").append("svg"); |
|
|
|
// 2 lobes |
|
var lobes = [ |
|
[ |
|
[[-180, 0], [ -90, 90], [ 0, 0]], |
|
[[ 0, 0], [ 90, 90], [ 180, 0]] |
|
], |
|
[ |
|
[[-180, 0], [ -90, -90], [ 0, 0]], |
|
[[ 0, 0], [ 90, -90], [ 180, 0]] |
|
] |
|
]; |
|
|
|
var projection = d3.geoInterrupt(d3.geoHammerRaw(Infinity), lobes) |
|
.rotate([20, 0]) |
|
.scale(140) |
|
.translate([width / 2, height / 2]) |
|
.precision(.1); |
|
|
|
var path = d3.geoPath().projection(projection); |
|
|
|
var graticule = d3.geoGraticule(); |
|
|
|
var defs = svg.append("defs"); |
|
|
|
defs.append("path") |
|
.datum({type: "Sphere"}) |
|
.attr("id", "sphere") |
|
.attr("d", path); |
|
|
|
defs.append("clipPath") |
|
.attr("id", "clip") |
|
.append("use") |
|
.attr("xlink:href", "#sphere"); |
|
|
|
svg.append("use") |
|
.attr("class", "stroke") |
|
.attr("xlink:href", "#sphere"); |
|
|
|
svg.append("use") |
|
.attr("class", "fill") |
|
.attr("xlink:href", "#sphere"); |
|
|
|
svg.append("path") |
|
.datum(graticule) |
|
.attr("class", "graticule") |
|
.attr("clip-path", "url(#clip)") |
|
.attr("d", path); |
|
|
|
|
|
|
|
d3.json("https://unpkg.com/world-atlas@1/world/50m.json", function(error, world) { |
|
if (error) throw error; |
|
|
|
//Issue with Afghanistan |
|
/* |
|
svg.selectAll("path") |
|
.data(topojson.feature(world, world.objects.countries).features) |
|
.enter().append("path") |
|
.attr("class", "land") |
|
.attr("clip-path", "url(#clip)") |
|
.attr("d", path); |
|
*/ |
|
|
|
svg.insert("path", ".graticule") |
|
.datum(topojson.feature(world, world.objects.land)) |
|
.attr("class", "land") |
|
.attr("clip-path", "url(#clip)") |
|
.attr("d", path); |
|
|
|
svg.insert("path", ".graticule") |
|
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) |
|
.attr("class", "boundary") |
|
.attr("clip-path", "url(#clip)") |
|
.attr("d", path); |
|
|
|
|
|
}); |
|
</script> |
