block by jeremycflin 9562639bf833ecbc2a7f

Solar Energy Production in Texas

Full Screen

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

index.html

<!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="//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>

texas_solar.csv

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