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
{
"type":"Topology",
"objects":{
"route":{
"type":"GeometryCollection",
"geometries":[
{
"type":"LineString",
"arcs":[
0
]
}
]
}
},
"arcs":[
[
[
9864,
0
],
[
2,
20
],
[
70,
-3
],
[
63,
106
],
[
-80,
-15
],
[
-55,
33
],
[
-110,
76
],
[
-128,
98
],
[
-150,
122
],
[
-160,
133
],
[
-160,
125
],
[
-147,
118
],
[
-80,
69
],
[
-612,
309
],
[
-330,
159
],
[
-751,
373
],
[
-98,
40
],
[
-403,
54
],
[
-512,
62
],
[
-125,
29
],
[
-169,
66
],
[
-185,
62
],
[
-201,
47
],
[
-147,
44
],
[
-605,
422
],
[
-637,
480
],
[
-337,
323
],
[
-479,
415
],
[
-392,
309
],
[
-529,
411
],
[
-468,
21
],
[
-381,
37
],
[
-109,
51
],
[
-577,
319
],
[
-348,
182
],
[
-175,
153
],
[
-228,
421
],
[
-33,
182
],
[
-98,
464
],
[
44,
138
],
[
163,
51
],
[
163,
131
],
[
109,
131
],
[
87,
87
],
[
11,
203
],
[
-43,
94
],
[
-55,
175
],
[
-43,
181
],
[
-33,
145
],
[
-44,
160
],
[
-54,
87
],
[
-98,
189
],
[
-44,
108
],
[
-65,
138
],
[
-71,
109
],
[
85,
71
],
[
155,
123
],
[
98,
102
],
[
111,
128
],
[
-19,
160
],
[
-5,
111
],
[
-8,
83
],
[
-25,
56
],
[
-95,
74
],
[
-54,
80
],
[
8,
47
],
[
109,
64
],
[
100,
76
],
[
74,
61
],
[
24,
57
],
[
6,
70
],
[
11,
73
],
[
-14,
36
],
[
-52,
36
],
[
-18,
17
],
[
-17,
25
],
[
-6,
5
],
[
-23,
-17
],
[
-12,
-9
],
[
16,
-10
]
]
],
"transform":{
"scale":[
0.00003152876475391822,
0.00003742959691859332
],
"translate": [
-122.40657806396484,
37.418282564688845
]
}
}
Display the source blob
Display the rendered blob
Raw
ca.topojson
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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