xxxxxxxxxx
<meta charset="utf-8">
<style>
svg {
background: white;
}
.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, "coast.json")
.defer(d3.json, "oceans.json")
.defer(d3.json, "lakes.json")
.defer(d3.json, "rivers.json")
.await(ready)
function ready(error, coast, oceans, lakes, rivers) {
if (error) throw error;
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);
};
</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