Skip to content

Instantly share code, notes, and snippets.

@natemiller
Last active September 27, 2015 23:10
Show Gist options
  • Save natemiller/3f12c722912047bbe80a to your computer and use it in GitHub Desktop.
Save natemiller/3f12c722912047bbe80a to your computer and use it in GitHub Desktop.
California Annual Maximum and Minimum Temperatures 1895-2014
Year Anomaly in Annual Minimum Temperature Anomaly in Annual Maximum Temperature
1895 -0.527777778 -0.677777778
1896 0.011111111 -0.444444444
1897 -0.416666667 -0.738888889
1898 -0.661111111 -0.383333333
1899 -0.494444444 -0.616666667
1900 0.011111111 -0.277777778
1901 -0.283333333 -0.377777778
1902 -0.672222222 -0.855555556
1903 -0.877777778 -0.366666667
1904 -0.15 0
1905 -0.65 -0.3
1906 -0.355555556 -0.333333333
1907 -0.411111111 -0.938888889
1908 -1.111111111 -0.511111111
1909 -0.727777778 -1.077777778
1910 -0.494444444 0.227777778
1911 -1.516666667 -1.266666667
1912 -1.177777778 -1.177777778
1913 -0.883333333 -0.633333333
1914 -0.266666667 -0.205555556
1915 -0.505555556 -0.405555556
1916 -1.111111111 -0.905555556
1917 -1.211111111 0.211111111
1918 -0.75 -0.311111111
1919 -1.205555556 -0.322222222
1920 -1.122222222 -0.861111111
1921 -0.5 -0.022222222
1922 -1.15 -0.677777778
1923 -1.022222222 -0.405555556
1924 -1.072222222 0.338888889
1925 -0.377777778 -0.227777778
1926 0.255555556 1.005555556
1927 -0.583333333 -0.411111111
1928 -0.522222222 0.461111111
1929 -0.944444444 0.472222222
1930 -0.727777778 0.044444444
1931 0.111111111 0.611111111
1932 -0.905555556 0.077777778
1933 -0.911111111 -0.027777778
1934 0.85 1.438888889
1935 -0.683333333 -0.266666667
1936 0.016666667 0.855555556
1937 -0.555555556 -0.177777778
1938 -0.316666667 -0.311111111
1939 -0.3 0.872222222
1940 0.466666667 0.616666667
1941 -0.061111111 -0.666666667
1942 -0.677777778 0
1943 -0.277777778 0.455555556
1944 -0.977777778 -0.55
1945 -0.338888889 -0.233333333
1946 -0.844444444 -0.233333333
1947 -0.416666667 0.277777778
1948 -1.444444444 -0.838888889
1949 -1.144444444 -0.433333333
1950 -0.016666667 0.483333333
1951 -0.472222222 -0.144444444
1952 -0.522222222 -0.533333333
1953 -0.566666667 -0.094444444
1954 -0.338888889 0.166666667
1955 -1.05 -0.611111111
1956 -0.794444444 -0.044444444
1957 -0.116666667 -0.611111111
1958 0.627777778 0.6
1959 0.127777778 1.155555556
1960 -0.033333333 0.311111111
1961 -0.144444444 0.172222222
1962 -0.361111111 -0.033333333
1963 -0.144444444 -0.65
1964 -0.8 -0.566666667
1965 -0.472222222 -0.788888889
1966 -0.172222222 0.283333333
1967 -0.144444444 -0.211111111
1968 -0.161111111 -0.1
1969 -0.111111111 -0.294444444
1970 -0.094444444 0.05
1971 -0.938888889 -0.861111111
1972 -0.322222222 -0.35
1973 -0.133333333 -0.461111111
1974 -0.166666667 0
1975 -0.866666667 -0.788888889
1976 -0.511111111 0.211111111
1977 -0.022222222 0.2
1978 0.105555556 -0.322222222
1979 -0.088888889 -0.066666667
1980 0.105555556 0.122222222
1981 0.822222222 0.755555556
1982 -0.45 -1.311111111
1983 0.516666667 -0.961111111
1984 0.244444444 0.05
1985 -0.45 -0.233333333
1986 0.572222222 0.433333333
1987 0.211111111 0.161111111
1988 0.25 0.705555556
1989 -0.122222222 0.344444444
1990 -0.177777778 0.222222222
1991 0.066666667 0.144444444
1992 0.883333333 0.538888889
1993 0.066666667 -0.344444444
1994 0.044444444 0.066666667
1995 0.933333333 0.283333333
1996 1.066666667 0.777777778
1997 0.95 0.627777778
1998 0.166666667 -1.222222222
1999 -0.077777778 0.161111111
2000 0.65 0.383333333
2001 0.738888889 0.638888889
2002 0.294444444 0.761111111
2003 1.05 0.688888889
2004 0.727777778 0.472222222
2005 0.783333333 0.044444444
2006 0.561111111 0.138888889
2007 0.377777778 0.538888889
2008 0.305555556 0.477777778
2009 0.294444444 0.388888889
2010 0.416666667 -0.677777778
2011 -0.105555556 -0.511111111
2012 0.661111111 0.8
2013 0.311111111 0.905555556
2014 1.888888889 1.8
Year Temperature_Anomaly
1895 -0.15
1896 -0.455555556
1897 -0.322222222
1898 0.277777778
1899 -0.122222222
1900 -0.288888889
1901 -0.094444444
1902 -0.183333333
1903 0.511111111
1904 0.15
1905 0.35
1906 0.022222222
1907 -0.527777778
1908 0.6
1909 -0.35
1910 0.722222222
1911 0.25
1912 0
1913 0.25
1914 0.061111111
1915 0.1
1916 0.205555556
1917 1.422222222
1918 0.438888889
1919 0.883333333
1920 0.261111111
1921 0.477777778
1922 0.472222222
1923 0.616666667
1924 1.411111111
1925 0.15
1926 0.75
1927 0.172222222
1928 0.983333333
1929 1.416666667
1930 0.772222222
1931 0.5
1932 0.983333333
1933 0.883333333
1934 0.588888889
1935 0.416666667
1936 0.838888889
1937 0.377777778
1938 0.005555556
1939 1.172222222
1940 0.15
1941 -0.605555556
1942 0.677777778
1943 0.733333333
1944 0.427777778
1945 0.105555556
1946 0.611111111
1947 0.694444444
1948 0.605555556
1949 0.711111111
1950 0.5
1951 0.327777778
1952 -0.011111111
1953 0.472222222
1954 0.505555556
1955 0.438888889
1956 0.75
1957 -0.494444444
1958 -0.027777778
1959 1.027777778
1960 0.344444444
1961 0.316666667
1962 0.327777778
1963 -0.505555556
1964 0.233333333
1965 -0.316666667
1966 0.455555556
1967 -0.066666667
1968 0.061111111
1969 -0.183333333
1970 0.144444444
1971 0.077777778
1972 -0.027777778
1973 -0.327777778
1974 0.166666667
1975 0.077777778
1976 0.722222222
1977 0.222222222
1978 -0.427777778
1979 0.022222222
1980 0.016666667
1981 -0.066666667
1982 -0.861111111
1983 -1.477777778
1984 -0.194444444
1985 0.216666667
1986 -0.138888889
1987 -0.05
1988 0.455555556
1989 0.466666667
1990 0.4
1991 0.077777778
1992 -0.344444444
1993 -0.411111111
1994 0.022222222
1995 -0.65
1996 -0.288888889
1997 -0.322222222
1998 -1.388888889
1999 0.238888889
2000 -0.266666667
2001 -0.1
2002 0.466666667
2003 -0.361111111
2004 -0.255555556
2005 -0.738888889
2006 -0.422222222
2007 0.161111111
2008 0.172222222
2009 0.094444444
2010 -1.094444444
2011 -0.405555556
2012 0.138888889
2013 0.594444444
2014 -0.088888889
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>CA Historical Temperature (1895-2014)</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
background-color: white;
padding: 50px;
}
h1 {
margin-left: 50px;
}
p {
max-width: 1000px;
margin-left: 50px;
}
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
figcaption {
padding: 5px;
font-family: ;
font-size: 0.8em;
font-weight: 700;
border: none;
background: transparent;
word-wrap:normal;
text-align: center;
}
em {
color: black;
font-weight: bold;
font-style: italic;
}
em1 {
color: steelblue;
font-weight: bold;
font-style: italic;
}
em2 {
color: tomato;
font-weight: bold;
font-style: italic;
}
svg {
background-color: white;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.highlight { stroke: #fc0; }
</style>
</head>
<body>
<h1>Historical Temperature Patterns for California</h1>
<p>Temperature anomalies are calculated by comparing measured values to a baseline to detect changes relative to that baseline.
Using data from the Western Regional Climate Center <a href="http://www.wrcc.dri.edu/monitor/cal-mon/frames_version.html">www.wrcc.dri.edu</a>, I explored the temperature anomaly for both the maximum yearly temperature and the minimum yearly
temperature in California, USA. The anomaly for both is calculated as the difference between the yearly maximum (or minimum) and a baseline <em>(in this case set as the average maximum (or minimum) for the period between 1949 and 2005)</em>. Thus generally, positive anomalies represent years that are warmer than the baseline period and negative anomalies represent years that are cooler. </p>
<script type="text/javascript">
//Temperature anomaly plot
var margin = {top: 20, right: 250, bottom: 50, left: 70},
width = 1200 - margin.left - margin.right,
height = 700 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height-5, 0]);
var curve = d3.scale.ordinal();
var color = d3.scale.ordinal()
.range([ "tomato","steelblue"])
.domain(d3.range(0,1));
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.defined(function(d) { return !isNaN(d.Temperature); })
.interpolate("cubic")
.x(function(d) { return x(d.Year); })
.y(function(d) { return y(d.Temperature); });
var svg = d3.select("body").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("CA_temps_C_anomaly.csv", function(error, data) {
curve.domain(d3.keys(data[0]).filter(function(key) { return key !== "Year"; }));
data.forEach(function(d) {
d.Year = parseDate(d.Year);
});
var sources = curve.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {Year: d.Year, Temperature: +d[name]};
})
};
});
x.domain(d3.extent(data, function(d) { return d.Year;}));
y.domain([
d3.min(sources, function(c) { return d3.min(c.values, function(v) { return v.Temperature; }); }),
d3.max(sources, function(c) { return d3.max(c.values, function(v) { return v.Temperature; }); })
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("y", margin.bottom/1) //smaller divider moves down
.attr("x",width/2)
.text("Year")
.attr("font-family","serif")
.attr("font-size","16px");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y",-margin.top*3.3) //bigger mulitplier moves to the left
.attr("x",-height/2) //smaller divider moves up
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text("Maximum Temperature Anomaly - Minimum Temperature Anomaly (C)")
.attr("font-family","serif")
.attr("font-size","16px");
var source = svg.selectAll(".source")
.data(sources)
.enter().append("g")
.attr("class", "sourceDelta");
source.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke",function(d) {return color(d.name);})
.style("stroke-width", "3px")
source.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
//.attr("transform", function(d) { return "translate(" + x(d.value.Year) + "," + y(d.value.Temperature) + ")"; })
.attr("x", 50)
.attr("y", function(d, i) {return 30 * i;})
.style("stroke",function(d) {return color(d.name);})
.style("fill", function(d) {return color(d.name);})
.text(function(d) {
return d.name;
})
.style("font-size", 18)
source.append('svg:line')
.attr("x1", 0)
.attr("y1", 347)
.attr("x2", 900)
.attr("y2", 347)
.style("stroke", "rgb(6,120,155)")
.style("stroke-width", "2px");
});
</script>
<!-- Delta Temperature Anomaly-->
<h2>Minimum temperatures increasing more than Maximum temperatures?</h2>
<p>Here I have gone a step further and calculated the difference between the maximum anomaly and the minimum anomaly (the difference between the <em2>red</em2> and <em1>blue</em1> lines in the figure above). This value tells us something about what might be accounting for shifts in temperature. In this case, negative values represent periods where the difference between maximum yearly temperature its baseline was less than the difference between the minimum yearly value and its baseline. This means that during periods when this value is negative, even though we may be seeing increases in maximum temperatures, we are seeing even greater increases in minimum temperatures. </p>
<p><em>(Take home: While it may be getting hotter, its also getting less cold)</em> </p>
<body>
<script type="text/javascript">
var margin = {top: 20, right: 250, bottom: 50, left: 70},
width = 1200 - margin.left - margin.right,
height = 700 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height-5, 0]);
var curve = d3.scale.ordinal();
var colorDelta = d3.scale.ordinal()
.range(["lightgreen"])
.domain(d3.range(0,1));
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var lineDelta = d3.svg.line()
.defined(function(d) { return !isNaN(d.Temperature); })
.interpolate("cubic")
.x(function(d) { return x(d.Year); })
.y(function(d) { return y(d.Temperature); });
var svgDelta = d3.select("body").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("CA_temps_C_anomaly_diff.csv", function(error, data) {
curve.domain(d3.keys(data[0]).filter(function(key) { return key !== "Year"; }));
data.forEach(function(d) {
d.Year = parseDate(d.Year);
});
var sourcesDelta = curve.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {Year: d.Year, Temperature: +d[name]};
})
};
});
x.domain(d3.extent(data, function(d) { return d.Year;}));
y.domain([
d3.min(sourcesDelta, function(c) { return d3.min(c.values, function(v) { return v.Temperature; }); }),
d3.max(sourcesDelta, function(c) { return d3.max(c.values, function(v) { return v.Temperature; }); })
]);
svgDelta.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("y", margin.bottom/1) //smaller divider moves down
.attr("x",width/2)
.text("Year")
.attr("font-family","serif")
.attr("font-size","16px");
svgDelta.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y",-margin.top*3.3) //bigger mulitplier moves to the left
.attr("x",-height/2) //smaller divider moves up
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text("Maximum Temperature Anomaly - Minimum Temperature Anomaly (C)")
.attr("font-family","serif")
.attr("font-size","16px");
var sourceDelta = svgDelta.selectAll(".sourceDelta")
.data(sourcesDelta)
.enter().append("g")
.attr("class", "sourceDelta");
sourceDelta.append("path")
.attr("class", "line")
.attr("d", function(d) { return lineDelta(d.values); })
.style("stroke",function(d) {return colorDelta(d.name);})
.style("stroke-width", "3px")
sourceDelta.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.Year) + "," + y(d.value.Temperature) + ")"; })
.attr("x", 5)
.attr("dy", "3em")
.style("stroke",function(d) {return colorDelta(d.name);})
.style("fill", function(d) {return colorDelta(d.name);})
.style("font-size", 18)
sourceDelta.append('svg:line')
.attr("x1", 0)
.attr("y1", 307)
.attr("x2", 900)
.attr("y2", 307)
.style("stroke", "rgb(6,120,155)")
.style("stroke-width", "2px");
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment