stroke-dash-interpolation-talk

Slides from March d3.js talk at Pivotal Labs are in the .key and .pdf files

This talk teaches how to make this type of long-form interactive created by the New York Times.

Three key concepts:

1. getPointAtLength() (example1.html / example2.html / example3.html)
2. Stroke-dasharray (example2.html / example3.html)
3. getTotalLength() (example1.html / example2.html / example3.html)

An additional explainer can be found in this gist.

Links from the talk

[Example of an interpolation] (http://jsfiddle.net/c5YVX/8/)

[Explainer on stroke-dasharray] (https://source.opennews.org/en-US/articles/animating-maps-d3-and-topojson/)

Example of animating a circle along a path

[Airplanes example] (http://www.tnoda.com/blog/2014-04-02)

Projection of the line on a basemap

[Tween between paths] (http://bl.ocks.org/mbostock/3916621)

getPointAtLength for mouse interactions

Using to animate Citibike paths

[Example of getting the point on a line from any position] (http://bl.ocks.org/mbostock/8027835)

Convert Google Maps directions to a Linestring

Change the point on a path relative to another window event