Redo of https://bl.ocks.org/mbostock/4180634 in D3v4
forked from piwodlaiwo's block: World Map in D3v4 with Auto Colors
license: mit |
Redo of https://bl.ocks.org/mbostock/4180634 in D3v4
forked from piwodlaiwo's block: World Map in D3v4 with Auto Colors
<!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; | |
} | |
.graticule.outline { | |
stroke-width: 2px; | |
} | |
.label { | |
font: 300 9px "Helvetica Neue", Helvetica, Arial, sans-serif; | |
text-anchor: end; | |
} | |
.land { | |
fill: #222; | |
} | |
.boundary { | |
fill: none; | |
stroke: #fff; | |
stroke-width: .5px; | |
} | |
</style> | |
<body> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://d3js.org/topojson.v2.min.js"></script> | |
<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script> | |
<script> | |
var width = 960, | |
height = 580; | |
var color = d3.scaleOrdinal(d3.schemeCategory10); | |
/* | |
var projection = d3.geoKavrayskiy7() | |
.scale(170) | |
.translate([width / 2, height / 2]) | |
.precision(.1); | |
*/ | |
var projection = d3.geoWinkel3(); | |
var path = d3.geoPath().projection(projection); | |
var graticule = d3.geoGraticule(); | |
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.selectAll("path") | |
.data(graticule.lines()) | |
.enter().append("path") | |
.attr("class", "graticule line") | |
.attr("id", function(d) { | |
var c = d.coordinates; | |
if (c[0][0] == c[1][0]) { | |
return (c[0][0] < 0) ? -c[0][0] + "W" : +c[0][0] + "E"; | |
} | |
else if (c[0][1] == c[1][1]) { | |
return (c[0][1] < 0) ? -c[0][1] + "S" : c[0][1] + "N"; | |
} | |
}) | |
.attr("d", path); | |
svg.selectAll('text') | |
.data(graticule.lines()) | |
.enter().append("text") | |
.text(function(d) { | |
var c = d.coordinates; | |
if ((c[0][0] == c[1][0]) && (c[0][0] % 30 == 0)) {return (c[0][0]);} | |
else if (c[0][1] == c[1][1]) {return (c[0][1]);} | |
}) | |
.attr("class","label") | |
.attr("style", function(d) { | |
var c = d.coordinates; | |
return (c[0][1] == c[1][1]) ? "text-anchor: end" : "text-anchor: middle"; | |
}) | |
.attr("dx", function(d) { | |
var c = d.coordinates; | |
return (c[0][1] == c[1][1]) ? -10 : 0; | |
}) | |
.attr("dy", function(d) { | |
var c = d.coordinates; | |
return (c[0][1] == c[1][1]) ? 4 : 10; | |
}) | |
.attr('transform', function(d) { | |
var c = d.coordinates; | |
return ('translate(' + projection(c[0]) + ')') | |
}); | |
svg.append("path") | |
.datum(graticule.outline) | |
.attr("class", "graticule outline") | |
.attr("d", path); | |
/* | |
svg.append("path") | |
.datum(graticule) | |
.attr("class", "graticule") | |
.attr("d", path); | |
*/ | |
d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-50m.json", function(error, world) { | |
if (error) throw error; | |
var countries = topojson.feature(world, world.objects.countries).features, | |
neighbors = topojson.neighbors(world.objects.countries.geometries); | |
svg.selectAll(".country") | |
.data(countries) | |
.enter().insert("path", ".graticule") | |
.attr("class", "country") | |
.attr("d", path) | |
.style("fill", function(d, i) { return color(d.color = d3.max(neighbors[i], function(n) { return countries[n].color; }) + 1 | 0); }); | |
}); | |
d3.select(self.frameElement).style("height", height + "px"); | |
</script> |