index.html
<html>
<head>
<title>Degree Days</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
.line {
fill: none;
stroke: #000;
stroke-width: 2px;
}
.below {
fill:coral;
}
.above {
fill:deepskyblue;
}
.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;}
</style>
</head>
<body>
</body>
<script type="text/javascript">
var w = 1000,
h = 500;
var margin = {top: 20, right: 20, left: 20, bottom: 20};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var svg = d3.select('body')
.append('svg')
.attr("height", h)
.attr("width", w)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var timeFormat = d3.time.format("%m-%d").parse;
var yScale = d3.scale.linear()
.range([height, 0]);
var xScale = d3.time.scale()
.range([0, width]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickValues(d3.time.month.range(
new Date("1900 02"),
new Date("1901 01")),
1);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var line = d3.svg.line()
.x(function (d) {
return xScale(d.date)
})
.y(function (d) {
return yScale(d.value)
});
var area = d3.svg.area()
.x(function (d) {
return xScale(d.date);
})
.y1(function (d) {
return yScale(d.value)
})
function drawAxis(params) {
this.append("g")
.classed("x axis", true)
.attr("transform", "translate(0, " + params.scale.y(0) + ")")
.style("stroke", "white")
.call(params.axis.x);
this.append("g")
.classed("x axis", true)
.attr("transform", "translate(0, " + params.scale.y(0) + ")")
.call(params.axis.x);
this.append("g")
.classed("y axis", true)
.style("stroke", "white")
.call(params.axis.y)
.append('text')
.text("Degree Day (ºC)")
.attr("transform", "rotate(90)")
.attr("transform", "translate(7, " + height + ") rotate(90)")
.attr("text-anchor", "end");
this.append("g")
.classed("y axis", true)
.call(params.axis.y)
.append('text')
.text("Degree Day (ºC)")
.attr("transform", "rotate(90)")
.attr("transform", "translate(7, " + height + ") rotate(90)")
.attr("text-anchor", "end");
}
function drawLegend() {
var g = this.append("g")
.attr("transform", "translate(" + ((width / 2)) + "," + (margin.top) + ")");
g.append("text")
.attr("text-anchor", "middle")
.attr("font-size", 30)
.text("Bundaburg Degree Days");
var g = this.append("g")
.attr("transform", "translate(" + ((width / 4) - 100) + "," + (height - margin.bottom) + ")");
g.append("rect")
.attr("width", "200")
.attr("height", "40")
.classed("area above", true);
g.append('text')
.attr("dy", 24)
.attr("dx", 100)
.style("stroke", "white")
.attr("text-anchor", "middle")
.style("font-size", "18px")
.text('Degree Days Of Cooling');
g.append('text')
.attr("dy", 24)
.attr("dx", 100)
.attr("text-anchor", "middle")
.style("font-size", "18px")
.text('Degree Days Of Cooling');
var g = this.append("g")
.attr("transform", "translate(" + ((3 * width / 4) - 100) + "," + (height - margin.bottom) + ")");
g.append("rect")
.attr("width", "200")
.attr("height", "40")
.classed("area below", true);
g.append('text')
.attr("dy", 24)
.attr("dx", 100)
.style("stroke", "white")
.attr("text-anchor", "middle")
.style("font-size", "18px")
.text('Degree Days Of Heating');
g.append('text')
.attr("dy", 24)
.attr("dx", 100)
.attr("text-anchor", "middle")
.style("font-size", "18px")
.text('Degree Days Of Heating');
}
d3.csv("data.csv", function (error, data) {
gdata = data;
data.forEach(function (d) {
d.date = timeFormat(d.date);
d.value = +d.value - 18;
});
xScale.domain(d3.extent(data, function (d) {
return d.date
}));
yScale.domain(d3.extent(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')
.classed('line', true)
.attr('d', line);
svg.append('path')
.classed('area above', true)
.attr('clip-path', 'url(#clip-above)')
.attr('d', area.y0(yScale(0)));
svg.append('path')
.classed('area below', true)
.attr('clip-path', 'url(#clip-below)')
.attr('d', area.y0(yScale(0)));
drawAxis.call(svg, {
scale: {
x: xScale,
y: yScale
},
axis: {
x: xAxis,
y: yAxis
},
});
drawLegend.call(svg);
});
</script>
</html>
data.csv
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