Skip to content

Instantly share code, notes, and snippets.

@jchakko

jchakko/StateProduction.csv

Created December 7, 2019 18:08
Show Gist options
  • Save jchakko/33519a1f470bc4e4d6a05aa6bc676036 to your computer and use it in GitHub Desktop.
Save jchakko/33519a1f470bc4e4d6a05aa6bc676036 to your computer and use it in GitHub Desktop.
Download ZIP
Wind Energy - State Production HBar Chart
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>
html {
background: #eff4f0;
}
.slider {
-webkit-appearance: none;
width: 40%;
height: 10px;
background: #d3d3d3;
outline: none;
}
</style>
</head>
<body>
<h1 align = 'center'>Wind Energy Production by State</h1>
<div id="visualization" align="center"></div>
<!--SVG is appended to this div-->
</div>
<script>
let margin = {top: 20, right: 20, bottom: 20, left: 20};
let width = (screen.width * 0.65);
let height = (screen.height * 0.60);
let svg = d3.select("#visualization").append("svg")
.attr("width", width + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
let currentYear =
svg.append("text")
.attr("x", screen.width * 0.45)
.attr("y", screen.height * 0.05)
.text("1999")
.style("fill","red")
.style("font-size","50px");
let year1999 = "1999";
let year2000 = "2000";
let year2001 = "2001";
let year2002 = "2002";
let year2003 = "2003";
let year2004 = "2004";
let year2005 = "2005";
let year2006 = "2006";
let year2007 = "2007";
let year2008 = "2008";
let year2009 = "2009";
let year2010 = "2010";
let year2011 = "2011";
let year2012 = "2012";
let year2013 = "2013";
let year2014 = "2014";
let year2015 = "2015";
let year2016 = "2016";
let year2017 = "2017";
<!-- Row Converter Function -->
function parseRow(d){
let newRow = {}
newRow.State = d.State;
newRow[year1999] = parseInt(d[year1999].replace(/,/g, ''));
newRow[year2000] = parseInt(d[year2000].replace(/,/g, ''));
newRow[year2001] = parseInt(d[year2001].replace(/,/g, ''));
newRow[year2002] = parseInt(d[year2002].replace(/,/g, ''));
newRow[year2003] = parseInt(d[year2003].replace(/,/g, ''));
newRow[year2004] = parseInt(d[year2004].replace(/,/g, ''));
newRow[year2005] = parseInt(d[year2005].replace(/,/g, ''));
newRow[year2006] = parseInt(d[year2006].replace(/,/g, ''));
newRow[year2007] = parseInt(d[year2007].replace(/,/g, ''));
newRow[year2008] = parseInt(d[year2008].replace(/,/g, ''));
newRow[year2009] = parseInt(d[year2009].replace(/,/g, ''));
newRow[year2010] = parseInt(d[year2010].replace(/,/g, ''));
newRow[year2011] = parseInt(d[year2011].replace(/,/g, ''));
newRow[year2012] = parseInt(d[year2012].replace(/,/g, ''));
newRow[year2013] = parseInt(d[year2013].replace(/,/g, ''));
newRow[year2014] = parseInt(d[year2014].replace(/,/g, ''));
newRow[year2015] = parseInt(d[year2015].replace(/,/g, ''));
newRow[year2016] = parseInt(d[year2016].replace(/,/g, ''));
newRow[year2017] = parseInt(d[year2017].replace(/,/g, ''));
return newRow;
}
d3.csv("StateProduction.csv", parseRow).then(
function(data){
console.log(data);
<!-- Setup Margins -->
let margin = {
top: 10,
right: 20,
bottom: 20,
left: 150
};
<!-- Setup distance variables -->
width = width - margin.left - margin.right;
height = height - margin.top - margin.bottom;
<!-- Setup SVG Container -->
graph = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
<!-- Set up max value -->
let sizeMax = d3.max(data, function(d) {return d[year2017];});
<!-- Set up data map -->
let states = data.map(function(d){return d.State});
<!-- Set up scales -->
let yScale = d3.scaleBand().domain(states).range([0,height]).padding(0.1);
let xScale = d3.scaleLinear().domain([0, sizeMax]).range([0,width]);
<!-- Colors -->
let colorScale = d3.scaleOrdinal().range(d3.schemeCategory10);
<!-- Calculate Starting Stats -->
let ofirst = d3.max(data, function(d) {return d[year1999];});
let oavg = d3.mean(data, function(d) {return d[year1999];});
<!-- Add Bars -->
graph.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", function(d){return 0;})
.attr("y", function(d){return yScale(d.State);})
.attr("height", yScale.bandwidth())
.attr("width", function(d){return xScale(d[year1999]);})
.style("fill", function(d) {
if(d[year1999] == ofirst) {
return "gold";
}
return "silver";
});
<!-- Setup Axis -->
let xAxis = d3.axisBottom(xScale)
.tickFormat(function(d) {return d+"MW";});
graph.append("g")
.attr("transform", "translate(0,"+height+")")
.call(xAxis)
let yAxis = d3.axisLeft(yScale);
graph.append("g")
.call(yAxis)
.selectAll("text")
.style("text-anchor","end")
let slider = document.getElementById("myRange");
slider.oninput = function() {
let year = this.value;
console.log(year);
currentYear.text(year);
let first = d3.max(data, function(d) {return d[year];});
let avg = d3.mean(data, function(d) {return d[year];});
graph.selectAll("rect")
.attr("width", function(d){return xScale(d[year]);})
.style("fill", function(d) {
if(d[year] == first) {
return "gold";
} else if(d[year] > avg) {
return "silver";
} else {
return "#cd7f32";
}
});
}
}
);
</script>
<div class="slidecontainer" align = "center">
<input type="range" min="1999" max="2017" value="1999" class="slider" id="myRange">
</div>
<h3 align = 'center'>Source: https://windexchange.energy.gov/maps-data/321</h3>
</body>
</html>
Raw
StateProduction.csv
State 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017
California 1,615.99 1,615.99 1,683.09 1,823.07 2,024.91 2,094.98 2,149.46 2,376.11 2,439.11 2,536.71 2,797.95 3,252.61 3,917.00 5,542.00 5,830.00 5,917.00 6,108.00 5,662.00 5,561.00
Colorado 21.6 21.6 61.2 61.2 223.2 230.7 230.75 290.75 1,066.75 1,067.65 1,244.25 1,298.55 1,805.00 2,301.00 2,332.00 2,593.00 2,992.00 3,026.00 3,029.00
Hawaii 1.555 1.555 1.555 8.555 8.555 8.555 8.555 42.115 63.115 63.115 63.115 63.115 92 206 206 206 203 203 206
Idaho 0 0 0 0 0.216 0.216 75.216 75.316 75.316 75.64 146.824 352.516 618 973 973 973 973 973 973
Illinois 0 0 0 0 50.4 51.06 107.16 107.16 699.37 915.07 1,547.47 2,044.56 2,742.00 3,568.00 3,568.00 3,568.00 3,842.00 4,026.00 4,026.00
Indiana 0 0 0 0 0 0 0 0 0 130.5 1,035.95 1,339.15 1,340.00 1,543.00 1,544.00 1,745.00 1,895.00 1,895.00 1,997.00
Iowa 242.42 242.42 324.17 422.65 471.82 633.993 836.303 932.228 1,272.93 2,791.18 3,603.93 3,674.93 4,322.00 5,133.00 5,178.00 5,688.00 6,212.00 6,917.00 6,974.00
Kansas 1.5 1.5 113.7 113.7 113.7 113.7 263.7 364.2 364.2 921 1,021.00 1,074.00 1,274.00 2,713.00 2,967.00 2,967.00 3,766.00 4,451.00 5,110.00
Maine 0.1 0.1 0.1 0.1 0.1 0.1 0.1 9.1 42.11 46.61 174.71 266.2 397 431 431 440 613 901 901
Maryland 0 0 0 0 0 0 0 0 0 0 0 70 120 120 120 160 190 190 191
Massachusetts 0.3 0.3 0.98 0.98 0.98 0.98 1.08 3.54 5.04 5.74 14.97 17.69 47 103 106 107 107 115 115
Michigan 0.6 0.6 2.4 2.4 2.4 2.4 2.595 2.595 2.595 144.395 138.495 164.395 377 988 1,163.00 1,531.00 1,531.00 1,611.00 1,760.00
Minnesota 273.39 291.21 319.8 337.7 558.25 600.1 745.4 895.85 1,299.79 1,752.85 1,810.05 2,205.37 2,718.00 2,987.00 2,987.00 3,035.00 3,235.00 3,526.00 3,499.00
Missouri 0 0 0 0 0 0 0 0 61.7 162.5 308.5 457 459 458 459 459 459 659 659
Montana 0.1 0.1 0.1 0.36 1.145 1.145 136.86 145.86 152.895 271.495 374.995 385.53 386 645 645 665 665 685 695
Nebraska 2.82 2.82 2.82 13.98 13.98 13.98 73.38 73.38 71.88 116.88 152.88 212.88 337 459 534 812 890 1,328.00 1,335.00
New Mexico 0.66 0.66 0.66 0.66 205.98 265.98 405.98 495.98 495.98 497.48 597.48 699.88 750 778 778 812 1,080.00 1,112.00 1,383.00
New York 0 18.2 48.15 48.45 48.45 48.45 185.5 370.3 424.8 831.8 1,274.30 1,274.30 1,403.00 1,638.00 1,722.00 1,748.00 1,749.00 1,827.00 1,829.00
North Carolina 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 208
North Dakota 0.39 0.39 0.39 4.79 66.29 66.29 97.79 178.335 344.835 714.495 1,202.60 1,423.63 1,445.00 1,680.00 1,681.00 1,886.00 2,143.00 2,746.00 2,996.00
Ohio 0 0 0 0 3.6 7.2 7.2 7.425 7.425 7.425 7.425 9.625 112 428 428 435 443 545 545
Oklahoma 0 0 0 0 176.25 176.25 474.5 534.5 689 708.05 1,031.15 1,481.80 2,007.00 3,134.00 3,134.00 3,782.00 5,184.00 6,645.00 6,645.00
Oregon 25.08 25.08 156.84 218.34 259.34 262.64 337.64 438.14 885.39 1,067.19 1,758.14 2,103.64 2,513.00 3,153.00 3,153.00 3,153.00 3,153.00 3,163.00 3,213.00
Pennsylvania 0.13 10.53 34.53 34.53 129.03 129.03 129.03 179.03 293.53 360.73 748.23 748.23 789 1,340.00 1,340.00 1,340.00 1,340.00 1,369.00 1,369.00
South Dakota 0 0 2.6 3.014 44.264 44.264 44.264 44.264 98.264 186.764 313.164 709.164 784 783 783 803 977 977 977
Texas 183.52 183.52 1,095.76 1,095.76 1,290.26 1,290.26 1,992.07 2,735.77 4,353.37 7,112.67 9,403.37 10,089.43 10,394.00 12,214.00 12,355.00 14,098.00 17,713.00 20,321.00 21,450.00
Utah 0 0.225 0.225 0.225 0.225 0.225 0.885 0.885 0.885 19.785 223.285 223.285 325 325 325 325 327 391 391
Vermont 6.05 6.05 6.05 6.05 6.05 6.05 6.05 6.05 6.05 6.05 6.15 6.15 46 119 119 119 119 119 119
Washington 0 0 180.18 228.28 243.88 240.58 389.98 818.08 1,163.18 1,374.98 1,848.88 2,104.38 2,573.00 2,808.00 2,808.00 3,075.00 3,075.00 3,075.00 3,075.00
West Virginia 0 0 0 66 66 66 66 66 146 330 330 430.5 564 583 583 583 583 686 686
Wisconsin 22.98 22.98 52.98 52.98 52.98 53.045 53.045 53.045 53.045 448.985 449.085 468.895 631 648 648 648 648 648 648
Wyoming 72.515 90.635 140.635 140.635 284.635 284.635 288.455 288.455 288.455 676.255 1,099.26 1,412.26 1,412.00 1,410.00 1,410.00 1,410.00 1,410.00 1,490.00 1,489.00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment