Based on the Treemap example.
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⟩.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
OlderNewer