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"); | |
| 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) { | |
| console.log(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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment