Skip to content

Instantly share code, notes, and snippets.

@jeremycflin

jeremycflin/.block

Last active July 25, 2017 02:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jeremycflin/9562639bf833ecbc2a7f to your computer and use it in GitHub Desktop.
Save jeremycflin/9562639bf833ecbc2a7f to your computer and use it in GitHub Desktop.
Download ZIP
Solar Energy Production in Texas
Raw
.block
license: mit
Raw
README.md
Raw
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="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>
Raw
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment