Lake Superior

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