Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

View enjalot's full-sized avatar

Ian Johnson enjalot

View GitHub Profile

This example is the second of three in the Path Transitions tutorial; see the previous example for context.

The desired pairing of numbers for path interpolation is like this:

M x0, y0 L x1, y1 L x2, y2 L x3, y3 L xR, y4
   ↓   ↓    ↓   ↓    ↓   ↓    ↓   ↓
M xl, y0 L x0, y1 L x1, y2 L x2, y3 L x3, y4

Where xl is some negative value off the left side, and xr is some positive value off the right side. This way, the first point ⟨x0,y0⟩ is interpolated to ⟨xl,y0⟩; meaning, the x-coordinate is interpolated rather than the y-coordinate, and so the path appears to slide off to the left. Likewise, the incoming point ⟨xr,y4⟩ is interpolated to ⟨x3,y4⟩.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cleaning Up</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
Year ValueLandOcean ValueLand ValueOcean MeanLandOcean MeanLand MeanOcean
1914 -0.19 -0.08 -0.23 13.9 8.5 16.1
1915 -0.11 -0.07 -0.13 13.9 8.5 16.1
1916 -0.31 -0.37 -0.28 13.9 8.5 16.1
1917 -0.34 -0.52 -0.27 13.9 8.5 16.1
1918 -0.24 -0.36 -0.18 13.9 8.5 16.1
1919 -0.26 -0.32 -0.23 13.9 8.5 16.1
1920 -0.24 -0.3 -0.22 13.9 8.5 16.1
1921 -0.17 -0.06 -0.21 13.9 8.5 16.1
1922 -0.26 -0.24 -0.27 13.9 8.5 16.1
1914 -0.19 -0.08 -0.23 13.9 8.5 16.1
1915 -0.11 -0.07 -0.13 13.9 8.5 16.1
1916 -0.31 -0.37 -0.28 13.9 8.5 16.1
1917 -0.34 -0.52 -0.27 13.9 8.5 16.1
1918 -0.24 -0.36 -0.18 13.9 8.5 16.1
1919 -0.26 -0.32 -0.23 13.9 8.5 16.1
1920 -0.24 -0.3 -0.22 13.9 8.5 16.1
1921 -0.17 -0.06 -0.21 13.9 8.5 16.1
1922 -0.26 -0.24 -0.27 13.9 8.5 16.1
Season DWactor Generation Episode EpType EpTitle DateFrom DateTo TimeJumpYrs Place Locale
1 Hartnell Classic 10 Regular The Dalek Invasion of Earth 1963 2164 201 England London
1 Hartnell Classic 16 Regular The Chase 1872 1996 124 Africa Ghana
2 Troughton Classic 48 Regular The Seeds Of Death 1969 2190 221 England London
3 Pertwee Classic 60 Regular Day of the Daleks 1972 2100 128 England Northamtopnshire
3 Pertwee Classic 71 Regular Invasion of The Dinosaurs 1200 1974 774 England London
5 Davison Classic 128 Regular The King's Demons 1215 1982 767 England Cambridgeshire
5 Davison Classic 131 Regular The Awakening 1643 1983 340 England Dorset
6 Colin Baker Classic 137 Regular Attack of the Cybermen 1985 2530 545 England London
7 McCoy Classic 150 Regular Silver Nemesis 1638 1988 350 England Windsor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Doctor Who Earth-Based Time Travel Adventures</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
We can make this file beautiful and searchable if this error is corrected: It looks like row 3 should actually have 24 columns, instead of 15. in line 2.
State,WICparticipantsFY2009,WICparticipantsFY2011,"WICparticipants,FY2012",WICParticipants,NationalSchoolLunchProgramparticipantsFY2009,NationalSchoolLunchProgramparticipantsFY2011,"NationalSchoolLunchProgramparticipants,FY2012",SchoolBreakfastProgramparticipantsFY2009,SchoolBreakfastProgramparticipantsFY2011,"SchoolBreakfastProgramparticipants,FY2012",ChildandAdultCareparticpantsFY2009,ChildandAdultCareparticpantsFY2011,"ChildandAdultCareparticipants,FY2012",SummerFoodparticpantsFY2009,SummerFoodparticipantsFY2011,"SummerFoodparticipants,FY2012","StatePopulation,2008","StatePopulation,2009","StatePopulation,2010","StatePopulation,2011","StatePopulation,2012","StatePopulation,2013",
Alabama,"140,810","143,768","141,900",142,571,"571,291","562,959","212,316","216,714","224,496","43,136","42,774","42,933","26,599","24,724","26,423","4,677,464","4,708,708","4,785,401","4,802,740",4817528,4833722,
Alaska,"25,816","26,295","24,969",25,54,"54,410","53,920","16,943","19,974","20,759","9,874","9,616","10,541","2,345"
@enjalot
enjalot / index.html
Last active August 29, 2015 14:19 — forked from threestory/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: #808080;
font-family:Arial, sans-serif;
We can make this file beautiful and searchable if this error is corrected: It looks like row 5 should actually have 54 columns, instead of 2. in line 4.
Country,1960,1961,1962,1963,1964,1965,1966,1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012
Austria,37.5,32.7,32.8,31.3,29.2,28.3,28.1,26.4,25.5,25.4,25.9,26.1,25.2,23.8,23.5,20.5,18.2,16.8,15,14.7,14.3,12.6,12.8,11.9,11.4,11.2,10.3,9.8,8.1,8.3,7.8,7.5,7.5,6.5,6.3,5.4,5.1,4.7,4.9,4.4,4.8,4.8,4.1,4.5,4.5,4.2,3.6,3.7,3.7,3.8,3.9,3.6,3.2
Belgium,31.4,28.1,27.5,27.2,25.3,23.7,24.7,22.9,21.7,21.2,21.1,20.4,18.8,17.7,17.4,16.1,15.3,13.6,13.3,12.3,12.1,11.5,11.1,10.6,10,9.8,9.6,9.7,9,8.5,8,8.3,8.2,8,7.6,6,5,5.4,5.2,4.9,4.8,4.6,4.5,4.1,3.9,3.7,4,3.9,3.8,3.5,3.6,3.4,3.8
Bulgaria,45.1,37.8,37.3,35.7,32.9,30.8,32.2,33.1,28.3,30.5,27.3,24.9,26.2,26.2,25.5,23.1,23.5,24,22.2,19.8,20.2,18.9,18.2,16.5,16.1,15.4,14.7,14.7,13.6,14.4,14.8,16.9,15.9,15.5,16.3,14.8,15.6,17.5,14.4,14.6,13.3,14.4,13.3,12.3,11.6,10.4,9.7,9.2,8.6,9,9.4,8.5,7.8
Croatia,70.4