xxxxxxxxxx
<meta charset="utf-8">
<style>
/*svg {
background: white;
}*/
svg {
background: radial-gradient(720px at 490px, #081f2b 0%, #061616 100%);
height: 960px;
}
.stroke {
fill: none;
stroke: #000;
stroke-width: 3px;
stroke-dasharray: 2px 2px;
}
.fill {
fill: steelblue;
}
.graticule {
fill: none;
stroke: gray;
stroke-width: .5px;
stroke-opacity: .5;
}
.land {
fill: #222;
}
.oceans {
fill: steelblue;
}
.boundary {
fill: none;
stroke: #fff;
stroke-width: .5px;
}
.coast-buffers {
fill: none;
stroke-linejoin: round;
stroke-linecap: round;
}
.country-borders {
fill: none;
stroke: #ccc;
stroke-linejoin: round;
stroke-linecap: round;
}
</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.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 = 600;
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var color = d3.scaleOrdinal(d3.schemeCategory20b);
var projection = d3.geoMercator()
var path = d3.geoPath()
.projection(projection);
d3.queue()
.defer(d3.json, "world-110m.json")
.defer(d3.json, "coast.json")
.defer(d3.json, "oceans.json")
.defer(d3.json, "lakes.json")
.defer(d3.json, "rivers.json")
.await(ready)
function ready(error, world, coast, oceans, lakes, rivers) {
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")
.style("fill", "black")
.attr("d", path);
// .style("fill", function(d, i) { return color(d.color = d3.max(neighbors[i], function(n) { return countries[n].color; }) + 1 | 0); });
svg.insert("path", ".graticule")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
.attr("fill", "none")
.attr("stroke", "#fff")
.attr("stroke-width", 0.5)
.attr("stroke-opacity", 0.5)
.attr("class", "boundary")
.attr("d", path);
d3.selectAll(".country")
.style("filter", "url(#glow)");
var defs = svg.append("defs");
//Filter for the outside glow
var filter = defs.append("filter")
.attr("id","glow");
filter.append("feGaussianBlur")
.attr("stdDeviation","3.5")
.attr("result","coloredBlur");
var feMerge = filter.append("feMerge");
feMerge.append("feMergeNode")
.attr("in","coloredBlur");
feMerge.append("feMergeNode")
.attr("in","SourceGraphic");
svg.selectAll("path")
.data(oceans.features)
.enter().append("path")
.style("fill", "steelblue")
.style("mix-blend-mode", "multiply")
.attr("d", path);
d3.selectAll("path")
.style("filter", "url(#glow)");
svg.append("g")
.attr("class", "feature feature--lake")
.selectAll("path")
.data(topojson.feature(lakes, lakes.objects.lakes).features)
.enter().append("path")
.style("fill", "steelblue")
.attr("d", path);
svg.append("g")
.attr("class", "feature feature--coastline")
.selectAll("path")
.data(topojson.feature(coast, coast.objects.coastline).features)
.enter().append("path")
.attr("fill", "none")
.attr("stroke", "#FFC300")
.attr("stroke-width", .5)
.attr("stroke-opacity", 0.5)
.attr("d", path);
svg.append("g")
.attr("class", "feature feature--river")
.selectAll("path")
.data(topojson.feature(rivers, rivers.objects.rivers).features)
.enter().append("path")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", .5)
// .attr("stroke-opacity", 0.5)
.attr("d", path);
d3.selectAll("g")
.style("filter", "url(#glow)");
};
d3.select(self.frameElement).style("height", height + "px");
</script>
https://d3js.org/d3.v4.min.js
https://d3js.org/d3-array.v1.min.js
https://d3js.org/d3-geo.v1.min.js
https://d3js.org/topojson.v2.min.js
https://d3js.org/d3-geo-projection.v1.min.js