Solar Energy Production in Texas.
Story published on the Taxes Tribune: http://www.texastribune.org/2015/08/05/new-law-will-let-more-texans-go-solar/
Built with blockbuilder.org
license: mit |
Solar Energy Production in Texas.
Story published on the Taxes Tribune: http://www.texastribune.org/2015/08/05/new-law-will-let-more-texans-go-solar/
Built with blockbuilder.org
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
<meta http-equiv="Content-Language" content="en" /> | |
<title>Solar in Texas</title> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<style> | |
body { font: 12px Helvetica Neue;} | |
path { | |
stroke: #; | |
stroke-width: ; | |
fill: none; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #e7eff1; | |
stroke-width: 1; | |
shape-rendering: crispEdges; | |
} | |
.graph-svg-component { | |
background-color:#e7eff1; | |
opacity:0.9; | |
} | |
.overlay { | |
fill: none; | |
pointer-events: all; | |
} | |
.focus circle { | |
fill: #990000; | |
} | |
.focus text{ | |
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; | |
} | |
.line { | |
fill: none; | |
stroke: #7ea7ba; | |
stroke-linejoin: round; | |
stroke-linecap: round; | |
stroke-width: 2.5px; | |
} | |
.voronoi path { | |
fill: none; | |
pointer-events: all; | |
} | |
.grid .tick{ | |
stroke:white; | |
stroke-width:1.5px; | |
stroke-opacity:0.6; | |
shape-rendering: crispEdges; | |
} | |
.grid path{ | |
stroke-width:0; | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
var margin = {top: 60, right: 60, bottom: 50, left: 60}, | |
width = 700 - margin.left - margin.right, | |
height = 400 - margin.top - margin.bottom; | |
var parseDate = d3.time.format("%b %y").parse, | |
bisectDate = d3.bisector(function(d) { return d.date; }).left, | |
formatValue = d3.format(",.2f"); | |
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").ticks(5); | |
var yAxis = d3.svg.axis().scale(y) | |
.orient("left").ticks(10); | |
var voronoi = d3.geom.voronoi() | |
.x(function(d) { return x(d.date); }) | |
.y(function(d) { return y(d.value); }) | |
.clipExtent([[-margin.left, -margin.top], [width + margin.right, height + margin.bottom]]); | |
var valueline = d3.svg.line() | |
// .interpolate("basis") | |
.x(function(d) { return x(d.date); }) | |
.y(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) | |
.attr("class", "graph-svg-component") | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
function make_x_axis() { return d3.svg.axis() | |
.scale(x) | |
.orient("bottom") | |
.ticks(5) | |
} | |
function make_y_axis() { return d3.svg.axis() | |
.scale(y) | |
.orient("left") | |
.ticks(10) | |
} | |
// Get the data | |
d3.csv("texas_solar.csv", function(error, data) { | |
var flatData = []; | |
data.forEach(function(d) { | |
d.date = parseDate(d.date); | |
d.value = +d.value; | |
flatData.push({date: d.date, value: d.value, key: "value"}); | |
}); | |
// Scale the range of the data | |
x.domain(d3.extent(data, function(d) { return d.date; })); | |
y.domain([0, d3.max(data, function(d) { return Math.max( d.value); })]) | |
// Add the valueline path | |
svg.append("g") | |
.attr("class", "grid") | |
.attr("transform", "translate(0," + height + ")") | |
.call(make_x_axis() | |
.tickSize(-height, 0, 0) | |
.tickFormat("") | |
) | |
svg.append("g") | |
.attr("class", "grid") | |
.call(make_y_axis() | |
.tickSize(-width, 0, 0) | |
.tickFormat("") | |
) | |
svg.append("path") | |
.attr("class", "line") | |
.attr("d", valueline(data)); | |
svg.append("g") // Add the X Axis | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
svg.append("g") // Add the Y Axis | |
.attr("class", "y axis") | |
.call(yAxis) | |
.append("text") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("dy", ".71em") | |
.style("text-anchor", "end") | |
.style("font-size",10) | |
.text("Thousand megawatthours");; | |
var focus = svg.append("g") | |
.attr("class", "focus") | |
.attr("transform", "translate(-100,-100)"); | |
focus.append("circle") | |
.attr("r", 4); | |
focus.append("text") | |
.attr("x", -9) | |
.attr("y",-15) | |
.attr("dy", ".35em"); | |
var voronoiGroup = svg.append("g") | |
.attr("class", "voronoi"); | |
console.log(voronoi(flatData)) | |
voronoiGroup.selectAll("path") | |
.data(voronoi(flatData)) | |
.enter().append("path") | |
.attr("d", function(d) { return "M" + d.join("L") + "Z"; }) | |
.datum(function(d) { return d.point; }) | |
.on("mouseover", mouseover) | |
.on("mouseout", mouseout); | |
function mouseover(d) { | |
d3.select("."+d.key).classed("line-hover", true); | |
focus.attr("transform", "translate(" + x(d.date) + "," + y(d.value) + ")"); | |
focus.select("text") | |
// .text( d.value + " Thousand megawatt/Hours") | |
.text( d.value) | |
.style("font-size", "14") | |
.style("opacity", "0.75") | |
.style("font-weight",500); | |
} | |
function mouseout(d) { | |
d3.select("."+d.key).classed("line-hover", false); | |
focus.attr("transform", "translate(-100,-100)"); | |
} | |
}); | |
d3.select("svg") | |
.append("text") | |
.attr("x", (width)-(width/4)) | |
.attr("y", (height)+(height/2.3)) | |
.text("Data source: U.S. Energy Information Administration") | |
.style({"font-size":"10px", | |
"font-family":"Helvetica", | |
"font-weight":"300", | |
"opacity":"0.8", | |
}); | |
d3.select("svg") | |
.append("text") | |
.attr("x", (width/9)) | |
.attr("y", (height/7)) | |
.text("Solar Energy Production in Texas") | |
.style({"font-size":"25px", | |
"font-family":"Helvetica Neue", | |
"font-weight":"500", | |
"opacity":"0.8" | |
}); | |
</script> | |
</body> | |
</html> |
date | value | |
---|---|---|
Mar 15 | 30.95759 | |
Feb 15 | 23.85251 | |
Jan 15 | 20.28074 | |
Dec 14 | 14.69525 | |
Nov 14 | 22.64163 | |
Oct 14 | 32.07428 | |
Sep 14 | 27.26618 | |
Aug 14 | 38.93628 | |
Jul 14 | 29.77335 | |
Jun 14 | 29.36615 | |
May 14 | 28.46721 | |
Apr 14 | 27.60968 | |
Mar 14 | 24.42573 | |
Feb 14 | 13.9795 | |
Jan 14 | 14.81919 | |
Dec 13 | 13.83265 | |
Nov 13 | 9.05797 | |
Oct 13 | 13.73226 | |
Sep 13 | 14.88295 | |
Aug 13 | 17.70666 | |
Jul 13 | 17.16244 | |
Jun 13 | 16.40791 | |
May 13 | 14.85825 | |
Apr 13 | 12.27838 | |
Mar 13 | 15.07471 | |
Feb 13 | 10.12686 | |
Jan 13 | 7.89189 | |
Dec 12 | 14.88614 | |
Nov 12 | 8.55649 | |
Oct 12 | 9.51389 | |
Sep 12 | 10.96598 | |
Aug 12 | 12.81955 | |
Jul 12 | 12.41762 | |
Jun 12 | 13.6851 | |
May 12 | 12.64119 | |
Apr 12 | 8.7192 | |
Mar 12 | 5.77977 | |
Feb 12 | 4.0565 | |
Jan 12 | 4.22356 | |
Dec 11 | 1.03509 | |
Nov 11 | 1.21588 | |
Oct 11 | 2.18251 | |
Sep 11 | 2.64381 | |
Aug 11 | 3.55402 | |
Jul 11 | 3.3935 | |
Jun 11 | 3.98823 | |
May 11 | 3.42297 | |
Apr 11 | 2.91971 | |
Mar 11 | 2.14825 | |
Feb 11 | 1.52097 | |
Jan 11 | 0.61408 | |
Dec 10 | 2.84908 | |
Nov 10 | 5.35892 | |
Oct 10 | 0 | |
Sep 10 | 0 | |
Aug 10 | 0 | |
Jul 10 | 0 | |
Jun 10 | 0 | |
May 10 | 0 | |
Apr 10 | 0 | |
Mar 10 | 0 | |
Feb 10 | 0 | |
Jan 10 | 0 |