|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
.stroke { |
|
fill: none; |
|
stroke: #000; |
|
stroke-width: 3px; |
|
} |
|
|
|
.fill { |
|
fill: #b7ccbb; |
|
} |
|
|
|
.graticule { |
|
fill: none; |
|
stroke: #777; |
|
stroke-width: 0.5px; |
|
stroke-opacity: 0.5; |
|
} |
|
|
|
.land { |
|
fill: #fff; |
|
} |
|
|
|
.boundary { |
|
fill: none; |
|
stroke: #fff; |
|
stroke-width: 0.5px; |
|
} |
|
|
|
</style> |
|
<svg width="960" height="484"></svg> |
|
<script src="https://d3js.org/d3.v4.min.js"></script> |
|
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script> |
|
<script src="https://d3js.org/topojson.v1.min.js"></script> |
|
<script> |
|
|
|
var svg = d3.select("svg"), |
|
width = +svg.attr("width"), |
|
height = +svg.attr("height"); |
|
|
|
var lobes = [ |
|
[ |
|
[[-180, 0], [-130, 90], [ -90, 0]], |
|
[[ -90, 0], [ -30, 90], [ 60, 0]], |
|
[[ 60, 0], [ 120, 90], [ 180, 0]], |
|
], |
|
[ |
|
[[-180, 0], [-120, -90], [-60, 0]], |
|
[[ -60, 0], [ 20, -90], [ 100, 0]], |
|
[[ 100, 0], [ 140, -90], [ 180, 0]] |
|
] |
|
]; |
|
var projection = d3.geoInterrupt(d3.geoHomolosineRaw, lobes) |
|
.rotate([-200, 0]) |
|
.fitExtent([[10,10], [width-30, height-10]], {type: "Sphere"}); |
|
|
|
|
|
var graticule = d3.geoGraticule(); |
|
|
|
var path = d3.geoPath() |
|
.projection(projection); |
|
|
|
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); |
|
|
|
var marker = svg.append("path") |
|
.attr("fill", "red") |
|
|
|
svg.on('mousemove', function() { |
|
var mouse = d3.mouse(this); |
|
marker.attr("d", path({type:"Point", coordinates: projection.invert(mouse)})); |
|
}); |
|
|
|
|
|
d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/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("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> |