Slides from 2015 D3.js talk
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
data
images
.gitignore
README.md
example1.html
example2.html
example3.html
stroke-dash-array.key
stroke-dash-array.pdf

README.md

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