Skip to content

Instantly share code, notes, and snippets.

@jchakko

jchakko/index.html

Last active December 7, 2019 08:13
Show Gist options
  • Save jchakko/0fc6cb6cf0227c0e048a061f0c08467f to your computer and use it in GitHub Desktop.
Save jchakko/0fc6cb6cf0227c0e048a061f0c08467f to your computer and use it in GitHub Desktop.
Download ZIP
Wind Energy - Turbine Efficiency Line Graph
Raw
index.html
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<head>
<!-- Load in the d3 library -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
div.tooltip {
position: absolute;
text-align: center;
width: 140px;
height: 50px;
padding: 2px;
font: 12px sans-serif;
background: lightgreen;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
html {
font: normal 100%/1.4 Georgia,serif;
background: #eff4f0;
}
</style>
</head>
<body>
<h1 align = 'center'>United States Wind Energy Production</h1>
<div id="visualization" align="center"></div>
<!--SVG is appended to this div-->
</div>
<h3 align = 'center'>Turbine Data: https://eerscmap.usgs.gov/uswtdb/data/</h3>
<h3 align = 'center'>Energy Production Data: https://windexchange.energy.gov/maps-data/321</h3>
<script>
let margin = {top: 20, right: 20, bottom: 20, left: 50};
let width = (screen.width * 0.60);
let height = (screen.height * 0.55);
let x = d3.scaleLinear().range([0, width]);
let y = d3.scaleLinear().range([height, 0]);
let pathgenerator = d3.line()
.x(function(d) { return x(d.year); })
.y(function(d) { return y(d.megawatts); });
let svg = d3.select("#visualization").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
let div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
d3.csv("turbine_efficiency.csv").then(function(data) {
// format the data
data.forEach(function(d) {
d.year = +d.year;
d.megawatts = +d.megawatts;
d.turbines = +d.turbines;
d.per_bine = +d.per_bine;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([0, d3.max(data, function(d) { return d.megawatts; })]);
// Add the path.
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", pathgenerator)
.style("fill", "none")
.style("stroke", "black");
//Insert Circles
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", 6)
.attr("cx", function(d){return x(d.year);})
.attr("cy", function(d){return y(d.megawatts);})
.style("fill", function(d) {
if(d.per_bine > 1.5) {
return "green";
} else if(d.per_bine > 1) {
return "blue";
} else if(d.per_bine > .5) {
return "orange";
}
return "red";
})
.on("mouseover", function(d) {
div.style("opacity", .9);
div.html("MegaWatts: " + d.megawatts
+ "</br>" + "Turbines: " + d.turbines
+ "</br>" + "MW/T: " + d.per_bine)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.style("opacity", 0);
});
let formatxAxis = d3.format('.0f');
// Add the X Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickFormat(formatxAxis));
// Add the Y Axis
svg.append("g")
.call(d3.axisLeft(y));
}); //End CSV
</script>
</body>
</html>
Raw
turbine_efficiency.csv
year megawatts turbines per_bine
1999 2472.48 6983 0.3541
2000 2539.32 7073 0.3590
2001 4231.77 8903 0.4753
2002 4687.36 9364 0.5006
2003 6349.94 10520 0.6036
2004 6723.12 10849 0.6197
2005 9147.06 12504 0.7315
2006 11574.51 14009 0.8262
2007 16907.05 17212 0.9823
2008 25410.04 22240 1.1425
2009 34863.35 28043 1.2432
2010 40266.96 30995 1.2991
2011 46916.1 34567 1.3573
2012 60005 41281 1.4536
2013 61108 41888 1.4588
2014 65877 44400 1.4837
2015 74472 48700 1.5292
2016 82171 52553 1.5636
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment