├── .gitignore
├── README.md
├── data
    ├── .DS_Store
    ├── test1.geojson
    └── test10.geojson
├── example1.html
├── example2.html
├── example3.html
├── images
    ├── Screen Shot 2015-03-23 at 5.12.53 PM.png
    ├── Screen Shot 2015-03-23 at 5.15.40 PM.png
    ├── Screen Shot 2015-03-23 at 5.15.48 PM.png
    ├── Screen Shot 2015-03-23 at 5.16.14 PM.png
    ├── Screen Shot 2015-03-23 at 5.20.01 PM.png
    └── Screen Shot 2015-03-23 at 5.21.08 PM.png
├── stroke-dash-array.key
└── stroke-dash-array.pdf


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/polyline


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # stroke-dash-interpolation-talk
 2 | Slides from March d3.js talk at Pivotal Labs are in the .key and .pdf files
 3 | 
 4 | This talk teaches how to make [this type](http://www.nytimes.com/newsgraphics/2013/10/13/russia/) of long-form interactive created by the New York Times.
 5 | 
 6 | Three key concepts:
 7 | 
 8 | 1. `getPointAtLength()` (example1.html / example2.html / example3.html)
 9 | 1. `Stroke-dasharray` (example2.html / example3.html)
10 | 2. `getTotalLength()` (example1.html / example2.html / example3.html)
11 | 
12 | An additional explainer [can be found in this gist](https://gist.github.com/petulla/2525ffad1705c99ae7d2).
13 | 
14 | 
15 | ### Links from the talk
16 | 
17 | [Example of an interpolation] (http://jsfiddle.net/c5YVX/8/)
18 | 
19 | [Explainer on stroke-dasharray] (https://source.opennews.org/en-US/articles/animating-maps-d3-and-topojson/)
20 | 
21 | 
22 | [Example of animating a circle along a path](example1.html)
23 | 
24 | [Airplanes example] (http://www.tnoda.com/blog/2014-04-02)
25 | 
26 | 
27 | [Projection of the line on a basemap](http://zevross.com/blog/2014/09/30/use-the-amazing-d3-library-to-animate-a-path-on-a-leaflet-map/)
28 | 
29 | [Tween between paths] (http://bl.ocks.org/mbostock/3916621)
30 | 
31 | [getPointAtLength for mouse interactions](http://bl.ocks.org/duopixel/3824661)
32 | 
33 | [Using to animate Citibike paths](https://citibike-explorer.herokuapp.com)
34 | 
35 | [Example of getting the point on a line from any position] (http://bl.ocks.org/mbostock/8027835)
36 | 
37 | [Convert Google Maps directions to a Linestring](http://zevross.com/blog/2014/09/23/convert-google-directions-to-geojson-points-or-polylines/)
38 | 
39 | [Change the point on a path relative to another window event](http://www.nytimes.com/interactive/2014/12/09/science/space/curiosity-rover-28-months-on-mars.html)
40 | 
41 | 


--------------------------------------------------------------------------------
/data/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petulla/stroke-dasharray-interpolation-talk/d9e20dddfd28ec1eede1ed5fc83f173bbcff5420/data/.DS_Store


--------------------------------------------------------------------------------
/data/test1.geojson:
--------------------------------------------------------------------------------
1 | {
2 | "type": "FeatureCollection",
3 | "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
4 | 
5 | "features": [
6 | { "type": "Feature", "properties": { "latitude": 40.722390, "longitude": -73.995170, "time": 1, "id": "route1", "name":"Gimme" }, "geometry": { "type": "Point", "coordinates": [ -73.99517, 40.72239 ] } },
7 | { "type": "Feature", "properties": { "latitude": 40.721580, "longitude": -73.995480, "time": 2, "id": "route1", "name":"Along route"  }, "geometry": { "type": "Point", "coordinates": [ -73.99548, 40.72158 ] } }}


--------------------------------------------------------------------------------
/data/test10.geojson:
--------------------------------------------------------------------------------
1 | {
2 | "type": "FeatureCollection",
3 | "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
4 |                                                                                 
5 | "features": [
6 | { "type": "Feature", "properties": { "id": 0 }, "geometry": { "type": "LineString", "coordinates": [ [ -73.996417800798241, 40.712589073717979 ], [ -73.98372686750406, 40.71896699034825 ], [ -73.99586602108981, 40.721894354036948 ], [ -73.980830024034702, 40.726494236867744 ], [ -73.997383415288027, 40.728375915486041 ], [ -73.979588519690736, 40.732557233036481 ], [ -74.001797652955574, 40.737260901212267 ], [ -73.981657693597384, 40.743949989807057 ], [ -73.993520957328911, 40.745308628732268 ], [ -73.974484557387612, 40.753668872715252 ], [ -73.991037948640908, 40.755340795379475 ], [ -73.975036337096071, 40.760983223958874 ] ] } }
7 | ]
8 | }
9 | 


--------------------------------------------------------------------------------
/example1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
 5 |     <title>Point-along-path Interpolation</title>
 6 |   <body>
 7 |     <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.6"></script>
 8 |     <style type="text/css">
 9 | 
10 | path {
11 |   cursor: pointer;
12 |   fill: #eee;
13 |   stroke: #666;
14 |   stroke-width: 1.5px;
15 | }
16 | 
17 | circle {
18 |   fill: steelblue;
19 |   stroke: white;
20 |   stroke-width: 1.5px;
21 | }
22 | 
23 |     </style>
24 |     <script type="text/javascript">
25 | 
26 | var w = 1260,
27 |     h = 800;
28 | 
29 | var svg = d3.select("body").append("svg:svg")
30 |     .attr("width", w)
31 |     .attr("height", h)
32 |   .append("svg:g")
33 |     .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
34 | 
35 | var path = svg.append("svg:path")
36 |     .attr("d", d3.svg.arc()
37 |     .innerRadius(h / 4)
38 |     .outerRadius(h / 3)
39 |     .startAngle(0)
40 |     .endAngle(Math.PI));
41 | 
42 | var circle = svg.append("svg:circle")
43 |     .attr("r", 6.5)
44 |     .attr("transform", "translate(0," + -h / 3 + ")");
45 | 
46 | function transition() {
47 |   circle.transition()
48 |       .duration(5000)
49 |       .attrTween("transform", translateAlong(path.node()))
50 | }
51 | 
52 | transition();
53 | 
54 | function translateAlong(path) {
55 |   var l = path.getTotalLength();
56 |   return function(d, i) {
57 |     return function(t) {
58 |       var p = path.getPointAtLength(t * l);
59 |       return "translate(" + p.x + "," + p.y + ")";
60 |     };
61 |   };
62 | }
63 | 
64 |     </script>
65 |   </body>
66 | </html>


--------------------------------------------------------------------------------
/example2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <meta charset="utf-8">
 3 | <body>
 4 | <style>
 5 | 
 6 | path {
 7 |   fill: none;
 8 |   stroke: #000;
 9 |   stroke-width: 3px;
10 | }
11 | 
12 | circle {
13 |   fill: steelblue;
14 |   stroke: #fff;
15 |   stroke-width: 3px;
16 | }
17 | </style>
18 | <script src="http://d3js.org/d3.v3.min.js"></script>
19 | <script>
20 | 
21 | var points = [
22 |   [480, 200],
23 |   [480, 400],
24 |   [680, 200],
25 |   [680, 400]
26 | ];
27 | 
28 | var line = d3.svg.line()
29 |     .tension(0)
30 |     //.interpolate("linear-closed");
31 |     .interpolate("basis-closed");
32 | 
33 | var svg = d3.select("body").append("svg")
34 |     .attr("width", 960)
35 |     .attr("height", 900);
36 | 
37 | svg.append("path")
38 |     .datum(points)
39 |     .style("stroke", "#ddd")
40 |     .style("stroke-dasharray", "4,4")
41 |     .attr("d", line);
42 | 
43 | var path = svg.append("path")
44 |     .datum(points)
45 |     .attr("d", line)
46 |     .call(transition2);
47 | 
48 | 
49 | var circle = svg.append("circle")
50 |     .attr("r", 7)
51 |     .attr("transform", "translate(" + points[0] + ")");
52 | 
53 | transition();
54 | function transition() {
55 | 
56 |    circle.transition()
57 |       .duration(7500)
58 |       .attrTween("transform", translateAlong(path.node()));
59 | }
60 | 
61 | function transition2(path) {
62 |   path.transition()
63 |       .duration(7500)
64 |       .attrTween("stroke-dasharray", tweenDash);
65 | }
66 | 
67 | function tweenDash() {
68 |   var l = this.getTotalLength(),
69 |       i = d3.interpolateString(0 + "," + l, l + "," + l);
70 |       
71 |   return function(t) { return i(t); };
72 | }
73 | 
74 | function translateAlong(path) {
75 |   var l = path.getTotalLength();
76 |   return function(d, i) {
77 |     return function(t) {
78 |       var p = path.getPointAtLength(t * l);
79 |       return "translate(" + p.x + "," + p.y + ")";
80 |     };
81 |   };
82 | }
83 | 
84 | </script>


--------------------------------------------------------------------------------
/example3.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <meta charset="utf-8">
  3 | <body>
  4 | <style>
  5 | 
  6 | path {
  7 |   fill: none;
  8 |   stroke: #000;
  9 |   stroke-width: 3px;
 10 | }
 11 | 
 12 | circle {
 13 |   fill: steelblue;
 14 |   stroke: #fff;
 15 |   stroke-width: 3px;
 16 | }
 17 | 
 18 | 
 19 | </style>
 20 | <script src="http://d3js.org/d3.v3.min.js"></script>
 21 | <script src="http://d3js.org/queue.v1.min.js"></script>
 22 | <script>
 23 | 
 24 |   var width = 960,
 25 |       height = 1160;
 26 | 
 27 |   var projection = d3.geo.mercator().center([-73.98,40.75])
 28 |       .scale(500000),
 29 |   path = d3.geo.path().projection(projection);
 30 | 
 31 | 
 32 | function ready(error,json) {
 33 | 
 34 |      var section = d3.select("body")
 35 |       .append("svg")
 36 |       .attr("width", width)
 37 |       .attr("height", height)
 38 |       .attr("id","svg");
 39 | 
 40 |     
 41 | 
 42 |     var path2 = section.append("g")
 43 |       .selectAll("path")
 44 |       .data(json.features)
 45 |         .enter()
 46 |           .append("path").attr("class","thepath")
 47 |           .style("stroke", "#333")
 48 |           .style("stroke-dasharray","2,2")
 49 |           .style('stroke-width',".9px")
 50 |           .style("opacity",".5")
 51 |           .attr("d", path)
 52 |           .attr("fill", "none");
 53 | 
 54 |     
 55 | 
 56 |     var pathz = section.append("g")
 57 |       .selectAll("path")
 58 |       .data(json.features)
 59 |       .enter()
 60 |         .append("path").attr("class","thepath")
 61 |         .style("stroke", "#999")
 62 |         .style('stroke-width',"1.5px")
 63 |         .call(transition2)
 64 | 
 65 |     var circle = d3.select("#svg").append("circle")
 66 |       .attr("r", 7);
 67 | 
 68 |     pathz
 69 |     .attr("d", path)
 70 |     .attr("fill", "none")
 71 |     .call(transition)
 72 | 
 73 | 
 74 |     function transition2(paths) {
 75 |       paths.transition()
 76 |           .duration(8500)
 77 |           .attrTween("stroke-dasharray", tweenDash);
 78 |     }
 79 | 
 80 | 
 81 |     function transition() {
 82 |      circle.transition()
 83 |         .duration(8500)
 84 |         .attrTween("transform", translateAlong(pathz.node()));
 85 |     }
 86 | 
 87 |     function translateAlong(paths) {
 88 |       var l = paths.getTotalLength();
 89 |       return function(d,i) {
 90 |         return function(t) {
 91 |           var p = paths.getPointAtLength(t * l);
 92 |           return "translate(" + p.x + "," + p.y + ")";
 93 |         };
 94 |       };
 95 |     }
 96 | 
 97 | 
 98 | 
 99 |     function tweenDash() {
100 |       var l = this.getTotalLength(),
101 |       i = d3.interpolateString(0 + "," + l, l + "," + l);
102 |       return function(t) { return i(t); };
103 |     }
104 | 
105 | 
106 | 
107 | }
108 | queue()
109 |     .defer(d3.json,'./data/test10.geojson').await(
110 |       ready
111 |     )
112 | 
113 | </script>


--------------------------------------------------------------------------------
/images/Screen Shot 2015-03-23 at 5.12.53 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petulla/stroke-dasharray-interpolation-talk/d9e20dddfd28ec1eede1ed5fc83f173bbcff5420/images/Screen Shot 2015-03-23 at 5.12.53 PM.png


--------------------------------------------------------------------------------
/images/Screen Shot 2015-03-23 at 5.15.40 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petulla/stroke-dasharray-interpolation-talk/d9e20dddfd28ec1eede1ed5fc83f173bbcff5420/images/Screen Shot 2015-03-23 at 5.15.40 PM.png


--------------------------------------------------------------------------------
/images/Screen Shot 2015-03-23 at 5.15.48 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petulla/stroke-dasharray-interpolation-talk/d9e20dddfd28ec1eede1ed5fc83f173bbcff5420/images/Screen Shot 2015-03-23 at 5.15.48 PM.png


--------------------------------------------------------------------------------
/images/Screen Shot 2015-03-23 at 5.16.14 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petulla/stroke-dasharray-interpolation-talk/d9e20dddfd28ec1eede1ed5fc83f173bbcff5420/images/Screen Shot 2015-03-23 at 5.16.14 PM.png


--------------------------------------------------------------------------------
/images/Screen Shot 2015-03-23 at 5.20.01 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petulla/stroke-dasharray-interpolation-talk/d9e20dddfd28ec1eede1ed5fc83f173bbcff5420/images/Screen Shot 2015-03-23 at 5.20.01 PM.png


--------------------------------------------------------------------------------
/images/Screen Shot 2015-03-23 at 5.21.08 PM.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petulla/stroke-dasharray-interpolation-talk/d9e20dddfd28ec1eede1ed5fc83f173bbcff5420/images/Screen Shot 2015-03-23 at 5.21.08 PM.png


--------------------------------------------------------------------------------
/stroke-dash-array.key:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petulla/stroke-dasharray-interpolation-talk/d9e20dddfd28ec1eede1ed5fc83f173bbcff5420/stroke-dash-array.key


--------------------------------------------------------------------------------
/stroke-dash-array.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/petulla/stroke-dasharray-interpolation-talk/d9e20dddfd28ec1eede1ed5fc83f173bbcff5420/stroke-dash-array.pdf


--------------------------------------------------------------------------------