Skip to content

Instantly share code, notes, and snippets.

@jeremycflin

jeremycflin/.block

Last active May 14, 2018 21:03
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/2570a207b4e4b98ccdfc to your computer and use it in GitHub Desktop.
Save jeremycflin/2570a207b4e4b98ccdfc to your computer and use it in GitHub Desktop.
Download ZIP
California Electrical Energy Production Breakdown
Raw
.block
license: mit
Raw
README.md

A multiple line chart visualizing California electrical energy production Built with blockbuilder.org

Raw
data_3.csv
date california_energy_production total_hydroelectric nuclear in_state_coal oil natural_gas geothermal biomass wind solar other direct_coal_imports other_imports
1983 199609 59351 6738 563 6535 45486 7020 731 52 2 0 17001 56130
1984 211900 46880 13467 731 2632 58248 9272 1099 192 11 0 18080 61288
1985 210172 33898 18911 865 2790 69771 10957 1171 655 33 0 14112 57009
1985 211028 44478 28000 1033 3126 49260 13094 2063 1221 64 6 17588 51095
1987 220371 27140 32995 1163 2143 75437 14083 2461 1713 188 5 17544 45499
1988 232926 26692 35481 1791 8158 74221 14194 4092 1824 315 4 19243 46911
1989 238567 32742 33803 2479 9275 78916 15247 5204 2139 471 4 17223 41064
1990 252355 26092 36586 3692 4449 76082 16038 6644 2418 681 4 17710 61959
1991 242343 23244 37167 3050 523 75828 15566 7312 2669 719 0 20392 55873
1992 245535 22373 38622 3629 107 87032 16491 7362 2707 700 2 28806 37704
1993 242026 41595 36579 2549 2085 70715 15770 5760 2867 857 0 20358 42892
1994 256719 25626 38828 2655 1954 95025 15573 7173 3293 798 0 22440 43354
1995 256367 51665 36186 1136 489 78378 14267 5969 3182 793 0 16788 47514
1996 253621 47883 39753 2870 693 66711 13539 5557 3154 832 343 22590 49696
1997 230243 41400 37267 2276 143 74341 11950 5701 2739 810 896 22411 30310
1998 244577 48757 41715 2701 123 82052 12554 5266 2776 839 230 22570 24993
1999 243077 41627 40419 3602 55 84703 13251 5663 3433 838 0 22802 26685
2000 246876 42053 43533 3183 449 106878 13456 6086 3604 860 0 23877 2897
2001 267399 24988 33294 4041 379 116369 13525 5761 3242 836 38 23699 41227
2002 274444 31359 34353 4275 87 92752 13396 6196 3546 851 35 23653 63941
2003 280026 36341 35594 4269 103 94715 13329 6092 3316 759 108 23148 62253
2004 290211 34490 30241 4086 127 105358 13494 6080 4258 741 48 24504 66785
2005 289177 40263 36155 4283 148 97110 13292 6076 4084 660 24 24114 62967
2006 298454 48559 32036 4190 134 109316 13093 5861 4902 616 34 14452 65263
2007 304823 27105 35698 4217 103 120459 13029 5743 5570 668 15 14417 77799
2008 307448 24460 32482 3977 92 123036 12907 5927 5724 733 39 14463 83608
2009 299101 29220 31509 3735 67 117277 12907 6096 6249 851 20 13556 77615
2010 291310 34327 32214 3406 52 109916 12740 5960 6172 912 12 13119 72481
2011 293875 42731 36666 3120 36 91276 12685 5986 7598 1097 13 13032 79633
2012 302113 27459 18491 1580 90 121761 12733 6121 9242 1834 14 9716 93071
2013 296569 24098 17860 1018 38 120896 12485 6466 12694 4154 14 11824 85022
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>Energy Production in California</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script>
<style>
body { font: 12px avenir next;}
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;
}
/*div {
padding: 15px;
width:800px;
margin-left:auto;
margin-right:auto;
border:10px ;
}*/
.overlay {
fill: none;
pointer-events: all;
}
.focus circle {
fill: #990000;
stroke: #990000;
}
.line {
fill: none;
stroke: #7ea7ba;
stroke-linejoin: round;
stroke-linecap: round;
stroke-width: 1.5px;
}
.line-hover {
stroke: #cc6200;
stroke-width:4;
}
.voronoi path {
fill: none;
pointer-events: all;
}
.grid .tick{
stroke:white;
stroke-width:1.5px;
stroke-opacity:0.9;
shape-rendering: crispEdges;
}
.grid path{
stroke-width:0;
}
.lable{
font-size: 30;
}
.lable-hover{
font-size: 30;
}
text.shadow { stroke: white;
stroke-width: 2.5px;
opacity: 0.9; }
</style>
</head>
<body>
<script>
var margin = {top: 80, right: 140, bottom: 60, left: 80},
width = 1400 - margin.left - margin.right,
height = 830 - margin.top - margin.bottom;
var parseDate = d3.time.format("%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(15);
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 valueline2 = d3.svg.line()
// .interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.total_hydroelectric); });
var valueline3 = d3.svg.line()
// .interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.nuclear); });
var valueline4 = d3.svg.line()
// .interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.in_state_coal); });
var valueline5 = d3.svg.line()
// .interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.oil); });
var valueline6 = d3.svg.line()
// .interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.natural_gas ); });
var valueline7 = d3.svg.line()
// .interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.geothermal ); });
var valueline8 = d3.svg.line()
// .interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.biomass ); });
var valueline9 = d3.svg.line()
// .interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.wind ); });
var valueline10 = d3.svg.line()
// .interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.solar ); });
var valueline11 = d3.svg.line()
// .interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.other ); });
var valueline12 = d3.svg.line()
// .interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.direct_coal_imports ); });
var valueline13 = d3.svg.line()
// .interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.other_imports ); });
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 + ")");
tmp = null;
function make_x_axis() { return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(10)
}
function make_y_axis() { return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
}
// Get the data
d3.csv("data_3.csv", function(error, data) {
var flatData = [];
data.forEach(function(d) {
d.date = parseDate(d.date);
// d.california_energy_production = +d.california_energy_production;
d.total_hydroelectric = +d.total_hydroelectric;
d.nuclear = +d.nuclear;
d.in_state_coal = +d.in_state_coal;
d.oil = +d.oil;
d.natural_gas = +d.natural_gas;
d.geothermal = +d.geothermal;
d.biomass = +d.biomass;
d.wind = +d.wind;
d.solar = +d.solar;
d.other = +d.other;
d.direct_coal_imports = +d.direct_coal_imports;
d.other_imports = +d.other_imports;
flatData.push({date: d.date, value: d.total_hydroelectric, key: "total_hydroelectric"});
flatData.push({date: d.date, value: d.nuclear, key: "nuclear"});
flatData.push({date: d.date, value: d.in_state_coal, key: "in_state_coal"});
flatData.push({date: d.date, value: d.oil, key: "oil"});
flatData.push({date: d.date, value: d.natural_gas, key: "natural_gas"});
flatData.push({date: d.date, value: d.geothermal, key: "geothermal"});
flatData.push({date: d.date, value: d.biomass, key: "biomass"});
flatData.push({date: d.date, value: d.wind, key: "wind"});
flatData.push({date: d.date, value: d.solar, key: "solar"});
flatData.push({date: d.date, value: d.other, key: "other"});
flatData.push({date: d.date, value: d.direct_coal_imports, key: "direct_coal_imports"});
flatData.push({date: d.date, value: d.other_imports, key: "other_imports"});
});
// 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.total_hydroelectric, d.nuclear,d.in_state_coal, d.oil, d.natural_gas); })])
// Add the valueline path.
// svg.append("path")
// .attr("class", "line")
// .attr("d", valueline1(data));
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 total_hydroelectric")
.attr("d", valueline2(data));
svg.append("path")
.attr("class", "line nuclear")
.attr("d", valueline3(data));
svg.append("path")
.attr("class", "line in_state_coal")
.attr("d", valueline4(data));
svg.append("path")
.attr("class", "line oil")
.attr("d", valueline5(data));
svg.append("path")
.attr("class", "line natural_gas")
.attr("d", valueline6(data));
svg.append("path")
.attr("class", "line geothermal")
.attr("d", valueline7(data));
svg.append("path")
.attr("class", "line biomass")
.attr("d", valueline8(data));
svg.append("path")
.attr("class", "line wind")
.attr("d", valueline9(data));
svg.append("path")
.attr("class", "line solar")
.attr("d", valueline10(data));
svg.append("path")
.attr("class", "line other")
.attr("d", valueline11(data));
svg.append("path")
.attr("class", "line direct_coal_imports")
.attr("d", valueline12(data));
svg.append("path")
.attr("class", "line other_imports")
.attr("d", valueline13(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);
var focus = svg.append("g")
.attr("class", "focus")
.attr("transform", "translate(-100,-100)");
focus.append("circle")
.attr("r", 6);
focus.append("text")
.attr("x", -9)
.attr("y",-15)
.attr("dy", ".35em");
svg.append("text")
.attr("class", "lable total_hydroelectric")
.attr("transform", "translate(" + (width+3) + "," + y(data[30].total_hydroelectric) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
// .style("fill", "#898989")
.text("Total Hydroelectric");
svg.append("text")
.attr("class", "lable nuclear")
.attr("transform", "translate(" + (width+3) + "," + y(data[30].nuclear) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
// .style("fill", "#898989")
.text("Nuclear");
// svg.append("text")
// .attr("class", "lable in_state_coal")
// .attr("transform", "translate(" + (width+3) + "," + y(data[30].in_state_coal) + ")")
// .attr("dy", ".35em")
// .attr("text-anchor", "start")
// // .style("fill", "#898989")
// .text("In State Coal");
// svg.append("text")
// .attr("class", "lable oil")
// .attr("transform", "translate(" + (width+3) + "," + y(data[30].oil) + ")")
// .attr("dy", ".35em")
// .attr("text-anchor", "start")
// // .style("fill", "#898989")
// .text("Oil");
svg.append("text")
.attr("class", "lable natural_gas")
.attr("transform", "translate(" + (width+3) + "," + y(data[30].natural_gas) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
// .style("fill", "#898989")
.text("Natural Gas");
svg.append("text")
.attr("class", "lable geothermal")
.attr("transform", "translate(" + (width+3) + "," + y(data[30].geothermal) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
// .style("fill", "#898989")
.text("Geotheral");
// svg.append("text")
// .attr("class", "lable biomass")
// .attr("transform", "translate(" + (width+3) + "," + y(data[30].biomass) + ")")
// .attr("dy", ".35em")
// .attr("text-anchor", "start")
// // .style("fill", "#898989")
// .text("Biomass");
// svg.append("text")
// .attr("class", "lable wind")
// .attr("transform", "translate(" + (width+3) + "," + y(data[30].wind) + ")")
// .attr("dy", ".35em")
// .attr("text-anchor", "start")
// // .style("fill", "#898989")
// .text("Wind");
// svg.append("text")
// .attr("class", "lable solar")
// .attr("transform", "translate(" + (width+3) + "," + y(data[30].solar) + ")")
// .attr("dy", ".35em")
// .attr("text-anchor", "start")
// // .style("fill", "#898989")
// .text("Solar");
// svg.append("text")
// .attr("class", "lable other")
// .attr("transform", "translate(" + (width+3) + "," + y(data[30].other) + ")")
// .attr("dy", ".35em")
// .attr("text-anchor", "start")
// // .style("fill", "#898989")
// .text("Other");
// svg.append("text")
// .attr("class", "lable direct_coal_imports")
// .attr("transform", "translate(" + (width+3) + "," + y(data[30].direct_coal_imports) + ")")
// .attr("dy", ".35em")
// .attr("text-anchor", "start")
// // .style("fill", "#898989")
// .text("Direct Coal Imports");
svg.append("text")
.attr("class", "lable other_imports")
.attr("transform", "translate(" + (width+3) + "," + y(data[30].other_imports) + ")")
.attr("dy", ".35em")
.attr("text-anchor", "start")
// .style("fill", "#898989")
.text("Other Imports");
console.log(flatData)
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 + " Gigawatt/Hours")
.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", 10)
.attr("y", 40)
.text("California Electrical Energy Production Breakdown, Visualized")
.style({"font-size":"28px",
"font-family":"Helvetica",
"font-weight":"600",
"opacity":"0.8",
});
d3.select("svg")
.append("text")
.attr("x", 13)
.attr("y", 65)
.text("Hover your mouse on each energy source to see more details")
.style({"font-size":"20px",
"font-family":"Helvetica",
"font-weight":"400",
"opacity":"0.65",
});
d3.select("svg")
.append("text")
.attr("x",10)
.attr("y",820)
.text("Produced by Jeremy C.F. Lin")
.style({"font-size":"12px",
"font-family":"avenir next",
"font-weight":"500",
"opacity":"0.65",
})
d3.select("svg")
.append("text")
.attr("x", 10)
.attr("y", 805)
.text("Data source: http://energyalmanac.ca.gov/electricity/")
.style({"font-size":"12px",
"font-family":"avenir next",
"font-weight":"500",
"opacity":"0.65",
});
d3.select("svg")
.append("text")
.attr("x", 1263)
.attr("y", 688)
.text("Wind")
d3.select("svg")
.append("text")
.attr("x", 1263)
.attr("y", 718)
.text("Direct Coal Imports")
d3.select("svg")
.append("text")
.attr("x", 1263)
.attr("y", 730)
.text("Biomass")
d3.select("svg")
.append("text")
.attr("x", 1263)
.attr("y", 745)
.text("Solar")
d3.select("svg")
.append("text")
.attr("x", 1263)
.attr("y", 760)
.text("Oil")
d3.select("svg")
.append("text")
.attr("x", 1263)
.attr("y", 775)
.text("Other")
d3.select("svg")
.append("text")
.attr("x",1190)
.attr("y",345)
.style("opacity",0.7)
.style("font-size",10)
.text(" Other Imports include power plants locatd")
d3.select("svg")
.append("text")
.attr("x",1190)
.attr("y",360)
.style("opacity",0.7)
.style("font-size",10)
.text("physically out-of-state as following:")
d3.select("svg")
.append("text")
.attr("x",1190)
.attr("y",375)
.style("opacity",0.7)
.style("font-size",10)
.text("Intermountain Power Plant (coal) in Utah,")
d3.select("svg")
.append("text")
.attr("x",1190)
.attr("y",390)
.style("opacity",0.7)
.style("font-size",10)
.text("Mohave Generation Station (coal) in Nevada,")
d3.select("svg")
.append("text")
.attr("x",1190)
.attr("y",405)
.style("opacity",0.7)
.style("font-size",10)
.text("Terra-Gen Dixie Valley plant (geothermal)")
d3.select("svg")
.append("text")
.attr("x",1190)
.attr("y",420)
.style("opacity",0.7)
.style("font-size",10)
.text("Desert Star Plant (natural gas) in Nevada,")
d3.select("svg")
.append("text")
.attr("x",1190)
.attr("y",435)
.style("opacity",0.7)
.style("font-size",10)
.text("Termoelectrica de Mexicali Plant and")
d3.select("svg")
.append("text")
.attr("x",1190)
.attr("y",450)
.style("opacity",0.7)
.style("font-size",10)
.text("InterGen's La Rosita Plant (natural gas)")
d3.select("svg")
.append("text")
.attr("x",1190)
.attr("y",465)
.style("opacity",0.7)
.style("font-size",10)
.text("both of which are in Mexico.")
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment