D3 Examples - Solar Energy Production in Texas

xxxxxxxxxx
 
<!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="https://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>
​
    