coasts// oceans // lakes // rivers

<!DOCTYPE html>
<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