Skip to content

Instantly share code, notes, and snippets.

@micahstubbs

micahstubbs/.block

Last active October 12, 2016 07:53
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save micahstubbs/52b01b0152547c74196a4f960df3e6e8 to your computer and use it in GitHub Desktop.
Save micahstubbs/52b01b0152547c74196a4f960df3e6e8 to your computer and use it in GitHub Desktop.
Download ZIP
Animated Path on Canvas Map | SF Bay Area
Raw
.block
border: no
license: CC0-1.0
height: 1500
Raw
README.md

an animated path on a map, in canvas

inspired by the bl.ock Animated path using canvas from @rveciana

path geography drawn by clicking on the map over at geojson.io and then converted to topojson using http://jeffpaine.github.io/geojson-topojson/

I originally learned about geojson.io from @enjalot's working with spatial data workshop notes

the San Francisco Bay Area land area geography is positioned and scaled using knowledge gathered from the classic tutorial Let's Make a Map

earlier iterations and #d3brokeandmadeart can be found in this repo

Display the source blob
Display the rendered blob
Raw
alt-route-geography.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
ca.topojson
{"type":"Topology","objects":{"ca":{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon","arcs":[[[0]],[[1]],[[2]],[[3]],[[4]],[[5]],[[6]],[[7]],[[8]],[[9]],[[10]],[[11]],[[12]]]}]}},"arcs":[[[5649,532],[6,-6],[12,3],[12,-9],[-1,-6],[6,-13],[10,-5],[4,-17],[28,-29],[12,-17],[20,-21],[16,-7],[16,-19],[42,-35],[25,-17],[22,-21],[8,-10],[-12,-2],[-20,8],[-17,-5],[-3,-8],[-7,-2],[-13,-8],[-4,0],[-9,15],[-11,2],[-24,21],[-15,7],[-9,6],[-8,15],[-1,12],[-12,10],[-10,19],[-7,2],[-9,14],[-1,19],[-3,9],[-7,8],[-16,17],[-5,20],[-6,16],[-7,11],[-14,1],[1,17],[11,5]],[[4757,787],[15,-11],[9,1],[6,-4],[20,-7],[18,-16],[9,-11],[0,-8],[-5,-4],[-7,-1],[-10,-3],[-11,0],[-4,-1],[-14,3],[-4,1],[-4,-2],[-7,4],[-12,1],[-8,6],[-21,4],[-22,17],[0,5],[-7,7],[2,6],[-6,12],[1,4],[15,-8],[11,8],[8,1],[10,6],[18,-10]],[[5707,999],[6,-8],[5,-3],[7,-8],[9,-5],[8,-3],[0,-4],[1,-6],[6,-1],[2,2],[5,1],[1,3],[7,0],[5,-6],[4,1],[5,-3],[5,-5],[8,-3],[5,-4],[7,1],[3,-2],[5,1],[8,0],[26,-13],[5,1],[6,-7],[3,0],[5,0],[5,-2],[1,-4],[1,-6],[-2,-4],[1,-7],[5,0],[8,-12],[11,-11],[11,-8],[6,-11],[0,-4],[3,-2],[6,0],[8,-7],[4,-18],[-3,-1],[-3,-5],[6,-5],[-7,-4],[-3,-4],[-11,-3],[-19,7],[-9,8],[-9,2],[-10,5],[-21,1],[-14,0],[-12,-4],[-20,2],[-20,5],[-9,10],[-11,14],[-5,13],[5,11],[-2,4],[6,8],[5,2],[-4,5],[-8,17],[3,3],[-2,3],[0,8],[-4,4],[-7,2],[-6,2],[-6,0],[-5,-1],[-5,5],[-10,1],[-4,1],[-8,4],[-7,0],[-9,0],[-7,4],[-6,1],[-1,3],[0,6],[-5,2],[-5,5],[-5,8],[-6,6],[-6,6],[-2,5],[7,0],[10,-1],[8,1],[8,-2],[6,-1],[17,1],[5,1],[5,2]],[[5226,1012],[0,-1],[1,0],[1,-5],[0,-4],[2,-5],[-4,-2],[0,-8],[-7,-2],[-1,4],[-4,4],[-1,6],[-4,3],[1,4],[10,-1],[6,7]],[[6008,1303],[2,-10],[-19,-5],[7,-25],[-13,-4],[4,-9],[-11,1],[-4,9],[2,5],[14,5],[-4,16],[-5,-3],[3,-11],[-9,-3],[-8,-5],[-2,12],[3,8],[12,11],[5,0],[4,2],[11,4],[8,2]],[[4889,1562],[-12,-9],[-23,4],[-10,-1],[-6,3],[-9,2],[-5,5],[5,0],[5,1],[15,-1],[7,-5],[19,-4],[10,6],[17,6],[7,-2],[-20,-5]],[[4243,1580],[-7,-13],[3,-12],[12,-15],[25,-11],[27,4],[2,-25],[8,-7],[2,-12],[-30,0],[-19,-8],[-30,-20],[-21,-3],[-9,-6],[-20,0],[-7,-7],[-1,-7],[-14,2],[-9,8],[-19,9],[-22,12],[-9,16],[-5,7],[-8,8],[-12,22],[-9,4],[-6,13],[-11,3],[-11,10],[12,8],[18,2],[16,-6],[15,4],[14,-1],[12,9],[13,9],[9,0],[39,-7],[23,7],[14,14],[14,-1],[1,-10]],[[3934,1607],[5,-7],[11,0],[8,2],[6,-1],[11,-8],[7,-6],[5,-8],[-2,-9],[-21,0],[-21,1],[-9,-5],[-13,3],[-8,7],[-10,2],[-13,6],[-9,1],[-8,-8],[-14,5],[-8,1],[-3,6],[11,2],[22,17],[11,-3],[10,2],[13,8],[11,11],[0,5],[6,-5],[4,-7],[2,-7],[-4,-5]],[[4445,1618],[10,-9],[17,-3],[19,4],[9,0],[18,0],[7,-4],[8,0],[7,-6],[5,2],[19,-7],[8,-8],[11,-6],[7,-9],[8,1],[10,-5],[12,3],[21,-6],[17,6],[7,11],[-2,11],[21,10],[13,1],[10,5],[32,-15],[10,-7],[-7,-10],[-13,-5],[-2,-7],[-3,-10],[-12,-10],[-20,-1],[-9,-5],[-34,-2],[-20,-1],[-12,0],[-9,-3],[-6,-5],[-9,-2],[-2,-3],[-15,-5],[-6,0],[-6,-8],[-7,-2],[-22,3],[-11,0],[-6,-5],[-12,2],[-16,0],[-13,4],[-15,-4],[-8,7],[-15,4],[-10,-3],[-15,12],[-7,2],[-7,12],[-3,11],[-3,7],[10,16],[0,9],[-9,6],[-13,12],[-14,7],[-5,1],[-2,-3],[-7,2],[-4,4],[8,7],[3,7],[4,6],[12,-5],[17,0],[30,-4],[21,-7]],[[1367,5460],[-1,-2],[2,1],[-4,-10],[0,2],[0,1],[-1,-2],[1,2],[-2,3],[5,5]],[[1982,5581],[3,-4],[5,1],[2,-4],[-4,-2],[-6,2],[-2,7],[-5,6],[-2,8],[6,4],[5,-2],[5,-11],[-7,-5]],[[1928,5639],[7,-9],[-1,-9],[-9,0],[-8,-1],[-6,2],[0,1],[-1,0],[0,9],[2,4],[4,0],[3,3],[9,0]],[[4284,9806],[0,-194],[0,-193],[0,-194],[0,-193],[0,-194],[0,-193],[0,-194],[0,-193],[0,-194],[0,-193],[0,-194],[0,-193],[0,-193],[0,-194],[0,-193],[0,-59],[0,-15],[228,-172],[228,-173],[227,-173],[228,-172],[227,-173],[228,-173],[228,-172],[227,-173],[178,-145],[179,-146],[178,-145],[178,-146],[178,-146],[178,-145],[178,-146],[178,-145],[157,-133],[156,-134],[156,-133],[156,-133],[156,-133],[156,-134],[156,-133],[156,-133],[176,-150],[188,-157],[180,-151],[181,-150],[1,-8],[10,-124],[7,-12],[15,-5],[14,-6],[11,-15],[8,-17],[4,-13],[1,-29],[13,-20],[20,-12],[26,-3],[64,-117],[4,-5],[4,-4],[1,-9],[-1,-25],[1,-7],[12,-17],[12,-9],[11,-11],[5,-21],[1,-1],[10,-10],[-4,-16],[-6,-16],[0,-1],[1,-10],[3,-12],[4,-7],[5,-5],[7,-2],[12,0],[5,-1],[4,-1],[4,-3],[7,-7],[5,-4],[19,-12],[5,-3],[15,-16],[81,-53],[16,-8],[10,-7],[11,-12],[31,-18],[0,-15],[6,-22],[-8,-14],[-31,-21],[-32,-29],[-31,-36],[-19,-5],[-99,-64],[-36,-10],[-15,-14],[-10,-20],[-8,-45],[-12,-21],[-15,-17],[-16,-14],[-38,-23],[-16,-15],[-6,-23],[4,-12],[7,-12],[19,-20],[2,-10],[-8,-9],[-18,-14],[2,-15],[0,-28],[4,-25],[12,-11],[3,-6],[1,-13],[-1,-12],[-3,-6],[-5,-5],[4,-11],[10,-20],[-6,-15],[-11,-12],[-11,-15],[-5,-26],[1,-23],[-1,-12],[-3,-5],[-9,-6],[0,-14],[6,-23],[-4,-14],[-3,-7],[-13,-16],[-20,-17],[-9,-11],[-9,-26],[-36,-62],[-18,-12],[-24,-6],[-47,-3],[-10,-6],[5,-12],[10,-14],[8,-8],[5,-11],[-3,-9],[-12,-12],[-9,-29],[2,-16],[30,-32],[7,-14],[10,-61],[-5,-46],[-15,-39],[-3,-37],[29,-37],[38,-14],[88,-6],[34,-17],[27,-36],[4,-13],[0,-11],[-2,-10],[-2,-13],[16,-68],[-3,-23],[-11,-13],[-36,-23],[-13,-14],[-3,-18],[0,-20],[-1,-19],[-9,-16],[-41,-8],[-102,19],[-37,-25],[-3,-13],[-39,-3],[-72,-6],[-71,-6],[-72,-5],[-71,-6],[-72,-6],[-71,-6],[-71,-6],[-72,-6],[-71,-6],[-72,-6],[-71,-5],[-72,-6],[-71,-6],[-72,-6],[-71,-6],[-72,-6],[-71,-6],[-71,-6],[-72,-5],[-71,-6],[-72,-6],[-71,-6],[-72,-6],[-71,-6],[-72,-6],[-71,-6],[-72,-5],[-71,-6],[-72,-6],[-71,-6],[-71,-6],[-79,-6],[-1,8],[-6,30],[-2,27],[-3,24],[-12,32],[-16,25],[-21,13],[-35,3],[-2,13],[6,10],[14,7],[14,0],[3,-8],[19,-7],[4,-16],[8,-12],[13,-21],[11,-23],[7,-26],[9,-7],[11,7],[1,15],[-17,34],[1,19],[-14,20],[-13,5],[-19,13],[-11,9],[3,12],[-34,-2],[-14,-7],[-14,-12],[2,-39],[-9,5],[-9,18],[-3,11],[3,47],[1,18],[-4,22],[-20,40],[-5,16],[10,14],[7,-4],[6,7],[6,33],[-4,25],[-16,90],[-5,14],[-6,18],[-12,13],[-23,76],[-39,61],[-143,179],[-85,58],[-56,54],[-16,11],[-43,24],[-20,11],[-40,47],[-47,34],[-54,33],[-48,16],[-47,29],[-109,101],[-26,13],[-34,16],[-21,5],[-11,-6],[-13,7],[-8,-1],[14,-12],[6,-11],[1,-10],[-8,-1],[-9,8],[0,8],[-7,-4],[-4,7],[-7,23],[-9,-2],[-10,-2],[-9,-4],[-4,2],[-6,-5],[-9,-8],[-7,4],[3,-7],[-5,-12],[4,-16],[2,-9],[-10,1],[1,-5],[6,-4],[-7,0],[-8,-5],[-9,7],[-17,5],[-13,6],[-23,7],[-7,10],[-14,1],[-8,3],[-9,-3],[-7,-2],[-3,5],[-8,2],[-3,13],[-7,10],[-5,11],[6,11],[12,7],[1,7],[12,8],[4,13],[1,19],[-6,9],[-2,8],[-10,23],[-15,34],[-19,46],[-37,53],[-31,24],[-29,18],[-13,-1],[-13,3],[-11,-5],[-8,3],[-12,0],[-6,-4],[-27,1],[-29,3],[-9,-1],[-2,-5],[-2,-3],[-13,1],[-13,-2],[-23,3],[-17,-1],[-8,-6],[-16,-2],[-10,-2],[-5,-3],[-1,-5],[-3,-3],[-1,-5],[-3,0],[-6,-2],[-1,-4],[-3,-2],[-22,23],[-23,13],[-9,1],[-13,3],[-18,1],[-8,2],[-12,1],[-6,3],[-9,2],[-6,-3],[-17,5],[-23,13],[-19,6],[-11,1],[-29,18],[-22,2],[-28,16],[-10,2],[-17,4],[-2,0],[0,-3],[5,-2],[13,-3],[-5,-5],[-22,7],[-24,17],[-39,26],[-10,3],[-2,2],[2,2],[-1,2],[-3,3],[-2,0],[-1,-5],[-4,-2],[-2,-1],[-3,8],[-4,5],[-2,2],[-4,8],[-6,10],[-7,14],[-8,15],[-8,14],[-3,10],[5,7],[-5,2],[-3,10],[-3,11],[-11,14],[-9,7],[-5,-1],[-9,-2],[-8,5],[-7,6],[-9,4],[-9,4],[-10,15],[-9,6],[-6,6],[-6,4],[-4,1],[-7,-1],[-5,-1],[-4,0],[-3,4],[-7,9],[-8,6],[-8,6],[-12,12],[-6,2],[-7,-1],[-9,15],[-7,6],[-6,1],[-4,1],[-2,-2],[-3,-2],[-2,0],[-2,2],[-4,5],[-4,2],[-7,3],[-7,1],[-14,2],[-4,4],[-8,5],[-7,0],[-19,16],[-7,5],[-5,-1],[-4,-1],[-3,-1],[-6,1],[-14,6],[-21,2],[-3,-3],[-8,0],[-9,-3],[-19,2],[-20,-3],[-9,-3],[-3,-3],[-1,-3],[1,-2],[-10,-3],[-1,-3],[-6,-3],[-11,0],[-13,2],[-10,6],[-11,2],[-32,13],[-15,1],[-6,-2],[-22,0],[-5,-1],[-4,-2],[0,-3],[-1,-4],[-2,-3],[-10,5],[-14,1],[-5,-1],[-5,-2],[-11,13],[-10,2],[-20,13],[-13,3],[-8,-1],[-7,-1],[-7,2],[-5,4],[-13,8],[-9,3],[-4,0],[-20,12],[-12,-4],[-14,6],[-53,-5],[-41,15],[-38,-3],[-117,-2],[-129,-18],[-18,0],[-10,-9],[-18,8],[-18,44],[-18,31],[-26,15],[-21,6],[-19,13],[-16,2],[-27,-3],[-14,11],[-8,12],[-3,12],[6,16],[11,29],[16,33],[8,21],[2,27],[-13,22],[-10,19],[-13,16],[10,25],[11,39],[2,26],[1,15],[-6,10],[-10,4],[-8,8],[-4,17],[-10,6],[-12,-2],[-5,9],[6,26],[23,73],[9,36],[3,41],[-5,36],[-9,33],[-8,5],[-5,7],[-13,-1],[-7,3],[-19,17],[-8,6],[-17,1],[-25,2],[-6,-6],[0,-9],[-3,-4],[-6,1],[-25,20],[-57,25],[-26,22],[-10,11],[-11,17],[2,25],[8,13],[19,47],[6,33],[8,-15],[-4,-22],[2,-6],[12,3],[1,8],[11,5],[-5,7],[-5,3],[-11,22],[-7,8],[-7,-3],[-4,36],[-8,15],[-8,14],[-20,16],[-37,-2],[-17,11],[-19,4],[-21,0],[-31,30],[-31,31],[-32,33],[-28,54],[-12,5],[-16,23],[-10,10],[-17,6],[-6,-3],[2,-6],[-4,-1],[-21,16],[-17,4],[-17,6],[-17,7],[-18,1],[-1,17],[-9,17],[-11,11],[-5,7],[-8,53],[-14,23],[-30,26],[-18,11],[-22,24],[-4,11],[-12,4],[-16,12],[-20,18],[0,18],[-9,11],[-6,19],[-4,18],[-4,18],[-3,17],[-17,22],[-15,8],[-18,5],[-25,5],[-15,17],[-10,15],[-2,15],[-12,7],[-11,14],[-12,30],[-12,11],[-14,21],[-20,21],[-15,9],[-10,11],[-25,17],[-24,14],[-27,16],[-17,9],[-11,-3],[-14,8],[-10,10],[-5,11],[-5,14],[-6,7],[-11,4],[-10,7],[-7,10],[-18,5],[3,10],[-1,15],[3,5],[0,6],[-4,6],[-3,9],[-2,10],[-2,11],[-1,5],[2,8],[-2,4],[-2,9],[-6,7],[-3,13],[2,8],[-3,7],[-10,19],[-1,7],[-1,9],[-7,5],[-6,19],[-2,6],[4,5],[-1,7],[-1,3],[2,7],[-7,2],[-7,4],[1,5],[7,1],[8,-1],[12,1],[0,8],[-2,7],[-3,1],[-2,6],[4,3],[-1,8],[-2,7],[-6,-3],[-2,5],[-4,1],[-4,-2],[-3,-3],[-16,10],[-8,6],[-3,9],[7,1],[7,1],[0,7],[3,9],[4,12],[3,2],[6,-4],[4,9],[4,8],[1,9],[4,5],[8,-1],[8,-5],[0,-5],[7,-5],[11,-4],[6,-8],[8,-11],[9,0],[8,5],[16,13],[16,17],[10,22],[13,28],[4,38],[4,20],[13,-7],[28,-10],[2,9],[-5,5],[-4,4],[-4,-1],[-9,0],[-6,4],[-5,5],[-8,4],[5,32],[8,27],[-14,32],[-54,96],[-26,29],[-18,15],[-31,10],[-15,-8],[-11,-12],[-10,-4],[-19,5],[-12,2],[-15,1],[-3,-4],[1,-3],[-1,-6],[-10,3],[-11,-6],[-14,1],[-20,3],[-24,4],[-14,8],[-14,3],[-7,10],[-11,2],[-24,19],[-29,25],[-14,6],[-5,16],[-26,20],[-11,19],[-15,21],[-9,8],[-7,7],[-11,6],[-10,-1],[-8,-3],[-12,6],[2,17],[-21,17],[-2,12],[-8,13],[-14,8],[-12,0],[-8,13],[-3,23],[-3,12],[-6,7],[-1,19],[7,18],[3,28],[5,48],[2,20],[-8,5],[-3,11],[-17,34],[-15,32],[-4,41],[-14,22],[-16,6],[-6,0],[-8,-2],[-1,-6],[-4,-2],[-2,8],[-10,10],[-9,22],[3,15],[3,16],[-5,14],[1,17],[-4,3],[5,2],[4,3],[6,0],[4,4],[2,6],[5,22],[1,40],[-7,40],[-6,23],[-5,28],[-2,31],[9,6],[8,0],[12,4],[9,21],[13,-6],[43,7],[10,-1],[10,-7],[10,-14],[1,-13],[5,-5],[-1,-10],[4,-9],[4,-7],[8,-10],[12,-10],[-8,-16],[-14,2],[-3,-10],[-12,3],[4,-35],[8,0],[-1,-11],[6,-12],[-7,-8],[-2,-12],[0,-5],[20,-5],[9,-14],[-5,-5],[-12,4],[-2,-9],[11,-5],[4,-7],[27,-4],[13,1],[1,-6],[16,-8],[16,-2],[24,-3],[7,-4],[6,-16],[5,-6],[9,-3],[20,-5],[10,-5],[1,-9],[-8,-9],[14,-3],[9,-8],[12,-4],[12,0],[10,-7],[14,1],[11,-14],[10,-18],[12,-13],[18,-7],[22,-1],[19,4],[7,12],[-9,5],[-7,1],[-4,3],[1,6],[1,7],[-1,6],[-6,8],[-5,5],[-6,2],[-24,0],[-15,15],[-7,26],[-29,38],[-6,40],[-10,51],[-22,28],[-6,10],[-15,11],[-7,-13],[-37,25],[-10,22],[13,5],[36,-5],[-5,16],[-5,1],[-4,-4],[-13,0],[-31,8],[-11,0],[-7,4],[-9,6],[2,8],[-10,1],[-2,-5],[-21,6],[3,15],[4,5],[-1,3],[-3,1],[-10,-2],[-2,4],[6,5],[12,-1],[5,7],[-11,4],[8,4],[18,2],[6,5],[-2,8],[-6,25],[-12,-2],[-2,8],[9,2],[-5,17],[-14,23],[-19,-2],[-16,-3],[-26,5],[3,13],[-8,8],[-14,4],[-10,18],[-8,16],[15,-2],[16,-6],[2,15],[26,10],[9,8],[-10,17],[3,9],[20,-7],[10,-2],[13,2],[5,5],[17,1],[22,14],[1,15],[11,8],[14,10],[22,3],[23,-6],[17,-5],[17,-21],[20,-5],[23,6],[42,20],[27,5],[48,3],[63,-12],[50,-4],[9,-7],[40,-12],[57,-8],[27,5],[27,-9],[21,-2],[11,0],[9,9],[-13,7],[-16,-3],[-12,4],[3,7],[15,3],[10,9],[9,1],[4,4],[3,9],[2,11],[0,9],[5,9],[10,3],[22,-1],[13,3],[0,6],[7,4],[10,1],[10,-5],[14,-3],[2,-9],[4,-9],[-6,-6],[-3,-7],[-14,-3],[-10,2],[-10,0],[-7,-11],[-5,-7],[9,-9],[10,-15],[8,-4],[6,4],[14,7],[2,8],[2,12],[1,11],[1,5],[9,4],[13,-9],[8,-3],[9,-4],[11,-11],[14,0],[11,-10],[20,-9],[21,-19],[13,-9],[0,8],[-13,18],[-17,17],[-10,8],[-17,6],[-9,5],[-13,0],[-3,6],[-6,4],[-6,-1],[-6,1],[-16,18],[-6,17],[-15,5],[-17,4],[-23,0],[-4,-3],[-8,-9],[-5,-2],[-7,2],[-6,3],[-6,2],[-15,-7],[-6,-11],[-2,-8],[-1,-14],[-10,-11],[-20,-11],[-21,-12],[-25,1],[-11,6],[-6,8],[1,9],[4,10],[10,8],[10,3],[12,4],[10,3],[19,15],[14,14],[14,19],[5,25],[-6,0],[-15,-27],[-16,-14],[-25,-22],[-20,-10],[-35,-16],[-20,6],[-21,4],[-16,-2],[-5,-7],[-15,-8],[-15,-4],[-18,0],[-12,6],[8,4],[5,5],[7,12],[-45,1],[-16,-5],[-18,8],[-24,17],[28,13],[-4,15],[-10,13],[-16,2],[-21,-2],[-17,-4],[-10,-6],[-3,-6],[3,-9],[-9,-14],[-18,-17],[-27,-26],[-5,-10],[-4,-8],[-27,1],[-7,12],[-18,11],[-5,-4],[-6,0],[-9,4],[-18,1],[-21,6],[-15,-3],[-11,6],[-10,12],[-18,23],[-93,48],[-14,-21],[-23,-11],[-15,2],[-8,-8],[-43,-4],[14,-9],[5,-30],[-11,-28],[-8,-19],[-3,-9],[-1,-7],[13,-4],[23,-8],[15,-8],[8,-14],[-5,-5],[-8,1],[-10,2],[-5,-7],[-18,-7],[-1,-12],[10,-10],[3,-7],[-11,-7],[-11,5],[-1,-6],[1,-10],[26,-10],[4,-5],[-2,-6],[14,-10],[11,-2],[10,-12],[-9,-9],[-7,-2],[-4,-1],[0,-9],[-10,5],[-4,7],[1,6],[-4,8],[-13,7],[-9,0],[3,-10],[1,-7],[-4,-6],[10,-8],[11,-5],[-2,-7],[3,-10],[6,-13],[-7,-7],[-10,1],[-14,-5],[-9,4],[-11,-3],[-5,-6],[-10,12],[-9,7],[-16,15],[-9,8],[-15,5],[-12,13],[-19,5],[-24,22],[-26,8],[-14,-2],[-10,-5],[-4,-8],[-12,9],[-14,3],[-6,18],[-14,13],[-17,5],[-14,11],[-15,29],[-15,10],[-10,14],[-18,9],[-65,27],[-14,3],[-11,15],[0,10],[12,7],[-15,6],[-6,-7],[-7,-4],[2,-6],[0,-10],[4,-4],[6,-11],[-12,-2],[-14,-4],[-15,-12],[-5,-11],[3,-6],[9,-2],[9,-4],[-12,-2],[-10,2],[-12,2],[-20,-1],[-9,1],[5,7],[6,0],[24,51],[40,100],[0,22],[-5,12],[-10,7],[1,17],[-9,10],[-9,13],[-10,9],[-3,14],[11,-5],[20,-21],[38,-45],[17,-24],[16,-23],[22,-21],[25,-20],[17,-21],[-7,25],[-17,16],[-37,46],[-46,65],[-8,4],[-7,-2],[-3,14],[-10,1],[-4,5],[0,15],[-6,16],[-12,12],[-15,18],[-26,19],[-17,0],[-5,-8],[-1,-7],[-9,-2],[-13,28],[7,25],[-3,14],[-7,13],[-8,20],[-9,5],[-6,17],[-10,9],[-12,18],[-4,13],[-41,31],[-79,33],[-20,20],[-31,21],[-10,9],[-21,10],[-5,21],[-14,11],[-9,4],[-4,12],[-30,32],[-13,25],[-18,12],[-1,9],[-39,38],[-18,15],[-30,11],[-14,27],[-21,11],[-7,13],[-27,11],[-22,23],[-31,23],[-14,24],[-33,30],[-14,15],[-14,4],[-1,16],[-15,23],[17,5],[20,32],[8,18],[7,22],[-2,11],[-4,22],[-9,26],[-8,23],[-9,29],[-16,10],[3,17],[-32,37],[-10,30],[-12,50],[-12,10],[5,20],[-8,7],[0,21],[-18,24],[4,61],[4,41],[17,49],[22,41],[6,16],[1,21],[-17,34],[0,62],[-4,12],[0,12],[-5,15],[-7,11],[-5,10],[-15,6],[-6,9],[-1,17],[-7,21],[1,22],[-7,27],[-10,26],[-25,12],[-27,23],[-22,44],[-24,18],[-23,40],[-22,16],[-20,26],[-11,10],[-11,7],[-13,5],[-5,-1],[-6,-1],[-6,6],[-5,9],[0,25],[-6,19],[-28,31],[-22,10],[-45,14],[-34,38],[-36,20],[-61,43],[-7,13],[-15,5],[-21,20],[4,22],[11,39],[-16,27],[-1,35],[-31,40],[-11,30],[13,23],[8,19],[4,17],[-2,10],[15,29],[12,28],[8,15],[27,42],[2,12],[2,4],[3,2],[4,1],[5,2],[-2,5],[-4,5],[4,7],[14,25],[19,25],[20,36],[13,26],[8,-10],[-16,-23],[-11,-22],[-1,-9],[12,-6],[13,-1],[8,-6],[4,4],[-3,5],[3,3],[8,4],[0,9],[-8,13],[4,9],[-3,7],[7,5],[10,3],[5,10],[-3,8],[3,7],[6,4],[3,19],[6,10],[7,4],[11,3],[18,3],[9,-2],[14,0],[13,7],[21,12],[4,19],[-1,5],[-10,6],[-7,5],[-7,-4],[-10,-3],[-7,2],[-5,4],[-6,7],[-13,-1],[-4,-2],[-2,-11],[-9,-9],[-4,-17],[-13,-11],[-9,-14],[-6,-19],[-23,-29],[-10,10],[16,21],[39,65],[42,93],[12,45],[10,39],[-1,27],[-5,7],[-10,2],[-7,-2],[-8,6],[-4,7],[-2,17],[-6,11],[-5,13],[0,15],[-4,20],[1,7],[7,4],[8,-2],[4,5],[19,38],[11,42],[21,72],[9,55],[14,61],[5,39],[-13,57],[-6,33],[13,19],[-10,4],[-10,6],[-8,8],[-6,11],[0,10],[1,28],[-4,6],[-8,10],[-11,23],[-13,26],[1,16],[-7,28],[-13,32],[-18,8],[-10,3],[-8,-3],[-5,-5],[-30,25],[-30,14],[3,13],[12,6],[13,20],[15,39],[8,43],[8,74],[-1,11],[-4,11],[-7,19],[28,0],[254,0],[254,0],[255,0],[254,0],[254,0],[254,0],[254,0],[254,0],[255,0],[254,0],[254,0],[254,0],[254,0],[254,0],[255,0],[254,0],[0,-193]]],"transform":{"scale":[0.0010291169766253915,0.0009468817613161783],"translate":[-124.4092019709999,32.531669490003665]}}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style>
body {
overflow: hidden
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js'></script>
<script>
const width = 1050;
const height = 1420;
var canvas = d3.select("body").append("canvas")
.attr("width", width)
.attr("height", height);
var context = canvas.node().getContext("2d");
const projection = d3.geo.mercator()
.scale(100000)
.center([-122.2927387, 37.631258])
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
//.context(context);
var graticule = d3.geo.graticule();
d3.json("alt-route-geography.json", function(error, routeTopology) {
d3.json("ca.topojson", function(error, ca) {
// d3.json("world-110m.json", function(error, world) {
console.log('routeTopology', routeTopology);
var countries = topojson.feature(ca, ca.objects.ca);
var track = topojson.feature(routeTopology, routeTopology.objects.route);
var pathEl = d3.select("body").append("svg").append("path").attr("d", path(track));
var length = pathEl.node().getTotalLength();
d3.select("svg").remove;
d3.transition()
.duration(12000)
.ease("linear")
.tween("zoom", function() {
return function(t) {
context.clearRect(0, 0, width, height);
context.strokeStyle = '#aaa';
context.fillStyle = '#ccc';
context.beginPath();
path.context(context)(graticule());
context.lineWidth = 0.2;
context.strokeStyle = 'rgba(30,30,30, 0.5)';
context.stroke();
context.beginPath();
path.context(context)(countries);
context.fill();
context.beginPath();
path.context(context)(countries);
context.stroke();
context.lineWidth = 5;
context.strokeStyle = 'rgba(120,60,60, 1)';
context.setLineDash([length]);
context.lineDashOffset = length*(1-t);
context.beginPath();
path.context(context)(track);
context.stroke();
context.setLineDash([]);
}
});
});
});
d3.select(self.frameElement).style("height", height + "px");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment