D3 Examples - Raster clipping via D3js

Raster clipping via D3js

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.

xxxxxxxxxx
 
<!doctype html>
<meta charset='utf-8'>
<title>Lake Superior</title>
​
<style>
  .lake {
    stroke: none;
    fill: none;
  }
</style>
​
<svg></svg>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v0.min.js"></script>
<script>
​
  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>
​
    