Skip to content

Instantly share code, notes, and snippets.

@pamtobey
Created March 30, 2015 22:17
Show Gist options
  • Save pamtobey/a73dd310423e5a17a9b1 to your computer and use it in GitHub Desktop.
Save pamtobey/a73dd310423e5a17a9b1 to your computer and use it in GitHub Desktop.
SVG with csv data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 with SVG Elements</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
svg {
background-color: white;
}
</style>
</head>
<body>
<p>My SVG image and then CSV of temperature anomolies. </p>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="284.512px" height="197.654px" viewBox="0 0 284.512 197.654" enable-background="new 0 0 284.512 197.654"
xml:space="preserve">
<pattern x="-163.703" y="497.298" width="69" height="69" patternUnits="userSpaceOnUse" id="Polka_Dot_Pattern" viewBox="2.125 -70.896 69 69" overflow="visible">
<g>
<polygon fill="none" points="71.125,-1.896 2.125,-1.896 2.125,-70.896 71.125,-70.896 "/>
<polygon fill="#F7BC60" points="71.125,-1.896 2.125,-1.896 2.125,-70.896 71.125,-70.896 "/>
</g>
</pattern>
<rect x="0.297" y="0.297" fill="#8CC63F" stroke="#231F20" stroke-width="0.5945" width="38.534" height="170.652"/>
<rect x="61.664" y="42.428" fill="#FBB040" stroke="#231F20" stroke-width="0.5159" width="38.534" height="128.521"/>
<rect x="184.397" y="130.472" fill="#EF4136" stroke="#231F20" stroke-width="0.2895" width="38.533" height="40.478"/>
<rect x="123.03" y="27.21" fill="#A97C50" stroke="#231F20" stroke-width="0.5456" width="38.535" height="143.739"/>
<rect x="245.763" y="81.558" fill="#29AAE2" stroke="#231F20" stroke-width="0.4303" width="38.534" height="89.391"/>
<text transform="matrix(1 0 0 1 16.6885 192.5156)" fill="#231F20" font-family="'Times-Roman'" font-size="12">1</text>
<text transform="matrix(1 0 0 1 78.6445 192.5156)" fill="#231F20" font-family="'Times-Roman'" font-size="12">2</text>
<text transform="matrix(1 0 0 1 139.5146 192.5156)" fill="#231F20" font-family="'Times-Roman'" font-size="12">3</text>
<text transform="matrix(1 0 0 1 201.4712 192.5156)" fill="#231F20" font-family="'Times-Roman'" font-size="12">4</text>
<text transform="matrix(1 0 0 1 266.688 192.5156)" fill="#231F20" font-family="'Times-Roman'" font-size="12">5</text>
</svg>
<script type="text/javascript">
//Load in contents of CSV file
d3.csv("TempAnomolies.csv", function(data) {
//Now CSV contents have been transformed into
//an array of JSON objects.
//Log 'data' to the console, for verification.
console.log(data);
}); </script>
</body>
</html>
Year Value/L+O Value/Land Value/Ocean Mean/L+O Mean/Land Mean/Ocean
1880 -0.15 -0.45 -0.08 13.9 8.5 16.1
1881 -0.1 -0.41 -0.02 13.9 8.5 16.1
1882 -0.12 -0.39 -0.05 13.9 8.5 16.1
1883 -0.17 -0.58 -0.06 13.9 8.5 16.1
1884 -0.23 -0.6 -0.13 13.9 8.5 16.1
1885 -0.2 -0.5 -0.12 13.9 8.5 16.1
1886 -0.19 -0.46 -0.1 13.9 8.5 16.1
1887 -0.26 -0.42 -0.22 13.9 8.5 16.1
1888 -0.18 -0.43 -0.1 13.9 8.5 16.1
1889 -0.1 -0.25 -0.05 13.9 8.5 16.1
1890 -0.31 -0.46 -0.26 13.9 8.5 16.1
1891 -0.27 -0.5 -0.18 13.9 8.5 16.1
1892 -0.3 -0.46 -0.25 13.9 8.5 16.1
1893 -0.34 -0.51 -0.28 13.9 8.5 16.1
1894 -0.3 -0.34 -0.29 13.9 8.5 16.1
1895 -0.25 -0.39 -0.2 13.9 8.5 16.1
1896 -0.1 -0.23 -0.06 13.9 8.5 16.1
1897 -0.14 -0.28 -0.1 13.9 8.5 16.1
1898 -0.28 -0.39 -0.24 13.9 8.5 16.1
1899 -0.15 -0.19 -0.15 13.9 8.5 16.1
1900 -0.11 -0.12 -0.11 13.9 8.5 16.1
1901 -0.17 -0.06 -0.21 13.9 8.5 16.1
1902 -0.26 -0.3 -0.24 13.9 8.5 16.1
1903 -0.35 -0.36 -0.35 13.9 8.5 16.1
1904 -0.41 -0.44 -0.4 13.9 8.5 16.1
1905 -0.29 -0.41 -0.25 13.9 8.5 16.1
1906 -0.24 -0.2 -0.26 13.9 8.5 16.1
1907 -0.39 -0.59 -0.31 13.9 8.5 16.1
1908 -0.43 -0.47 -0.42 13.9 8.5 16.1
1909 -0.44 -0.39 -0.45 13.9 8.5 16.1
1910 -0.42 -0.35 -0.45 13.9 8.5 16.1
1911 -0.44 -0.46 -0.44 13.9 8.5 16.1
1912 -0.39 -0.54 -0.33 13.9 8.5 16.1
1913 -0.35 -0.34 -0.36 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
1923 -0.24 -0.21 -0.25 13.9 8.5 16.1
1924 -0.23 -0.26 -0.22 13.9 8.5 16.1
1925 -0.16 -0.11 -0.18 13.9 8.5 16.1
1926 -0.07 -0.01 -0.09 13.9 8.5 16.1
1927 -0.13 -0.16 -0.12 13.9 8.5 16.1
1928 -0.13 -0.1 -0.15 13.9 8.5 16.1
1929 -0.25 -0.41 -0.19 13.9 8.5 16.1
1930 -0.06 -0.08 -0.06 13.9 8.5 16.1
1931 -0.04 -0.03 -0.04 13.9 8.5 16.1
1932 -0.06 0 -0.09 13.9 8.5 16.1
1933 -0.2 -0.33 -0.15 13.9 8.5 16.1
1934 -0.06 -0.03 -0.07 13.9 8.5 16.1
1935 -0.09 -0.13 -0.07 13.9 8.5 16.1
1936 -0.06 -0.11 -0.04 13.9 8.5 16.1
1937 0.05 -0.01 0.08 13.9 8.5 16.1
1938 0.08 0.2 0.03 13.9 8.5 16.1
1939 0.07 0.12 0.04 13.9 8.5 16.1
1940 0.11 0.06 0.13 13.9 8.5 16.1
1941 0.16 0.11 0.19 13.9 8.5 16.1
1942 0.12 0.07 0.14 13.9 8.5 16.1
1943 0.11 0.09 0.13 13.9 8.5 16.1
1944 0.22 0.21 0.23 13.9 8.5 16.1
1945 0.09 -0.08 0.19 13.9 8.5 16.1
1946 -0.04 -0.01 -0.05 13.9 8.5 16.1
1947 -0.04 0.07 -0.09 13.9 8.5 16.1
1948 -0.06 0.05 -0.1 13.9 8.5 16.1
1949 -0.07 -0.05 -0.07 13.9 8.5 16.1
1950 -0.16 -0.33 -0.09 13.9 8.5 16.1
1951 0 -0.07 0.02 13.9 8.5 16.1
1952 0.04 -0.07 0.09 13.9 8.5 16.1
1953 0.12 0.18 0.09 13.9 8.5 16.1
1954 -0.1 -0.15 -0.07 13.9 8.5 16.1
1955 -0.11 -0.13 -0.11 13.9 8.5 16.1
1956 -0.17 -0.42 -0.08 13.9 8.5 16.1
1957 0.07 -0.06 0.12 13.9 8.5 16.1
1958 0.12 0.12 0.12 13.9 8.5 16.1
1959 0.07 0.05 0.08 13.9 8.5 16.1
1960 0.02 -0.05 0.05 13.9 8.5 16.1
1961 0.1 0.1 0.1 13.9 8.5 16.1
1962 0.13 0.17 0.11 13.9 8.5 16.1
1963 0.15 0.21 0.12 13.9 8.5 16.1
1964 -0.12 -0.24 -0.07 13.9 8.5 16.1
1965 -0.05 -0.13 -0.03 13.9 8.5 16.1
1966 0.01 -0.07 0.03 13.9 8.5 16.1
1967 0.02 0 0.03 13.9 8.5 16.1
1968 0.01 -0.11 0.05 13.9 8.5 16.1
1969 0.11 -0.1 0.19 13.9 8.5 16.1
1970 0.07 0.02 0.08 13.9 8.5 16.1
1971 -0.03 -0.04 -0.03 13.9 8.5 16.1
1972 0.06 -0.17 0.14 13.9 8.5 16.1
1973 0.19 0.29 0.15 13.9 8.5 16.1
1974 -0.05 -0.22 0.01 13.9 8.5 16.1
1975 0.02 0.11 -0.02 13.9 8.5 16.1
1976 -0.07 -0.26 0 13.9 8.5 16.1
1977 0.18 0.2 0.17 13.9 8.5 16.1
1978 0.1 0.07 0.11 13.9 8.5 16.1
1979 0.19 0.14 0.2 13.9 8.5 16.1
1980 0.23 0.27 0.22 13.9 8.5 16.1
1981 0.27 0.49 0.19 13.9 8.5 16.1
1982 0.15 0.09 0.17 13.9 8.5 16.1
1983 0.32 0.48 0.26 13.9 8.5 16.1
1984 0.13 0.05 0.16 13.9 8.5 16.1
1985 0.11 0.07 0.12 13.9 8.5 16.1
1986 0.2 0.28 0.17 13.9 8.5 16.1
1987 0.33 0.4 0.3 13.9 8.5 16.1
1988 0.34 0.55 0.27 13.9 8.5 16.1
1989 0.27 0.38 0.23 13.9 8.5 16.1
1990 0.4 0.59 0.33 13.9 8.5 16.1
1991 0.38 0.53 0.32 13.9 8.5 16.1
1992 0.24 0.26 0.23 13.9 8.5 16.1
1993 0.27 0.34 0.24 13.9 8.5 16.1
1994 0.33 0.46 0.28 13.9 8.5 16.1
1995 0.45 0.77 0.33 13.9 8.5 16.1
1996 0.32 0.34 0.31 13.9 8.5 16.1
1997 0.52 0.67 0.46 13.9 8.5 16.1
1998 0.64 0.95 0.52 13.9 8.5 16.1
1999 0.46 0.79 0.33 13.9 8.5 16.1
2000 0.43 0.63 0.35 13.9 8.5 16.1
2001 0.55 0.81 0.45 13.9 8.5 16.1
2002 0.61 0.93 0.49 13.9 8.5 16.1
2003 0.62 0.88 0.52 13.9 8.5 16.1
2004 0.58 0.81 0.49 13.9 8.5 16.1
2005 0.65 1.04 0.5 13.9 8.5 16.1
2006 0.6 0.91 0.48 13.9 8.5 16.1
2007 0.59 1.09 0.41 13.9 8.5 16.1
2008 0.51 0.85 0.39 13.9 8.5 16.1
2009 0.6 0.86 0.5 13.9 8.5 16.1
2010 0.66 1.06 0.5 13.9 8.5 16.1
2011 0.53 0.87 0.4 13.9 8.5 16.1
2012 0.57 0.89 0.45 13.9 8.5 16.1
2013 0.62 0.98 0.48 13.9 8.5 16.1
2014 0.69 1 0.57 13.9 8.5 16.1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment