Skip to content

Instantly share code, notes, and snippets.

@datafunk

datafunk/Global-ocean-land-temperatures.csv

Last active May 30, 2017 04:45
Show Gist options
  • Save datafunk/dc24bfd549a26f7ddf83 to your computer and use it in GitHub Desktop.
Save datafunk/dc24bfd549a26f7ddf83 to your computer and use it in GitHub Desktop.
Download ZIP
#KnightD3 - a linechart
Raw
README.md

Making use of the largest slice of my selected dataset throughout this course, this linechart displays monthly mean temperature deviation from the base period from 1880 to 2015

Raw
Global-ocean-land-temperatures.csv
year Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
1880 -0.3 -0.21 -0.19 -0.28 -0.15 -0.29 -0.24 -0.08 -0.17 -0.17 -0.19 -0.21
1881 -0.09 -0.14 0.01 -0.03 -0.05 -0.29 -0.06 -0.02 -0.09 -0.2 -0.26 -0.15
1882 0.09 0.08 0.01 -0.2 -0.18 -0.25 -0.1 0.03 -0.01 -0.23 -0.21 -0.25
1883 -0.33 -0.42 -0.18 -0.24 -0.26 -0.12 -0.09 -0.13 -0.19 -0.12 -0.21 -0.18
1884 -0.18 -0.12 -0.35 -0.36 -0.33 -0.39 -0.34 -0.26 -0.24 -0.23 -0.31 -0.3
1885 -0.65 -0.3 -0.24 -0.45 -0.42 -0.51 -0.29 -0.28 -0.2 -0.2 -0.23 -0.06
1886 -0.42 -0.46 -0.42 -0.3 -0.28 -0.4 -0.17 -0.33 -0.2 -0.26 -0.27 -0.26
1887 -0.66 -0.48 -0.32 -0.38 -0.34 -0.21 -0.19 -0.28 -0.21 -0.33 -0.27 -0.38
1888 -0.43 -0.42 -0.48 -0.28 -0.22 -0.21 -0.09 -0.11 -0.08 0.01 -0.01 -0.12
1889 -0.2 0.14 0.03 0.04 -0.04 -0.12 -0.06 -0.19 -0.2 -0.23 -0.31 -0.3
1890 -0.47 -0.49 -0.42 -0.39 -0.49 -0.28 -0.3 -0.37 -0.37 -0.24 -0.38 -0.3
1891 -0.46 -0.49 -0.15 -0.26 -0.18 -0.22 -0.22 -0.21 -0.14 -0.24 -0.37 -0.01
1892 -0.25 -0.14 -0.36 -0.35 -0.25 -0.2 -0.27 -0.19 -0.25 -0.17 -0.5 -0.28
1893 -0.68 -0.5 -0.24 -0.32 -0.35 -0.23 -0.13 -0.23 -0.18 -0.16 -0.17 -0.37
1894 -0.55 -0.32 -0.21 -0.41 -0.3 -0.44 -0.32 -0.27 -0.23 -0.17 -0.25 -0.22
1895 -0.44 -0.43 -0.3 -0.23 -0.23 -0.25 -0.17 -0.16 -0.02 -0.11 -0.16 -0.12
1896 -0.23 -0.15 -0.3 -0.33 -0.2 -0.14 -0.06 -0.08 -0.04 0.05 -0.16 -0.12
1897 -0.23 -0.19 -0.13 -0.02 -0.01 -0.14 -0.05 -0.04 -0.05 -0.1 -0.18 -0.26
1898 -0.07 -0.33 -0.57 -0.35 -0.37 -0.22 -0.24 -0.24 -0.2 -0.33 -0.36 -0.21
1899 -0.17 -0.4 -0.34 -0.21 -0.21 -0.26 -0.14 -0.05 -0.03 -0.01 0.12 -0.26
1900 -0.39 -0.07 0.02 -0.14 -0.05 -0.14 -0.06 -0.03 0.01 0.09 -0.13 -0.13
1901 -0.27 -0.04 0.06 -0.05 -0.17 -0.1 -0.08 -0.12 -0.17 -0.28 -0.16 -0.28
1902 -0.17 -0.03 -0.29 -0.28 -0.3 -0.32 -0.25 -0.28 -0.21 -0.26 -0.36 -0.46
1903 -0.28 -0.06 -0.23 -0.4 -0.42 -0.44 -0.3 -0.44 -0.43 -0.42 -0.39 -0.47
1904 -0.64 -0.54 -0.46 -0.5 -0.5 -0.5 -0.48 -0.43 -0.47 -0.35 -0.17 -0.29
1905 -0.38 -0.58 -0.25 -0.37 -0.34 -0.31 -0.23 -0.2 -0.15 -0.24 -0.09 -0.2
1906 -0.3 -0.32 -0.16 -0.03 -0.21 -0.21 -0.25 -0.18 -0.26 -0.21 -0.39 -0.18
1907 -0.44 -0.5 -0.24 -0.4 -0.46 -0.43 -0.36 -0.37 -0.33 -0.24 -0.51 -0.5
1908 -0.45 -0.35 -0.57 -0.46 -0.4 -0.39 -0.34 -0.44 -0.34 -0.44 -0.51 -0.5
1909 -0.7 -0.47 -0.52 -0.59 -0.54 -0.53 -0.43 -0.31 -0.38 -0.4 -0.33 -0.54
1910 -0.43 -0.42 -0.48 -0.38 -0.34 -0.38 -0.32 -0.34 -0.38 -0.39 -0.56 -0.69
1911 -0.63 -0.6 -0.63 -0.55 -0.52 -0.47 -0.42 -0.44 -0.39 -0.26 -0.2 -0.24
1912 -0.27 -0.15 -0.38 -0.21 -0.2 -0.26 -0.41 -0.52 -0.49 -0.56 -0.37 -0.41
1913 -0.41 -0.44 -0.43 -0.36 -0.46 -0.46 -0.34 -0.33 -0.34 -0.35 -0.17 -0.03
1914 0.01 -0.14 -0.23 -0.27 -0.2 -0.23 -0.24 -0.14 -0.13 -0.06 -0.22 -0.09
1915 -0.18 -0.01 -0.12 0.08 -0.02 -0.15 -0.03 -0.15 -0.13 -0.23 -0.14 -0.26
1916 -0.19 -0.21 -0.32 -0.25 -0.27 -0.43 -0.33 -0.26 -0.29 -0.28 -0.42 -0.78
1917 -0.47 -0.55 -0.48 -0.39 -0.49 -0.4 -0.22 -0.26 -0.18 -0.35 -0.27 -0.71
1918 -0.43 -0.3 -0.19 -0.39 -0.37 -0.28 -0.2 -0.25 -0.14 -0.04 -0.16 -0.28
1919 -0.18 -0.21 -0.25 -0.18 -0.19 -0.27 -0.2 -0.18 -0.17 -0.15 -0.3 -0.34
1920 -0.14 -0.23 -0.06 -0.25 -0.25 -0.32 -0.31 -0.28 -0.19 -0.28 -0.33 -0.46
1921 -0.03 -0.21 -0.27 -0.36 -0.35 -0.3 -0.15 -0.23 -0.17 -0.07 -0.16 -0.18
1922 -0.32 -0.41 -0.13 -0.21 -0.34 -0.32 -0.26 -0.3 -0.28 -0.32 -0.16 -0.17
1923 -0.26 -0.36 -0.31 -0.37 -0.33 -0.23 -0.28 -0.29 -0.27 -0.12 0.04 -0.04
1924 -0.22 -0.26 -0.12 -0.34 -0.19 -0.27 -0.25 -0.34 -0.31 -0.36 -0.23 -0.42
1925 -0.33 -0.33 -0.22 -0.24 -0.3 -0.33 -0.29 -0.18 -0.14 -0.17 0.03 0.1
1926 0.21 0.08 0.12 -0.13 -0.24 -0.24 -0.19 -0.1 -0.11 -0.11 -0.06 -0.3
1927 -0.27 -0.19 -0.38 -0.31 -0.25 -0.27 -0.14 -0.18 -0.05 0 -0.03 -0.35
1928 -0.01 -0.1 -0.28 -0.29 -0.29 -0.4 -0.2 -0.25 -0.19 -0.19 -0.1 -0.2
1929 -0.47 -0.58 -0.35 -0.42 -0.39 -0.43 -0.33 -0.29 -0.24 -0.15 -0.15 -0.53
1930 -0.28 -0.23 -0.09 -0.25 -0.25 -0.18 -0.15 -0.1 -0.11 -0.08 0.14 -0.07
1931 -0.1 -0.2 -0.06 -0.2 -0.22 -0.05 0.02 0 -0.07 0 -0.1 -0.09
1932 0.14 -0.17 -0.19 -0.08 -0.22 -0.3 -0.23 -0.23 -0.13 -0.09 -0.26 -0.22
1933 -0.31 -0.3 -0.28 -0.23 -0.25 -0.32 -0.19 -0.23 -0.26 -0.24 -0.32 -0.46
1934 -0.26 -0.04 -0.29 -0.27 -0.11 -0.14 -0.11 -0.1 -0.16 -0.11 -0.01 -0.08
1935 -0.37 0.12 -0.14 -0.35 -0.26 -0.23 -0.19 -0.17 -0.17 -0.07 -0.28 -0.2
1936 -0.28 -0.39 -0.25 -0.2 -0.16 -0.19 -0.05 -0.11 -0.05 -0.03 -0.04 -0.02
1937 -0.08 0.06 -0.16 -0.16 -0.06 -0.07 -0.04 0.04 0.14 0.09 0.1 -0.1
1938 0.02 -0.03 0.06 0.05 -0.08 -0.17 -0.08 -0.04 0.03 0.12 0.02 -0.23
1939 -0.12 -0.11 -0.2 -0.12 -0.07 -0.08 -0.05 -0.05 0 -0.03 0.06 0.41
1940 -0.13 0.06 0.12 0.16 0.06 0.05 0.11 0.01 0.12 0.07 0.13 0.2
1941 0.12 0.23 0.06 0.11 0.1 0.04 0.16 0.15 0.03 0.25 0.13 0.15
1942 0.29 0.06 0.11 0.14 0.14 0.11 0.02 -0.02 0 0.07 0.13 0.13
1943 0 0.23 0.02 0.14 0.11 0 0.15 0.04 0.11 0.3 0.26 0.28
1944 0.42 0.31 0.35 0.27 0.26 0.2 0.22 0.23 0.3 0.27 0.13 0.08
1945 0.15 0.05 0.11 0.24 0.11 0.03 0.07 0.26 0.21 0.22 0.1 -0.09
1946 0.16 0.06 0 0.11 -0.03 -0.15 -0.08 -0.1 -0.02 -0.07 -0.02 -0.27
1947 -0.08 -0.04 0.06 0.05 -0.06 -0.03 -0.04 -0.08 -0.14 0.06 -0.01 -0.16
1948 0.06 -0.12 -0.24 -0.1 0.06 -0.05 -0.13 -0.1 -0.14 -0.07 -0.09 -0.21
1949 0.1 -0.16 -0.01 -0.08 -0.11 -0.26 -0.13 -0.09 -0.09 -0.03 -0.09 -0.16
1950 -0.28 -0.27 -0.08 -0.21 -0.12 -0.08 -0.09 -0.18 -0.11 -0.19 -0.34 -0.19
1951 -0.34 -0.43 -0.19 -0.11 -0.01 -0.08 -0.02 0.06 0.04 0.09 0.01 0.16
1952 0.16 0.13 -0.09 0.02 -0.06 -0.04 0.05 0.07 0.08 -0.03 -0.16 -0.02
1953 0.09 0.17 0.11 0.2 0.09 0.07 0.03 0.09 0.06 0.05 -0.05 0.04
1954 -0.27 -0.1 -0.12 -0.18 -0.2 -0.15 -0.16 -0.12 -0.07 0 0.08 -0.17
1955 0.12 -0.21 -0.35 -0.22 -0.2 -0.07 -0.07 0.07 -0.14 -0.05 -0.28 -0.32
1956 -0.16 -0.24 -0.22 -0.27 -0.27 -0.15 -0.11 -0.26 -0.19 -0.24 -0.15 -0.09
1957 -0.13 -0.06 -0.06 -0.02 0.07 0.14 0 0.14 0.08 0 0.06 0.16
1958 0.37 0.23 0.09 0.02 0.07 -0.06 0.03 -0.07 -0.05 0.03 0.02 0
1959 0.06 0.09 0.2 0.17 0.05 0.03 0.05 -0.01 -0.05 -0.09 -0.09 -0.02
1960 -0.02 0.13 -0.36 -0.17 -0.09 0 -0.03 0 0.04 0.07 -0.12 0.18
1961 0.07 0.19 0.1 0.15 0.14 0.11 -0.04 -0.01 0.05 -0.01 0.02 -0.15
1962 0.07 0.15 0.11 0.05 -0.06 0.05 -0.03 -0.03 -0.02 -0.04 0.06 -0.01
1963 -0.03 0.18 -0.15 -0.05 -0.1 0.02 0.09 0.23 0.19 0.14 0.16 -0.01
1964 -0.06 -0.11 -0.24 -0.3 -0.26 -0.09 -0.07 -0.22 -0.28 -0.3 -0.21 -0.3
1965 -0.09 -0.17 -0.12 -0.2 -0.14 -0.1 -0.1 -0.01 -0.13 -0.04 -0.06 -0.06
1966 -0.16 -0.01 0.04 -0.14 -0.09 0.03 0.08 -0.11 -0.02 -0.15 -0.02 -0.06
1967 -0.07 -0.19 0.04 -0.06 0.12 -0.08 -0.01 0.02 -0.04 0.07 -0.06 -0.02
1968 -0.22 -0.15 0.21 -0.05 -0.1 -0.05 -0.1 -0.11 -0.19 0.11 -0.05 -0.14
1969 -0.11 -0.14 0.01 0.18 0.19 0.04 -0.02 0.03 0.1 0.09 0.11 0.28
1970 0.1 0.23 0.08 0.09 -0.05 -0.02 -0.05 -0.1 0.11 0.04 0.01 -0.14
1971 -0.03 -0.21 -0.19 -0.11 -0.07 -0.18 -0.13 -0.03 0.01 -0.06 -0.05 -0.08
1972 -0.26 -0.17 0.03 -0.01 -0.01 0.05 0.02 0.18 0.04 0.08 0.02 0.18
1973 0.27 0.31 0.25 0.26 0.26 0.16 0.09 0.02 0.06 0.12 0.05 -0.06
1974 -0.14 -0.28 -0.05 -0.1 0 -0.04 -0.03 0.11 -0.13 -0.07 -0.07 -0.1
1975 0.08 0.07 0.14 0.06 0.17 0 -0.02 -0.2 -0.02 -0.09 -0.15 -0.17
1976 -0.01 -0.06 -0.21 -0.09 -0.23 -0.15 -0.1 -0.17 -0.09 -0.26 -0.06 0.08
1977 0.17 0.21 0.25 0.27 0.3 0.26 0.24 0.2 0.03 0.05 0.2 0.05
1978 0.08 0.13 0.22 0.14 0.07 -0.02 0.07 -0.19 0.06 0.01 0.18 0.11
1979 0.15 -0.07 0.18 0.12 0.06 0.14 0.02 0.14 0.26 0.26 0.3 0.48
1980 0.3 0.42 0.3 0.33 0.35 0.18 0.29 0.27 0.23 0.19 0.29 0.2
1981 0.55 0.41 0.5 0.32 0.23 0.32 0.35 0.34 0.18 0.15 0.23 0.4
1982 0.09 0.16 -0.02 0.09 0.15 0.04 0.13 0.09 0.16 0.14 0.14 0.43
1983 0.53 0.4 0.42 0.3 0.36 0.19 0.15 0.32 0.39 0.16 0.31 0.17
1984 0.31 0.18 0.29 0.1 0.34 0.06 0.15 0.15 0.19 0.15 0.04 -0.06
1985 0.22 -0.05 0.17 0.1 0.18 0.17 0.01 0.15 0.15 0.13 0.1 0.16
1986 0.3 0.38 0.29 0.26 0.26 0.14 0.13 0.12 0.02 0.14 0.11 0.15
1987 0.36 0.46 0.17 0.26 0.26 0.36 0.47 0.28 0.4 0.33 0.26 0.48
1988 0.57 0.42 0.49 0.44 0.44 0.42 0.35 0.44 0.4 0.37 0.12 0.34
1989 0.16 0.35 0.37 0.33 0.17 0.15 0.33 0.35 0.37 0.33 0.2 0.37
1990 0.4 0.41 0.76 0.54 0.46 0.38 0.43 0.3 0.29 0.42 0.45 0.41
1991 0.42 0.5 0.35 0.51 0.39 0.54 0.51 0.42 0.48 0.31 0.31 0.33
1992 0.45 0.43 0.47 0.23 0.32 0.24 0.13 0.1 0 0.1 0.05 0.22
1993 0.37 0.39 0.36 0.27 0.27 0.23 0.27 0.14 0.11 0.23 0.08 0.19
1994 0.31 0.04 0.26 0.4 0.29 0.41 0.31 0.22 0.34 0.43 0.46 0.37
1995 0.51 0.78 0.45 0.47 0.29 0.45 0.49 0.49 0.34 0.49 0.44 0.3
1996 0.27 0.49 0.34 0.36 0.29 0.26 0.36 0.5 0.26 0.21 0.41 0.4
1997 0.33 0.37 0.51 0.37 0.38 0.54 0.36 0.42 0.55 0.65 0.65 0.6
1998 0.61 0.89 0.62 0.64 0.71 0.77 0.71 0.69 0.46 0.46 0.49 0.58
1999 0.48 0.67 0.33 0.34 0.32 0.37 0.41 0.35 0.43 0.42 0.41 0.48
2000 0.26 0.59 0.59 0.59 0.4 0.43 0.42 0.43 0.43 0.29 0.33 0.3
2001 0.45 0.47 0.58 0.52 0.59 0.54 0.6 0.5 0.55 0.51 0.7 0.55
2002 0.74 0.76 0.9 0.58 0.65 0.55 0.61 0.55 0.64 0.56 0.59 0.42
2003 0.72 0.55 0.57 0.54 0.63 0.48 0.55 0.66 0.66 0.75 0.55 0.73
2004 0.58 0.7 0.65 0.62 0.41 0.42 0.27 0.45 0.53 0.66 0.72 0.52
2005 0.72 0.59 0.69 0.69 0.64 0.66 0.66 0.63 0.76 0.8 0.75 0.67
2006 0.56 0.71 0.63 0.49 0.47 0.64 0.55 0.71 0.64 0.7 0.73 0.78
2007 0.96 0.69 0.7 0.75 0.68 0.58 0.62 0.61 0.64 0.61 0.57 0.49
2008 0.26 0.35 0.74 0.53 0.51 0.47 0.6 0.45 0.64 0.67 0.66 0.55
2009 0.61 0.54 0.53 0.61 0.64 0.67 0.72 0.68 0.69 0.65 0.78 0.65
2010 0.73 0.79 0.92 0.87 0.75 0.65 0.62 0.65 0.62 0.71 0.79 0.49
2011 0.5 0.51 0.64 0.65 0.53 0.59 0.74 0.73 0.57 0.66 0.56 0.53
2012 0.45 0.49 0.57 0.68 0.76 0.62 0.56 0.63 0.74 0.78 0.74 0.52
2013 0.66 0.56 0.64 0.53 0.61 0.65 0.59 0.65 0.77 0.69 0.8 0.66
2014 0.73 0.5 0.77 0.78 0.85 0.65 0.58 0.81 0.89 0.85 0.68 0.78
2015 0.81 0.87 0.9 0.73 0.77 0.79 0.75
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>#KnightD3 wk6 linechart</title>
<!-- <script type="text/javascript" src="d3.v3.js"></script> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style type="text/css">
html, body, * {
font-family: Arial, sans-serif;
text-align: center;
font-size: 14px 65%;
}
div#title {
width: 700px;
margin: 10px auto 0;
padding: 5px 20px;
background-color: grey;
border: 1px solid grey;
color: white;
box-shadow: 3px 0px 3px lightgrey;
}
h1 {
font-family: Georgia, serif;
font-size: 1.2em;
letter-spacing: 1px;
margin: 0 auto;
}
h2 {
font-size: .9em;
font-weight:100;
margin: .3em auto;
}
p {
font-size: .7em;
margin: 5px auto;
}
div#chart {
width:740px;
height: 400px;
margin: 0 auto 1em;
border: 1px solid grey;
box-shadow: 3px 3px 3px lightgrey;
}
svg {
background-color: white;
}
path.line {
/*stroke: black;*/
stroke-width:.5px;
fill:none;
}
path.x.axis {
stroke: black;
stroke-width:.4px;
}
.x.axis path,
.x.axis line {
fill: none;
stroke: none;
shape-rendering: crispEdges;
}
.y.axis path,
.y.axis line {
fill: none;
stroke: none;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<div id="title">
<h1>
Monthly mean Land &amp; Ocean Temperature
</h1>
<p>deviation from the base period of 1951-1980</p>
</div>
<div id="chart"></div>
<script type="text/javascript" src="linechart.js"></script>
</body>
</html>
Raw
linechart.js
var margin = {
top: 20,
right: 0,
bottom: 20,
left: 30
};
var width = 680 - margin.left - margin.right;
var height = 360 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width]);
var y = d3.scale.linear()
.rangeRound([height - 20, 0]);
var xLabel = d3.time.scale()
.domain([new Date(1960, 0, 1), new Date(2014, 11, 31)])
.range([0, width]);
var xAxis = d3.svg.axis()
.scale(xLabel)
.ticks(3)
.tickFormat(d3.time.format("%Y"));
var yAxis = d3.svg.axis()
.scale(y)
.ticks(4)
.orient("left");
var line = d3.svg.line()
.defined(function(d) {
if (!isNaN(d.value)) {
return d.value;
}
})
.interpolate("cardinal")
.x(function(d) {
return x(d.label) + x.rangeBand() / 2;
})
.y(function(d) {
return y(d.value);
});
var colors = ["#fff7ec", "#fee8c8", "#fdd49e", "#fdbb84", "#fc8d59", "#ef6548", "#d7301f", "#b30000", "#7f0000", "#cc4c02", "#993404", "#662506"];
var color = d3.scale.ordinal().range(colors);
var dateFormat = d3.time.format("%Y");
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 + ")");
d3.csv("Global-ocean-land-temperatures.csv", function(error, data) {
// console.log(data);
var years = Object.keys(data[0]);
years.sort();
var labelVar = 'year';
var varNames = d3.keys(data[0]).filter(function(key) {
return key !== labelVar;
});
color.domain(varNames);
var seriesData = varNames.map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {
name: name,
label: d[labelVar],
value: +d[name]
};
})
};
});
// console.log(seriesData);
data.forEach(function(d) {
d.year = +d.year;
});
x.domain(data.map(function(d) {
return d.year;
}));
y.domain([d3.min(seriesData, function(c) {
return d3.min(c.values, function(d) {
return d.value;
});
}),
d3.max(seriesData, function(c) {
return d3.max(c.values, function(d) {
return d.value;
});
})
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("x", 0)
.attr("y", 0)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("°C");
var series = svg.selectAll(".series")
.data(seriesData)
.enter().append("g")
.attr("class", "series")
.attr("transform", "translate(-20,0)");
series.append("path")
.attr("class", "line")
.attr("id", function(d) {
return d.name
})
.attr("stroke", function(d, i){
return colors[i];
})
.attr("opacity", 0)
.transition()
.delay(function(d, i) {
return i * 550;
})
.duration(500)
.attr("d", function(d, i) {
return line(d.values);
})
.attr("opacity", 1);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment