Raster clipping via D3js

Shown is Lake Superior and the surrounding terrain, using data from NASA’s Shuttle Radar Topography Mission and bathymetry data from NOAA.

The two images are layered using a clipping path of the lake, from Natural Earth’s 10m vector lake dataset.

Hill relief, as usual, was generated using the gdal utility suite.

<!doctype html>
<meta charset='utf-8'>
<title>Lake Superior</title>

var width = 960,
      height = 500,
      svg = d3.select("svg").attr("width", width).attr("height", height);

var projection = d3.geo.albers()
    .rotate([88.1, 0])
    .center([0, 47.7])
    .parallels([45.5, 49.8])
    .scale(9600)

var path = d3.geo.path()
    .projection(projection);

d3.json("lakes-topo.json", function(error, data) {
    var lakes = topojson.object(data, data.objects.lakes);

svg.append("image")
      .attr("xlink:href", "hill-relief.jpg")
      .attr("width", width)
      .attr("height", height)
      .attr("class", "bg");

svg.selectAll(".lake")
      .data(lakes.geometries)
    .enter().append("path")
      .attr("d", path)
      .attr("class", "lake")
      .attr("id", "superior"); // There is only one lake in this set.

svg.append("clipPath")
      .attr("id", "clip")
    .append("use")
      .attr("xlink:href", "#superior");

svg.append("image")
      .attr("clip-path", "url(#clip)")
      .attr("xlink:href", "superior.jpg")
      .attr("width", width)
      .attr("height", height)
      .attr("class", "bg");
  });
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v0.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v0.min.js