Skip to content

Instantly share code, notes, and snippets.

@nivas8292

nivas8292/data.csv

Last active August 29, 2015 14:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nivas8292/738561113db8428f4bbe to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nivas8292/738561113db8428f4bbe to your computer and use it in GitHub Desktop.
Download ZIP
Degree Days
Raw
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
Raw
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)
})
// .y0(function (d) {
// return yScale(0)
//// return height; //Clip Above
//// return 0; //Clip Below
// });
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment