Skip to content

Instantly share code, notes, and snippets.

@hugolpz
Forked from mjhoy/README.md
Last active August 29, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hugolpz/c59f79a9f52e3897c129 to your computer and use it in GitHub Desktop.
Save hugolpz/c59f79a9f52e3897c129 to your computer and use it in GitHub Desktop.
Raster clipping via D3js
<!doctype html>
<meta charset='utf-8'>
<title>Lake Superior</title>
<style>
.lake {
stroke: none;
fill: none;
}
</style>
<svg></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://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>
Display the source blob
Display the rendered blob
Raw
{"type":"Topology","transform":{"scale":[0.0007758742874287437,0.00026045004500450014],"translate":[-92.114185,46.423397]},"objects":{"lakes":{"type":"GeometryCollection","geometries":[{"type":"Polygon","arcs":[[0],[1],[2],[3],[4],[5],[6],[7],[8],[9],[10],[11],[12],[13],[14],[15],[16]],"id":"Lake Superior"}]}},"arcs":[[[9827,89],[-51,-64],[-52,-25],[-44,54],[12,78],[-31,102],[-49,68],[-42,-25],[-33,-66],[-45,-45],[-47,-27],[-43,-9],[-21,9],[-54,72],[-48,24],[-9,11],[-18,55],[-13,18],[-17,-6],[-42,-43],[-21,-7],[-25,18],[-16,33],[-11,48],[-10,58],[36,90],[13,65],[-17,129],[23,451],[7,57],[18,47],[22,32],[20,36],[11,67],[-30,-9],[-54,-37],[-27,-8],[-109,29],[-99,-17],[-119,-81],[-236,-249],[-59,-22],[-437,95],[-40,-17],[-9,26],[-36,-45],[-212,-92],[-35,14],[-35,45],[-177,-264],[-147,-137],[-51,-92],[-47,-16],[-20,-17],[-58,-104],[-17,-41],[-62,-193],[-40,-83],[-43,-25],[2,17],[4,42],[3,17],[-37,1],[-27,13],[-24,35],[-23,70],[-28,49],[-26,-21],[-39,-95],[-26,-32],[-35,-19],[-31,9],[-14,57],[-6,32],[-14,7],[-16,-1],[-12,14],[-40,119],[-6,37],[-2,23],[-4,21],[-15,27],[-16,17],[-18,7],[-18,-9],[-14,-30],[-12,-17],[-16,-3],[-34,5],[-7,-14],[-21,-68],[-11,-23],[-31,-5],[-62,25],[-55,-58],[-157,55],[-33,38],[-18,79],[-7,193],[-5,27],[-13,17],[-68,64],[-12,37],[2,55],[-24,36],[-26,56],[-21,66],[-9,66],[-12,36],[-59,134],[-17,52],[-21,168],[-20,74],[-26,-18],[-14,-16],[-10,35],[-11,86],[-9,5],[-32,-22],[-16,5],[-13,27],[-12,69],[-11,35],[-12,9],[-14,-3],[-13,3],[-5,29],[-17,34],[-137,77],[-208,39],[-71,-14],[-102,-61],[-22,-49],[-11,-79],[-29,-83],[-34,-65],[-31,-20],[0,24],[26,76],[23,107],[25,94],[72,76],[38,77],[13,67],[-38,6],[-20,-18],[-59,-90],[-56,-116],[-41,-37],[-38,-89],[-20,-20],[-44,-11],[-15,-25],[19,-45],[-71,-207],[-43,-104],[-18,25],[5,25],[12,15],[12,12],[10,13],[3,23],[-4,24],[-26,113],[-5,37],[5,38],[9,35],[4,37],[-1,36],[-7,36],[16,65],[14,90],[10,94],[4,82],[-7,75],[-19,72],[-23,61],[-22,42],[-9,-1],[-8,-16],[-9,-7],[-9,24],[-1,18],[8,39],[11,106],[2,45],[-6,40],[-29,52],[-67,19],[-33,22],[-29,59],[-3,64],[9,79],[6,100],[-13,87],[-29,3],[-33,-37],[-216,-382],[-36,-37],[-9,-15],[-26,-111],[-5,-18],[-7,-34],[-46,-159],[-22,-48],[-13,-10],[-40,-13],[-52,-46],[-14,-6],[-63,30],[-27,-4],[-29,-52],[-94,-216],[-105,-164],[-116,-114],[-511,-129],[-52,-57],[-236,-453],[-54,-65],[-229,-154],[-67,-89],[-16,-8],[-43,-7],[-34,-18],[-33,-33],[-62,-90],[-25,2],[-55,67],[-93,48],[-119,144],[-96,194],[-27,35],[9,-14],[26,-64],[-14,2],[-14,-4],[-13,-11],[-12,-16],[0,-24],[45,0],[-24,-73],[-34,-53],[-154,-135],[-38,-17],[-33,37],[15,76],[22,76],[82,208],[7,44],[-6,38],[-9,38],[-6,38],[3,66],[8,82],[15,70],[24,30],[22,37],[32,174],[21,53],[-6,38],[-3,15],[29,32],[-3,30],[-17,30],[-9,26],[-6,73],[-13,25],[-39,-7],[-7,12],[-2,24],[-1,28],[-3,15],[-12,14],[-11,9],[-26,6],[-9,-13],[-5,-27],[-4,-28],[-4,-16],[-12,-11],[-14,-8],[-27,-5],[-11,4],[-19,17],[-9,3],[-13,-7],[-8,-16],[-5,-17],[-5,-10],[-56,-54],[-15,-25],[-5,-24],[-2,-26],[-4,-21],[-11,-9],[-26,-2],[-11,-8],[-11,-14],[-21,-87],[-16,-28],[-25,34],[2,22],[-1,9],[-1,7],[0,16],[-26,-55],[-29,-24],[-17,22],[9,84],[-37,-19],[-64,-119],[-101,-134],[-62,-123],[-17,30],[-98,-84],[-102,-31],[-288,-224],[-189,-62],[-31,3],[-81,88],[-20,14],[-22,26],[-31,61],[-27,71],[-13,54],[24,121],[61,117],[118,158],[76,139],[49,35],[79,112],[68,164],[43,39],[74,117],[7,22],[14,59],[6,21],[13,15],[18,13],[15,22],[7,46],[14,45],[91,97],[322,713],[321,712],[81,74],[204,399],[333,366],[177,116],[64,17],[22,15],[53,68],[261,167],[441,459],[23,41],[42,97],[35,35],[22,72],[15,16],[39,-28],[21,-4],[16,32],[0,11],[0,42],[18,27],[29,15],[28,22],[12,55],[14,31],[51,-2],[-3,39],[35,36],[20,35],[-4,25],[-42,10],[29,49],[130,80],[-4,15],[-2,15],[-3,11],[-8,12],[52,116],[14,74],[-13,74],[7,26],[32,-38],[10,46],[-5,162],[3,31],[8,40],[10,33],[9,14],[7,18],[15,116],[14,23],[10,-9],[6,3],[6,60],[-17,88],[-5,16],[-25,37],[1,86],[14,97],[14,71],[35,87],[51,63],[428,331],[47,71],[22,-19],[6,-64],[-19,-89],[-84,-220],[-9,-134],[-7,-44],[-7,-32],[-3,-33],[9,-51],[-12,-24],[-2,-29],[-1,-29],[-4,-20],[-13,-11],[-12,6],[-12,3],[-15,-24],[-12,-43],[-18,-113],[-14,-54],[14,-25],[7,18],[5,35],[9,24],[13,5],[26,-8],[14,3],[90,60],[44,67],[27,21],[23,38],[9,88],[5,76],[12,94],[29,159],[-14,56],[22,25],[53,24],[6,51],[12,278],[7,75],[18,35],[27,9],[32,0],[18,32],[3,72],[-6,80],[-11,54],[13,35],[16,20],[33,23],[-29,39],[-13,54],[-3,70],[1,88],[6,30],[15,39],[16,34],[25,32],[4,38],[1,45],[4,32],[26,31],[34,-4],[100,-50],[21,-57],[13,-77],[9,-78],[5,-27],[6,-25],[5,-32],[1,-50],[-3,-42],[-12,-84],[-2,-45],[-10,-54],[-207,-459],[-57,-78],[-19,-57],[-24,-121],[-18,-61],[8,1],[17,-2],[9,1],[-8,-65],[6,-49],[10,-51],[1,-69],[54,51],[-13,36],[6,38],[23,57],[5,-2],[7,-12],[8,-6],[7,20],[1,27],[-7,16],[-8,14],[-4,21],[5,65],[10,25],[12,13],[17,31],[30,126],[15,31],[8,-74],[17,-26],[23,9],[22,36],[6,22],[5,27],[7,23],[13,10],[32,1],[14,16],[12,35],[-28,60],[-12,104],[6,73],[24,-28],[11,-52],[5,-51],[10,-38],[24,-16],[5,19],[53,112],[-6,-46],[-22,-82],[-7,-55],[38,8],[29,61],[46,169],[58,143],[17,64],[0,37],[-7,38],[-6,59],[3,49],[11,117],[0,30],[-13,27],[-123,170],[-35,63],[-28,97],[15,68],[11,34],[2,34],[-10,73],[-26,115],[-3,57],[21,41],[6,-63],[15,-38],[19,-8],[20,28],[20,-26],[21,4],[20,20],[19,28],[12,24],[8,24],[9,19],[15,12],[11,-7],[19,-37],[10,-9],[16,25],[25,101],[17,8],[7,-24],[1,-31],[-3,-25],[-5,-1],[1,-12],[-2,-30],[1,-11],[5,-4],[18,-1],[7,-8],[17,-36],[38,-58],[16,-36],[20,-32],[24,-4],[26,2],[23,-7],[9,-11],[16,-30],[10,-11],[11,-5],[73,14],[15,-20],[-10,-68],[30,-2],[55,16],[30,-14],[35,-39],[8,-15],[3,-23],[1,-59],[5,-21],[26,-20],[23,18],[20,32],[19,20],[21,0],[18,-18],[8,-41],[-12,-70],[26,-47],[34,5],[69,42],[35,-20],[60,-103],[33,-36],[61,0],[10,-31],[12,-81],[10,-17],[66,-26],[20,6],[51,44],[110,0],[29,13],[29,27],[18,9],[13,-17],[11,-22],[11,-10],[23,18],[-1,28],[-7,30],[2,29],[18,23],[14,-3],[13,-23],[13,-37],[23,-50],[31,-43],[56,-50],[23,-6],[17,11],[39,49],[66,50],[23,27],[21,66],[10,12],[11,-8],[8,-17],[7,-18],[4,-9],[76,-26],[22,-24],[-18,-160],[22,1],[62,-27],[11,2],[7,7],[13,17],[4,11],[2,16],[1,15],[1,11],[6,3],[15,-7],[82,59],[36,-5],[-7,-77],[39,0],[17,-12],[7,-27],[-5,-46],[-9,-5],[-5,-9],[9,-59],[3,-1],[20,-39],[6,-22],[7,-57],[5,-25],[13,-36],[14,-22],[18,-10],[21,3],[-4,-34],[-6,-30],[-8,-26],[-8,-17],[56,-94],[26,-69],[-3,-73],[13,-59],[10,-162],[8,-57],[13,-56],[11,-65],[4,-68],[-6,-58],[62,-133],[-13,-22],[-3,-31],[6,-32],[10,-22],[-9,-69],[11,-63],[34,-104],[12,-74],[17,-143],[15,-72],[8,-21],[9,-16],[6,-26],[3,-54],[26,-147],[79,-198],[10,-14],[8,-72],[74,-92],[5,-72],[41,-52],[13,-27],[9,-26],[22,-92],[20,-40],[149,-126],[271,-100],[141,4],[187,119],[451,52],[9,-13],[13,-54],[13,-12],[4,8],[5,19],[8,17],[14,9],[25,-16],[18,-41],[7,-58],[-6,-69],[-9,-25],[-35,-53],[-18,-60],[-8,-22],[-35,-53],[-14,-40],[-4,-64],[7,-44],[16,-44],[19,-32],[19,-9],[-13,-50],[-40,-104],[-13,-74],[-11,-11],[-24,1],[-9,-14],[-9,-30],[-14,-63],[31,-43],[-1,-44],[-34,-82],[-7,-54],[-5,-72],[-9,-52],[-18,6],[11,-61],[25,-60],[30,-45],[27,-18],[8,-20],[5,-91],[4,-20],[9,-14],[27,-68],[13,-25],[100,-91],[27,-11],[13,-14],[32,-67],[57,-76],[22,-59],[17,-143],[19,-76],[16,-17],[39,8],[15,-18],[10,-40],[21,-132],[8,-17],[10,-17],[8,-26],[1,-45],[-8,-43],[-13,-16],[-15,-9],[-13,-23],[-66,-249],[-9,-14],[-12,-11],[-11,-15],[-4,-26],[2,-23],[3,-12],[0,-19],[-5,-39],[-8,-14],[-11,-11],[-11,-14],[-5,-28],[4,-25],[14,-77],[4,-16],[2,-25],[-12,-54],[-17,-54],[-38,-48],[-12,-57],[-4,-71],[7,-61],[-26,-49],[14,-70],[32,-63],[28,-27],[53,0],[23,-9],[10,-21],[5,-33],[10,-42],[25,-70],[15,-26],[15,-11],[19,3],[1,22],[-4,31],[4,39],[27,48],[25,-1],[27,-21],[31,-14],[63,24],[29,-8],[54,-111],[26,-35],[19,-38],[5,-68],[-4,-11],[-23,-94],[-16,-32],[-11,-7],[-30,11],[-37,44],[-17,8],[-19,-5],[-12,-12],[-11,-17],[-56,-52],[-13,-18],[7,-61],[1,-98],[-6,-90],[-15,-41],[-8,-43],[6,-91],[19,-75],[32,0],[13,52],[9,79],[13,74],[22,31],[24,-20],[22,-50],[16,-60],[5,-54],[-11,-66],[-73,-133],[-94,-222],[-16,-59],[-16,-88],[-1,-81],[55,-59],[17,-56],[15,-62],[17,-43],[19,-16],[5,-130]],[[7102,190],[8,45],[-5,46],[-17,6],[-19,-8],[-12,10],[0,32],[8,35],[19,64],[-13,78],[-9,30],[-13,21],[-31,21],[-24,-18],[-14,-51],[-3,-81],[4,-38],[7,-27],[7,-27],[9,-39],[5,-49],[-1,-28],[1,-14],[12,-16],[8,2],[4,41],[7,10],[7,-9],[6,-17],[5,-18],[-1,-9],[28,-6],[17,14]],[[6648,8515],[12,47],[-9,66],[-9,9],[-18,10],[-9,9],[-16,-49],[-47,-14],[-20,-29],[0,-44],[24,-20],[51,-3],[-9,-50],[50,68]],[[8382,5051],[25,49],[-3,45],[-21,37],[-109,97],[-25,10],[-26,26],[-160,-17],[-30,-38],[-57,-106],[-36,-24],[-2,-20],[1,-27],[2,-23],[4,-9],[4,-9],[5,-18],[7,-19],[10,-8],[10,-4],[20,-16],[96,-12],[36,18],[37,42],[24,-43],[30,-11],[31,8],[51,29],[10,11],[9,19],[12,16],[31,-8],[14,5]],[[5670,3814],[0,26],[-17,34],[-25,85],[-19,39],[-49,58],[-25,16],[-300,1],[-109,-42],[-93,-76],[-18,-29],[-20,-46],[-14,-17],[-15,9],[-14,16],[-15,4],[-9,-12],[-35,-66],[-103,-107],[-43,-63],[-123,-344],[-23,-48],[-56,-72],[-23,-49],[-10,-66],[-6,-91],[-1,-174],[16,-49],[117,-16],[12,-24],[22,-67],[9,-14],[58,26],[17,37],[1,73],[-16,43],[-34,-48],[13,62],[23,70],[26,56],[19,21],[-8,-61],[-5,-137],[-6,-64],[-12,-69],[-12,-34],[-38,-54],[-20,-43],[-8,-41],[5,-44],[72,-238],[19,19],[16,49],[27,101],[40,210],[11,35],[49,51],[12,46],[6,57],[16,27],[23,7],[25,0],[0,26],[-15,50],[6,72],[16,71],[18,46],[17,11],[17,-2],[17,3],[16,27],[53,131],[12,22],[32,26],[14,18],[21,90],[9,15],[28,13],[27,34],[80,137],[-21,50],[-45,38],[-38,21],[16,46],[26,9],[56,-6],[70,47],[27,6],[29,-9],[52,-36],[29,-8],[26,15],[46,59],[29,5]],[[4483,6187],[52,96],[6,17],[-2,29],[-7,70],[-1,19],[30,81],[94,116],[35,66],[16,42],[6,19],[5,20],[-15,-38],[-18,-21],[-38,-22],[6,32],[10,28],[28,45],[-96,-109],[-28,-48],[-21,19],[-42,-37],[-16,18],[-98,-160],[0,55],[-41,-84],[-60,-90],[-59,-64],[-34,3],[-24,-52],[-32,-41],[-33,-22],[-25,9],[-45,-67],[-182,-199],[-118,-182],[13,-44],[22,3],[45,41],[0,-26],[-50,-56],[-12,-23],[-18,-92],[1,-33],[5,-2],[5,3],[7,-9],[24,-65],[28,-22],[30,11],[221,213],[68,23],[0,26],[-115,0],[17,44],[48,62],[6,27],[336,286],[66,85]],[[2197,2497],[2,11],[0,19],[-40,0],[-27,-69],[-15,-111],[-5,-125],[55,52],[29,69],[-6,130],[4,13],[3,11]],[[5193,9670],[-6,-47],[11,-23],[19,-9],[22,-24],[20,-33],[14,-38],[4,81],[-2,77],[-14,57],[-32,26],[-20,-19],[-16,-48]],[[5191,9227],[-15,-33],[2,-83],[15,-168],[22,-156],[9,-21],[18,-7],[13,5],[13,12],[10,22],[3,29],[-1,53],[34,65],[12,11],[59,35],[33,9],[17,-5],[31,-20],[71,-7],[11,36],[-1,99],[33,-27],[16,34],[4,74],[0,102],[7,25],[2,12],[0,18],[-13,12],[-249,31],[-66,-43],[-90,-114]],[[5728,8924],[83,48],[-61,131],[-30,134],[-15,49],[-24,16],[-27,-3],[-24,-21],[-13,-44],[1,-36],[7,-44],[8,-37],[7,-14],[17,-10],[3,-23],[-7,-44],[-8,-6],[-14,-29],[-7,-31],[16,-15],[57,-26],[31,5]],[[3820,7008],[-31,-33],[5,-29],[6,-21],[7,-17],[9,-17],[15,26],[8,-13],[6,-24],[7,-13],[15,6],[99,119],[18,32],[-29,25],[-14,20],[-11,34],[-44,3],[-21,-12],[-18,-31],[-12,-30],[-15,-25]],[[5993,8989],[22,90],[-70,50],[-28,0],[19,-101],[28,-52],[29,13]],[[1971,1633],[1,41],[-20,62],[-27,-10],[-73,-76],[-15,-33],[-16,-47],[-98,-122],[-26,-80],[2,-65],[19,-21],[57,87],[71,39],[18,64],[-24,6],[14,47],[31,53],[32,25],[34,6],[20,24]],[[9760,1833],[-10,-71],[22,0],[59,51],[21,3],[20,-2],[20,3],[18,24],[-21,16],[-22,-6],[-23,4],[-23,38],[-23,24],[-22,-26],[-16,-58]],[[1731,1998],[40,-68],[13,-37],[25,29],[13,26],[-2,39],[-18,63],[-9,15],[-23,23],[-12,18],[-6,-32],[-5,-27],[-7,-24],[-9,-25]],[[2041,2022],[0,58],[-21,8],[-50,-38],[-64,-30],[-17,-22],[-20,-64],[11,-23],[70,11],[23,-4],[21,-19],[19,-34],[-5,57],[6,41],[13,32],[14,27]],[[1518,2159],[10,52],[-19,52],[-14,-38],[-37,-60],[-1,-36],[21,-39],[21,19],[19,50]]]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment