Skip to content

Instantly share code, notes, and snippets.

@d3noob
Last active November 30, 2019 18:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save d3noob/d553875b4f0bd5086c28 to your computer and use it in GitHub Desktop.
Save d3noob/d553875b4f0bd5086c28 to your computer and use it in GitHub Desktop.
Degree Days
license: mit

Heating engineers relate each day's temperatures to the demand for energy to heat/cool buildings. They developed the concept of degree days which can be used to relate how much more or less you might spend on heating or air conditioning.

This graph illustrates the difference between heating and cooling requirements in Bundaberg Australia based on a reference temperature of 18 degrees centigrade.

The data presented is the mean temperature for Bundaberg Australia sourced from the Australian Bureau of Meteorology and averaged over the range of available records.

date value
01-01 25.5
01-02 25.6
01-03 25.7
01-04 25.6
01-05 25.9
01-06 25.9
01-07 25.7
01-08 25.6
01-09 25.6
01-10 25.5
01-11 25.7
01-12 26.0
01-13 25.7
01-14 25.7
01-15 25.5
01-16 25.5
01-17 25.4
01-18 25.6
01-19 25.7
01-20 25.6
01-21 26.1
01-22 26.1
01-23 25.9
01-24 25.7
01-25 25.9
01-26 25.9
01-27 26.0
01-28 26.1
01-29 26.0
01-30 26.4
01-31 26.2
02-01 26.2
02-02 26.0
02-03 25.7
02-04 25.6
02-05 25.7
02-06 25.9
02-07 25.9
02-08 25.9
02-09 26.1
02-10 25.9
02-11 25.6
02-12 25.9
02-13 25.6
02-14 25.5
02-15 25.6
02-16 25.7
02-17 25.6
02-18 25.3
02-19 25.4
02-20 25.6
02-21 25.8
02-22 25.8
02-23 26.0
02-24 25.7
02-25 25.3
02-26 25.2
02-27 25.3
02-28 25.5
02-29 25.1
03-01 25.3
03-02 25.0
03-03 24.9
03-04 24.7
03-05 25.1
03-06 25.2
03-07 24.9
03-08 24.9
03-09 25.1
03-10 24.7
03-11 24.9
03-12 24.7
03-13 24.5
03-14 24.3
03-15 24.2
03-16 24.3
03-17 24.6
03-18 24.4
03-19 24.4
03-20 24.3
03-21 24.6
03-22 24.6
03-23 24.5
03-24 24.2
03-25 23.9
03-26 24.0
03-27 23.9
03-28 23.9
03-29 24.1
03-30 23.9
03-31 23.9
04-01 24.1
04-02 23.7
04-03 23.5
04-04 23.5
04-05 23.4
04-06 23.3
04-07 22.7
04-08 22.5
04-09 22.9
04-10 22.3
04-11 22.4
04-12 22.3
04-13 22.1
04-14 22.5
04-15 22.6
04-16 22.6
04-17 22.6
04-18 22.5
04-19 22.3
04-20 22.3
04-21 22.2
04-22 22.2
04-23 22.2
04-24 21.9
04-25 21.8
04-26 22.1
04-27 21.7
04-28 21.6
04-29 21.3
04-30 21.2
05-01 21.0
05-02 20.9
05-03 20.7
05-04 20.6
05-05 20.5
05-06 20.4
05-07 20.0
05-08 19.7
05-09 19.7
05-10 19.9
05-11 20.0
05-12 19.8
05-13 19.8
05-14 19.5
05-15 19.5
05-16 19.3
05-17 19.2
05-18 19.2
05-19 19.3
05-20 19.1
05-21 18.5
05-22 18.6
05-23 18.5
05-24 18.6
05-25 18.2
05-26 18.6
05-27 18.2
05-28 18.1
05-29 18.5
05-30 18.1
05-31 18.1
06-01 18.0
06-02 18.4
06-03 18.3
06-04 18.3
06-05 18.1
06-06 17.9
06-07 18.0
06-08 17.8
06-09 17.6
06-10 17.4
06-11 17.2
06-12 16.8
06-13 17.0
06-14 17.1
06-15 17.1
06-16 17.0
06-17 16.4
06-18 16.2
06-19 16.4
06-20 16.6
06-21 16.5
06-22 16.7
06-23 16.3
06-24 16.0
06-25 16.0
06-26 16.1
06-27 16.2
06-28 16.2
06-29 16.6
06-30 17.2
07-01 16.9
07-02 16.6
07-03 16.3
07-04 16.0
07-05 16.3
07-06 16.4
07-07 16.7
07-08 15.8
07-09 16.0
07-10 16.0
07-11 16.2
07-12 16.5
07-13 16.6
07-14 16.7
07-15 15.8
07-16 15.7
07-17 15.7
07-18 15.8
07-19 16.0
07-20 15.6
07-21 15.8
07-22 16.0
07-23 16.1
07-24 15.9
07-25 16.2
07-26 16.1
07-27 16.4
07-28 16.0
07-29 15.9
07-30 16.2
07-31 16.3
08-01 16.7
08-02 16.5
08-03 16.3
08-04 16.2
08-05 16.4
08-06 17.0
08-07 16.5
08-08 16.8
08-09 16.5
08-10 16.1
08-11 16.2
08-12 16.5
08-13 16.9
08-14 17.1
08-15 17.2
08-16 16.7
08-17 16.9
08-18 17.3
08-19 17.0
08-20 17.1
08-21 17.4
08-22 17.1
08-23 17.3
08-24 18.0
08-25 17.4
08-26 17.5
08-27 17.8
08-28 18.0
08-29 18.4
08-30 18.6
08-31 18.5
09-01 18.5
09-02 18.6
09-03 18.3
09-04 18.4
09-05 18.9
09-06 18.8
09-07 19.1
09-08 19.6
09-09 18.8
09-10 19.0
09-11 18.9
09-12 19.1
09-13 19.2
09-14 19.2
09-15 19.9
09-16 20.0
09-17 19.7
09-18 19.6
09-19 19.7
09-20 20.0
09-21 19.8
09-22 19.9
09-23 19.9
09-24 20.6
09-25 21.0
09-26 20.7
09-27 20.7
09-28 20.5
09-29 20.9
09-30 20.8
10-01 20.8
10-02 20.8
10-03 21.4
10-04 21.0
10-05 21.4
10-06 21.1
10-07 21.8
10-08 21.7
10-09 21.4
10-10 21.4
10-11 21.5
10-12 21.5
10-13 21.4
10-14 21.7
10-15 21.5
10-16 21.2
10-17 21.5
10-18 21.6
10-19 21.7
10-20 22.2
10-21 22.0
10-22 21.9
10-23 21.9
10-24 21.9
10-25 22.0
10-26 22.6
10-27 22.7
10-28 22.6
10-29 22.6
10-30 22.4
10-31 22.5
11-01 22.5
11-02 22.8
11-03 23.0
11-04 23.2
11-05 23.3
11-06 23.1
11-07 23.4
11-08 23.5
11-09 23.6
11-10 23.5
11-11 23.3
11-12 23.5
11-13 23.5
11-14 23.5
11-15 23.7
11-16 23.7
11-17 23.5
11-18 23.6
11-19 23.8
11-20 23.6
11-21 23.6
11-22 23.9
11-23 24.1
11-24 23.9
11-25 24.0
11-26 23.8
11-27 24.1
11-28 24.0
11-29 24.2
11-30 24.4
12-01 24.3
12-02 24.5
12-03 24.8
12-04 24.5
12-05 24.9
12-06 24.7
12-07 24.4
12-08 24.8
12-09 24.4
12-10 24.9
12-11 25.1
12-12 24.7
12-13 25.3
12-14 25.1
12-15 25.2
12-16 25.3
12-17 25.1
12-18 25.0
12-19 25.0
12-20 24.9
12-21 24.8
12-22 24.5
12-23 24.9
12-24 25.2
12-25 25.4
12-26 25.5
12-27 25.5
12-28 25.2
12-29 25.5
12-30 25.6
12-31 25.6
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body { font: 10px sans-serif;}
text.shadow {
stroke: white;
stroke-width: 2.5px;
opacity: 0.9;
}
text.label {
fill: black;
stroke-width: 1px;
opacity: 1;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
fill: black;
}
.x.axis text {
font-family: sans-serif;
font-size: 11px;
fill: black;
}
.x.axis path { display: none;}
.area.below { fill: coral;}
.area.above { fill: deepskyblue;}
.line {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script>
var title = "Bundaburg Degree Days";
var margin = {top: 20, right: 20, bottom: 50, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%m-%d").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickValues(d3.time.month.range(
new Date("1900 02"),
new Date("1901 01")),
1);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.area()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.value); });
var area = d3.svg.area()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y1(function(d) { return y(d.value); });
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("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.value = +d.value-18;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(data, function(d) { return d.value; }),
d3.max(data, function(d) { return d.value; })
]);
svg.datum(data);
svg.append("clipPath")
.attr("id", "clip-above")
.append("path")
.attr("d", area.y0(height));
svg.append("clipPath")
.attr("id", "clip-below")
.append("path")
.attr("d", area.y0(0));
svg.append("path")
.attr("class", "area below")
.attr("clip-path", "url(#clip-below)")
.attr("d", area.y0(y(0)));
svg.append("path")
.attr("class", "area above")
.attr("clip-path", "url(#clip-above)")
.attr("d", area);
svg.append("path") // Draw the line
.attr("class", "line")
.attr("d", line);
svg.append("g") // shadow for the x axis
.attr("class", "x axis")
.attr("transform", "translate(0," + (y(0)) + ")") // cross @ 0
.style("stroke", "white")
.call(xAxis);
svg.append("g") // x axis
.attr("class", "x axis")
.attr("transform", "translate(0," + (y(0)) + ")") // cross @ 0
.call(xAxis);
svg.append("g") // y axis label shadow
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "translate(5," + (height) + ") rotate(-90)")
.attr("dy", ".71em")
.style("text-anchor", "start")
.attr("class", "shadow")
.text("Degree Day (ºC)");
svg.append("g") // y axis label
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "translate(5," + (height) + ") rotate(-90)")
.attr("dy", ".71em")
.style("text-anchor", "start")
.style("fill", "black")
.text("Degree Day (ºC)");
svg.append("text") // Title shadow
.attr("x", (width / 2))
.attr("y", 35 )
.attr("text-anchor", "middle")
.style("font-size", "30px")
.attr("class", "shadow")
.text(title);
svg.append("text") // Title
.attr("x", (width / 2))
.attr("y", 35 )
.attr("text-anchor", "middle")
.style("font-size", "30px")
.style("stroke", "none")
.text(title);
svg.append("rect") // Cooling Legend Rectangle
.attr("x", ((width / 2)/2)-100)
.attr("y", height+(margin.bottom/2)-18 )
.attr("width", "200")
.attr("height", "25")
.attr("class", "area above");
svg.append("rect") // Heating Legend Rectangle
.attr("x", ((width / 2)/2)+(width / 2)-100)
.attr("y", height+(margin.bottom/2)-18 )
.attr("width", "200")
.attr("height", "25")
.attr("class", "area below");
svg.append("text") // Cooling Legend Text shadow
.attr("x", ((width / 2)/2))
.attr("y", height+(margin.bottom/2) )
.attr("text-anchor", "middle")
.style("font-size", "18px")
.attr("class", "shadow")
.text("Degree Days of Cooling");
svg.append("text") // Heating Legend Text shadow
.attr("x", ((width / 2)/2)+(width / 2))
.attr("y", height+(margin.bottom/2) )
.attr("text-anchor", "middle")
.style("font-size", "18px")
.attr("class", "shadow")
.text("Degree Days of Heating");
svg.append("text") // Cooling Legend Text
.attr("x", ((width / 2)/2))
.attr("y", height+(margin.bottom/2) )
.attr("text-anchor", "middle")
.style("font-size", "18px")
.style("stroke", "none")
.text("Degree Days of Cooling");
svg.append("text") // Heating Legend Text
.attr("x", ((width / 2)/2)+(width / 2))
.attr("y", height+(margin.bottom/2) )
.attr("text-anchor", "middle")
.style("font-size", "18px")
.style("stroke", "none")
.text("Degree Days of Heating");
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment