Last active
August 29, 2015 13:56
-
-
Save phil-pedruco/9087479 to your computer and use it in GitHub Desktop.
Axis transition
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
Date | Alabama | Alaska | Arizona | Arkansas | California | Colorado | Connecticut | Delaware | Midwest | Northeast | South | West | United States | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1917 | 14.3 | 2.8 | 11.7 | 11.2 | 15 | 13.3 | 19.1 | 37.9 | 13.1 | 22.9 | 15.7 | 13.2 | 17.3 | |
1918 | 11.5 | 1.3 | 11.6 | 11.7 | 14.9 | 10.3 | 16.9 | 32.9 | 11.7 | 20.2 | 15.1 | 11.7 | 15.6 | |
1919 | 13.2 | 1.1 | 9.8 | 9.9 | 15 | 12.1 | 16.6 | 30.4 | 12.8 | 21.2 | 14.3 | 12.2 | 16 | |
1920 | 12.1 | 1.2 | 8.3 | 9.6 | 12.7 | 11.1 | 14.1 | 21 | 12.4 | 17.8 | 13.5 | 10.9 | 14.5 | |
1921 | 13.4 | 2.1 | 8.4 | 10.6 | 13.4 | 11.7 | 16.4 | 21.8 | 13.2 | 17.9 | 14 | 12 | 15.3 | |
1922 | 14.2 | 2 | 9.8 | 11.7 | 14.2 | 13.6 | 16.6 | 23 | 14.1 | 19.8 | 15 | 12.8 | 16.6 | |
1923 | 13.4 | 1.9 | 9.1 | 10.9 | 13.4 | 12.1 | 16.2 | 22.7 | 12.9 | 18 | 14.4 | 12 | 15.3 | |
1924 | 14.5 | 2.3 | 10.4 | 11.1 | 14.7 | 13.1 | 18.5 | 29.1 | 14.7 | 20 | 15.3 | 12.9 | 17 | |
1925 | 15.8 | 3.1 | 14.2 | 12.5 | 16.3 | 16 | 21.3 | 35.4 | 17.3 | 22.9 | 18 | 15.2 | 19.8 | |
1926 | 15.2 | 4.5 | 14 | 12.3 | 17.3 | 15.7 | 20 | 38.1 | 17.4 | 21.6 | 17.7 | 16.2 | 19.4 | |
1927 | 15.6 | 4.6 | 14.7 | 13.3 | 17.5 | 17.4 | 21.2 | 42.1 | 18 | 23 | 18.5 | 16.4 | 20.5 | |
1928 | 17.6 | 5.2 | 17.5 | 14 | 20 | 19.3 | 23.6 | 45 | 20.6 | 26.3 | 20.4 | 18.8 | 23.4 | |
1929 | 14.2 | 2.9 | 14.3 | 12.8 | 17.5 | 16.9 | 23.6 | 67.8 | 18.1 | 27.4 | 17.4 | 16.1 | 21.8 | |
1930 | 14.4 | 3 | 12 | 12.7 | 14.4 | 14.7 | 17.1 | 28 | 15.2 | 18.5 | 15.5 | 13.5 | 16.8 | |
1931 | 14.5 | 3.1 | 11.4 | 11.2 | 12.9 | 14.7 | 15 | 25.1 | 13.9 | 15.8 | 14.9 | 12.6 | 15.1 | |
1932 | 14.8 | 3 | 11.2 | 12.8 | 12.8 | 14.2 | 15.3 | 28.6 | 13.5 | 16.1 | 15.3 | 12.4 | 15.2 | |
1933 | 14.5 | 3.3 | 10.7 | 14 | 13.3 | 13.6 | 15.8 | 29.4 | 14.3 | 17.6 | 15.5 | 12.9 | 16.1 | |
1934 | 13.8 | 3.6 | 11.5 | 14.5 | 14.6 | 16.6 | 15.7 | 34 | 14.7 | 17 | 16 | 13.8 | 16 | |
1935 | 14.1 | 4 | 11.8 | 13.9 | 15 | 16 | 17.1 | 36.4 | 14.4 | 17.9 | 16.2 | 14.2 | 16.3 | |
1936 | 15.7 | 4.4 | 13.7 | 16 | 16.7 | 17.9 | 20.5 | 46 | 17.6 | 20.2 | 18.6 | 15.8 | 18.8 | |
1937 | 15.5 | 4.3 | 12.7 | 14.5 | 15.4 | 17.5 | 18.8 | 41.7 | 15.3 | 17.8 | 17.2 | 14.8 | 16.8 | |
1938 | 14.9 | 4.3 | 11.4 | 15.1 | 13.8 | 14.9 | 15.9 | 34.6 | 14.2 | 15.2 | 16.3 | 13.1 | 15.1 | |
1939 | 16.1 | 5.1 | 11.7 | 15.4 | 13.4 | 15.3 | 16.8 | 44.7 | 14.7 | 16 | 16.4 | 13 | 15.5 | |
1940 | 16.3 | 5.6 | 11.8 | 16.1 | 13.2 | 14.9 | 16.8 | 39.6 | 15.3 | 16.1 | 16.8 | 13.1 | 15.8 | |
1941 | 15.9 | 5.9 | 12.2 | 17.5 | 13.1 | 15.1 | 15.1 | 30.2 | 14.5 | 15.5 | 16 | 12.9 | 15.1 | |
1942 | 13.2 | 6.1 | 11.4 | 13.3 | 11.3 | 13 | 12.5 | 18.8 | 12.6 | 13.7 | 12.9 | 11.4 | 13 | |
1943 | 11.7 | 5.2 | 9.2 | 12.9 | 10.7 | 12.8 | 11.5 | 18 | 11.4 | 12.8 | 11.7 | 10.6 | 11.9 | |
1944 | 13.6 | 6.4 | 11 | 13.7 | 9.9 | 13.1 | 10.1 | 9.9 | 12.6 | 11.4 | 12.3 | 10.5 | 11.9 | |
1945 | 12 | 4.7 | 11.2 | 11.8 | 11.5 | 13.6 | 13.3 | 21.8 | 12.4 | 14.7 | 12.2 | 11.4 | 13.1 | |
1946 | 13.6 | 4.4 | 11.7 | 13.7 | 11.5 | 13.2 | 12.8 | 22.2 | 12.2 | 14.1 | 13.3 | 11.3 | 13.1 | |
1947 | 12.2 | 4 | 10 | 13.5 | 10.4 | 11.8 | 11.3 | 20.6 | 10.9 | 12.4 | 11.8 | 10.3 | 11.7 | |
1948 | 12.1 | 4.4 | 11.4 | 12.5 | 12.5 | 12.8 | 12.3 | 22.3 | 11 | 13 | 12.9 | 11.9 | 12.3 | |
1949 | 11.9 | 4 | 10.4 | 12.3 | 11.6 | 11.1 | 12.1 | 25.1 | 11 | 12.4 | 12.1 | 10.9 | 11.7 | |
1950 | 13 | 4.2 | 13.9 | 13.1 | 12.8 | 13.1 | 13.6 | 30.7 | 11.7 | 13.8 | 13.4 | 12.2 | 12.9 | |
1951 | 11.4 | 3.4 | 11.5 | 11.2 | 11.7 | 11.3 | 11.7 | 23.7 | 10.8 | 12.7 | 12 | 11.2 | 11.8 | |
1952 | 10.6 | 4.5 | 10.6 | 10.4 | 10.3 | 11.1 | 12.3 | 20.2 | 10 | 11.6 | 11.2 | 10.1 | 10.8 | |
1953 | 9.9 | 4.1 | 8.7 | 10.4 | 9.2 | 9.6 | 9.8 | 20.1 | 9.4 | 10.6 | 10.2 | 8.9 | 9.9 | |
1954 | 10.9 | 4.3 | 9.8 | 12.7 | 10.3 | 11.1 | 11.1 | 23.1 | 9.8 | 11.7 | 11.3 | 9.9 | 10.8 | |
1955 | 11.2 | 3.4 | 10.5 | 11.4 | 10.7 | 11 | 11.3 | 25.6 | 9.8 | 12.4 | 11.3 | 10.2 | 11.1 | |
1956 | 10.6 | 3.4 | 10.4 | 11.4 | 9.5 | 11.4 | 11.3 | 20.4 | 9.9 | 11.7 | 11 | 9.5 | 10.7 | |
1957 | 9.7 | 4.1 | 10 | 10.2 | 9.2 | 9.4 | 9.9 | 20.1 | 9.5 | 10.9 | 10.6 | 9.1 | 10.2 | |
1958 | 10.1 | 4.4 | 9.9 | 11 | 9.5 | 9.5 | 11 | 19.8 | 9.4 | 11.3 | 10.3 | 9.3 | 10.2 | |
1959 | 10.5 | 4.1 | 10.9 | 11.1 | 10 | 9.5 | 10.9 | 20.6 | 9.5 | 11.9 | 10.9 | 9.7 | 10.7 | |
1960 | 9.8 | 4.7 | 10.7 | 10.5 | 9.4 | 9.1 | 10.9 | 18.4 | 9.4 | 10.8 | 10.3 | 9.1 | 10 | |
1961 | 9.3 | 5.4 | 9.9 | 10.6 | 10 | 9.9 | 11.4 | 19.6 | 9.9 | 11.8 | 10.6 | 9.7 | 10.7 | |
1962 | 9.5 | 4.6 | 9.7 | 10.9 | 9.1 | 9.2 | 10.3 | 19.4 | 9.2 | 10.7 | 10.3 | 8.9 | 9.9 | |
1963 | 10 | 4.6 | 9.4 | 11 | 9.1 | 9.4 | 10.3 | 19 | 9.2 | 10.7 | 10.3 | 8.9 | 9.9 | |
1964 | 10.2 | 5.6 | 10.1 | 11.4 | 9.8 | 9.5 | 11.5 | 24.7 | 9.9 | 11.4 | 11 | 9.6 | 10.6 | |
1965 | 10.3 | 5.9 | 10.7 | 12 | 9.9 | 9.1 | 11.9 | 26.3 | 10.1 | 11.8 | 11.2 | 9.7 | 10.8 | |
1966 | 10.3 | 5 | 9.3 | 10.9 | 9.3 | 8.9 | 11 | 17 | 9.5 | 11.3 | 10.6 | 9.1 | 10.3 | |
1967 | 10.1 | 5.2 | 10.2 | 10.9 | 10 | 9.6 | 11.8 | 15.5 | 10 | 12.1 | 10.8 | 9.7 | 10.8 | |
1968 | 10.3 | 5.1 | 10.3 | 11.2 | 10.3 | 9.7 | 14.3 | 14.4 | 10.1 | 12.7 | 11.1 | 10 | 11.2 | |
1969 | 9.7 | 5.2 | 9.9 | 11 | 9.5 | 9.3 | 12.2 | 13.7 | 9.6 | 11.5 | 10.6 | 9.4 | 10.4 | |
1970 | 9.1 | 5 | 8.8 | 9.7 | 8.4 | 7.9 | 9.7 | 11.6 | 8.6 | 9.7 | 9.5 | 8.2 | 9.1 | |
1971 | 9.7 | 5.3 | 9.1 | 10.2 | 8.8 | 8.5 | 10.5 | 11.4 | 8.7 | 10.1 | 10.1 | 8.6 | 9.5 | |
1972 | 9.8 | 5.2 | 9.1 | 10.4 | 9.1 | 8.6 | 10.9 | 11.4 | 8.9 | 10.2 | 10.3 | 8.8 | 9.7 | |
1973 | 9.7 | 5.5 | 8.8 | 10.6 | 8.7 | 8.2 | 9.8 | 11.2 | 8.3 | 9.5 | 10 | 8.6 | 9.2 | |
1974 | 8.8 | 8.4 | 7.8 | 9.7 | 8.6 | 8.1 | 9.3 | 9.1 | 8 | 8.8 | 9 | 8.3 | 8.7 | |
1975 | 9.7 | 4.8 | 8.2 | 10.3 | 8.5 | 8.2 | 9.6 | 9 | 8.4 | 9.2 | 9.5 | 8.3 | 8.9 | |
1976 | 9.3 | 4.3 | 8.2 | 9.9 | 8.7 | 7.8 | 9.8 | 9.1 | 8.5 | 9.2 | 9.4 | 8.3 | 8.9 | |
1977 | 9.4 | 4.8 | 8.3 | 9.9 | 9 | 8.4 | 10.2 | 9.2 | 8.5 | 9.3 | 9.5 | 8.6 | 9 | |
1978 | 8.8 | 4.9 | 8.5 | 9 | 9 | 8.3 | 10.1 | 9.4 | 8.4 | 9.4 | 9.3 | 8.6 | 9 | |
1979 | 9.5 | 5.3 | 9.1 | 9.8 | 10.2 | 9 | 11.2 | 10.2 | 9.1 | 10.3 | 10.4 | 9.6 | 9.9 | |
1980 | 9.8 | 5.1 | 8.5 | 9.6 | 9.7 | 9.2 | 11.4 | 10.2 | 9.1 | 10.6 | 10.4 | 9.2 | 9.9 | |
1981 | 9.4 | 5.6 | 8.5 | 9.5 | 9.8 | 9.1 | 11.3 | 10 | 8.9 | 10.7 | 10.3 | 9.2 | 9.9 | |
1982 | 10.3 | 7.1 | 9.7 | 10.5 | 9.9 | 9.6 | 11.7 | 9.7 | 9.7 | 10.7 | 10.7 | 9.5 | 10.2 | |
1983 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | |
1984 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | |
1985 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | |
1986 | 12.4 | 7.1 | 12.1 | 12 | 12.9 | 10.7 | 16.3 | 11.2 | 11.2 | 15.1 | 13.2 | 12.1 | 13 | |
1987 | 10 | 6.6 | 10.2 | 9.9 | 11.3 | 8.8 | 13.5 | 9.3 | 9.7 | 12.7 | 10.8 | 10.4 | 11 | |
1988 | 11.2 | 7 | 11.3 | 11.3 | 13.4 | 10.3 | 16 | 10.6 | 11.2 | 14.7 | 12.5 | 12.4 | 12.8 | |
1989 | 10.9 | 7.6 | 10.7 | 10.4 | 13.4 | 10 | 14.2 | 10 | 10.7 | 13.6 | 12.1 | 12.3 | 12.3 | |
1990 | 12.5 | 11.4 | 12.8 | 12.3 | 16 | 12.3 | 16.5 | 11.6 | 12.7 | 15.6 | 13.8 | 15 | 14.4 | |
1991 | 12.4 | 8.5 | 12.2 | 11.9 | 14.2 | 11.8 | 15.8 | 11.2 | 12.4 | 14.7 | 13 | 13.5 | 13.5 | |
1992 | 13.6 | 9.1 | 13.4 | 13 | 15 | 13.1 | 18.9 | 12.2 | 13.5 | 16.7 | 14.3 | 14.4 | 14.9 | |
1993 | 13.2 | 8.8 | 13.2 | 12.6 | 14.4 | 13.1 | 18.3 | 12.2 | 13.3 | 16.3 | 13.9 | 13.9 | 14.5 | |
1994 | 13.9 | 9 | 13.3 | 13.4 | 14.4 | 13.4 | 17.3 | 12.3 | 13.4 | 15.9 | 14 | 13.9 | 14.4 | |
1995 | 14.4 | 9 | 14.4 | 13.5 | 15.6 | 13.7 | 19.7 | 12.8 | 13.9 | 17.1 | 14.6 | 14.9 | 15.2 | |
1996 | 14.7 | 9.6 | 16.2 | 13.3 | 17.2 | 14.7 | 21.9 | 14.2 | 17 | 18.8 | 15.7 | 16.4 | 16.5 | |
1997 | 15.1 | 10.1 | 16.8 | 13.5 | 18.9 | 16.2 | 25.5 | 20.9 | 15.5 | 20.4 | 17 | 17.8 | 17.8 | |
1998 | 15.4 | 11.2 | 17.4 | 14.9 | 19.4 | 17.4 | 26.6 | 16.2 | 16.3 | 21.5 | 17.8 | 18.7 | 18.7 | |
1999 | 15.5 | 10.5 | 17.6 | 14.5 | 23.3 | 18.6 | 27.5 | 24.9 | 16.1 | 22.8 | 17.7 | 21.6 | 19.6 | |
2000 | 15 | 11.5 | 17.8 | 14.8 | 27.5 | 20.5 | 30.4 | 17.5 | 16.1 | 24.6 | 18.1 | 24.1 | 20.9 | |
2001 | 14 | 10.3 | 15.6 | 14 | 19.9 | 16.4 | 27.8 | 14.8 | 14.5 | 22.7 | 16.2 | 18.2 | 18.1 | |
2002 | 13.9 | 10.1 | 14.6 | 14.2 | 17.4 | 14.8 | 23.4 | 13.9 | 14.4 | 19.6 | 15.4 | 16.5 | 16.6 | |
2003 | 14.3 | 10.9 | 15.6 | 14.1 | 18.7 | 15.1 | 25 | 14.8 | 13.2 | 18.4 | 14.6 | 15.7 | 17.2 | |
2004 | 15.6 | 11.4 | 18.7 | 15.1 | 20.9 | 17.5 | 27.6 | 17.7 | 15.7 | 22.2 | 18 | 19.6 | 19.1 | |
2005 | 17.7 | 12 | 21.7 | 16 | 23.2 | 18.8 | 29.7 | 20.5 | 16.7 | 23.7 | 20.4 | 21.7 | 21 | |
2006 | 19.3 | 12.6 | 21.8 | 15.5 | 22.6 | 20.1 | 29.9 | 18 | 17.4 | 24.5 | 21 | 21.7 | 21.5 | |
2007 | 18.5 | 12.8 | 20 | 16.1 | 22.7 | 19.7 | 33.4 | 17.3 | 17.8 | 26.1 | 20.1 | 21.5 | 21.8 | |
2008 | 16.7 | 13 | 16.8 | 15.9 | 19.3 | 16.9 | 27.4 | 15.2 | 16.4 | 22.7 | 18.9 | 18.3 | 19.5 | |
2009 | 15.2 | 12.3 | 16 | 17.2 | 18.6 | 15.3 | 26.5 | 13.8 | 15.3 | 21.3 | 17 | 17.4 | 18 | |
2010 | 16.7 | 12.6 | 16.9 | 17.3 | 21.8 | 17.7 | 31.5 | 13.7 | 16.8 | 23.9 | 18.3 | 19.7 | 19.9 | |
2011 | 16.2 | 12 | 16.9 | 17.6 | 21.3 | 18.8 | 29.1 | 14.1 | 16.6 | 23.6 | 18.5 | 19.5 | 19.8 | |
2012 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
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> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
<title>Examples</title> | |
<meta name="description" content=""> | |
<meta name="keywords" content=""> | |
<link href="" rel="stylesheet"> | |
<style type="text/css"> | |
path.line { | |
fill: none; | |
stroke-width: 2px; | |
} | |
path.domain { | |
fill: none; | |
stroke: black; | |
stroke-width: 1px; | |
shape-rendering: crispEdges; | |
} | |
.choosen { | |
fill: none; | |
stroke: green; | |
stroke-width: 2px; | |
shape-rendering: crispEdges; | |
} | |
text { | |
font-family: arial; | |
} | |
</style> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
</head> | |
<body> | |
<div id="dropDown"></div> | |
<div id="chart"></div> | |
</body> | |
<script type="text/javascript"> | |
var margin = { | |
top: 20, | |
right: 30, | |
bottom: 30, | |
left: 60 | |
}, | |
width = 960 - margin.left - margin.right, | |
height = 350 - margin.top - margin.bottom; | |
var stateData; | |
var x = d3.scale.linear() | |
.range([0, width]); | |
var y = d3.scale.linear() | |
.range([height, 0]); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.tickFormat(d3.format(".0f")) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.tickFormat(d3.format(",.0f")) | |
.orient("left"); | |
var svg = d3.select("#chart").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
var line = d3.svg.line() | |
.interpolate("linear") | |
.x(function(d) { | |
return x(+d.date); | |
}) | |
.y(function(d) { | |
return y(+d.thing); | |
}); | |
d3.tsv('data.tsv', function(error, dataset) { | |
var names = d3.keys(dataset[0]).filter(function(key) { | |
return key !== "Date"; | |
}); | |
var states = names.map(function(name) { | |
return { | |
name: name, | |
values: dataset.map(function(d) { | |
return { | |
date: d.Date, | |
thing: +d[name] | |
}; | |
}) | |
}; | |
}); | |
stateData = states; | |
d3.select("#dropDown") | |
.append("select") | |
.on("change", function() { | |
change(this.options[this.selectedIndex].__data__); | |
}) | |
.selectAll("option") | |
.data(names.filter(function(d) { | |
return d !== "United States"; | |
})).enter() | |
.append("option") | |
.text(function(d) { | |
return d; | |
}); | |
x.domain(d3.extent(dataset, function(d, i) { | |
return +d.Date; | |
})); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis); | |
var stateLines = svg.selectAll(".states") | |
.data(states).enter() | |
.append("path") | |
.attr("class", "line") | |
.attr("d", function(d) { | |
return line(d.values); | |
}) | |
.attr("stroke", function(d, i) { | |
return (d.name === "United States") ? "orange" : "grey"; | |
}); | |
var usFilter = stateFilter("United States"); | |
var maxUS = dataMax(usFilter); | |
change("Alabama"); | |
function change(x) { | |
var data = stateFilter(x); | |
var maxNew = Math.max(dataMax(data), maxUS); | |
var greenLine = svg.selectAll(".choosen") | |
.data(data); | |
y.domain([0, maxNew]); | |
greenLine.transition() | |
.duration(2000) | |
.attr("d", function(d) { | |
return line(d.values); | |
}); | |
greenLine.enter().append("path") | |
.attr("class", "choosen") | |
.attr("d", function(d) { | |
return line(d.values); | |
}); | |
stateLines.transition().duration(2000) | |
.attr("d", function(d) { | |
return line(d.values); | |
}); | |
greenLine.exit() | |
.transition() | |
.duration(2000) | |
.remove(); | |
svg.selectAll(".y") | |
.transition().duration(2000) | |
.call(yAxis.scale(y)); | |
} | |
function dataMax(x) { | |
var maxer; | |
d3.max(x, function(d) { | |
var temp = []; | |
d.values.forEach(function(e, j) { | |
temp[j] = e.thing; | |
}) | |
maxer = Math.max.apply(null, temp); | |
}); | |
return maxer; | |
} | |
function stateFilter(x) { | |
var ans = states.filter(function(d) { | |
return d.name === x; | |
}); | |
return ans | |
} | |
}) | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment