forked from jtanwk/us-solar-d3
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (130 loc) · 12.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>🌞 🏠 ⚡</title>
<link rel="stylesheet" type="text/css" href="stylesheets/main.css">
</head>
<body>
<section id="intro">
<h1>Shining a Light on Household Solar Energy Generation</h1>
<p><i>An visual exploration of residential solar panel adoption in the US.<br /> Jonathan Tan, 2019</i><p>
<h2>Introduction</h2>
<p>Investment in renewable energy is such a fascinating policy area. It’s one of the few that feature the interplay of energy as a national utility, yet with semi-reliance on individuals and corporations as contributors to industry supply - e.g. in installing solar panels or, at a greater scale, solar farms.</p>
<p>Much of the national conversation around renewable energy today tends to revolve around switching to low-emission fuel alternatives (say, a regular petrol car vs. a Tesla, or a city transit system switching to electric buses). In many cases, this makes sense - the Department of Energy states that <a href="https://www.energy.gov/eere/electricvehicles/saving-fuel-and-vehicle-costs" target="_blank">“electricity is less expensive than gasoline and [electric vehicles] are more efficient than gasoline vehicles”</a>.</p>
<p>More efficient or not, however, all this does is shift emissions from local consumption (e.g. in your car) to the electrical grid, which itself is mostly generated from non-renewable sources. The <i>generation</i> of energy from renewable sources is a critical part of reducing emissions in a world of accelerating energy consumption. In other words, the question I’m more preoccupied with is: where is all this energy coming from?</p>
<p id="scrollMsg">
<br />
SCROLL TO CONTINUE<br />
▼<br />
▼<br />
▼
</p>
<p id="errMsg"></p>
</section>
<section id='scroll'>
<!-- graphics -->
<div class='scroll__graphic sticky'>
<div class="plotArea is-active" id="chart"></div>
<div class="plotArea" id="mapPlot"></div>
</div>
<!-- text -->
<div class='scroll__text'>
<div class='step is-active' data-step='0'>
<h2>Residential systems are the 2nd-largest source of solar energy in the US.</h2>
<p>In fact, solar energy was the only category of renewable energy that had a "Residential" category in the data.</p>
</div>
<div class='step' data-step='0'>
<h2>Now let's look only at sources of <font color="#FF810F">solar energy</font>.</h2>
<p>While utility-owned solar farms were the largest generators of solar energy in 2016, <font color="#5D2BF0">small-scale residential systems</font> overtook the commercial sector in 2014 to become the 2nd-largest source of solar energy and the 5th-largest source of renewable energy overall.</p>
<p>This group - residential solar panel systems - is the one we'll focus on.</p>
<p>A logical next question is: who’s actually capturing all this solar energy?</p>
</div>
<div class='step' data-step='1'>
<h2><font color="#FF810F">Hawaii</font> generates over 50 times more solar energy per capita than the national median.</h2>
<p>In absolute terms, however, <font color="#FF810F">California</font> was the single largest residential generator - producing 48.6% of total solar energy output in the US in 2016.</p>
<p>What is a bit more of a surprise is how high on the list the Northeast states like <font color="#FF810F">Vermont</font> (#5), <font color="#FF810F">Massachussetts</font> (#6), and <font color="#FF810F">New Jersey</font> (#7) lie, especially in comparison to known sunny states like <font color="#FF810F">Texas</font> (#23) or <font color="#5D2BF0">Florida</font> (#27).</p>
<p>That brings me to my next question: does the amount of sunlight each state receives correlate with the solar energy it generates?</p>
</div>
<div class='step' data-step='2'>
<h2><font color="#5D2BF0">Northeast states</font> generate more solar energy from less sunlight.</h2>
<p>Relative to states in the <font color="#BBBBBB">North Central, South, and West</font> regions, states in the <font color="#5D2BF0">Northeast</font> generated more solar energy in 2016 than what their solar irradiance levels might suggest.</p>
<p><i>(Global Horizontal Irradiance measures the amount of solar radiation each state receives on average in a year, adjusted for land area and other factors.)</i></p>
<p>In particular, there seems to be a lot of unexplained variation towards the lower end of the irradiance range. <font color="#5D2BF0">Vermont</font>, <font color="#5D2BF0">Massachussetts</font>, and <font color="#5D2BF0">New Jersey</font> in particular are generating way more solar energy than neighboring states that get just as much sunlight, if not more.</p>
<p>While there are plenty of factors that impact the efficiency with which you generate solar energy, my immediate guess is that the most straightforward way to ramp up your output is to have more solar panels.</p>
<p>So: which states have the most solar panels?</p>
</div>
<div class='step' data-step='3'>
<h2><font color="#5D2BF0">Northeast states</font> are also surprisingly well-represented in solar panels per capita.</h2>
<p>States like <font color="#5D2BF0">Massachussetts</font>, <font color="#5D2BF0">New Jersey</font>, and <font color="#5D2BF0">Connecticut</font> are among states with the most solar panels per capita in 2016.</p>
<p>There are many reasons why this might vary by state: different solar panel prices, the availability of tax incentives for solar panel owners, the median income, other political factors, etc. I explore a few of these in <a href="https://jtanwk.github.io/us-solar/" target="_blank">the static version of this exploration</a>.</p>
</div>
<div class='step' data-step='4'>
<h2>Plotting per-capita solar panel installations vs. how much solar radiation each county receives:</h2>
<p>Sure enough, while the Northeast region receives the least solar irradiance in the continental United States, it also has disproportionately high solar panel installation rates - even when looking at this on a county level.</p>
<p><i>Mousover each circle to see how many solar panels per 10,000 residents each county has.</i></p>
</div>
</div>
</section>
<section id="outro">
<h2>Credits</h2>
<h3>People</h3>
<p>
Many thanks to Alex Engler and Andrew McNutt for their tireless help with code and design throughout this project.<br />
Many thanks <i>also</i> to my peers in the <a href="http://capp.uchicago.edu" target="_blank">UChicago CAPP program</a> - too many to list individually - who have provided useful feedback and user testing.
</p>
<h3>Data Sources</h3>
<p>
Solar energy generation: <a href="https://www.eia.gov/state/seds/" target="_blank">State Energy Data Systems (SEDS), U.S. Energy Information Administration</a><br />
Solar irradiance: <a href="https://www.nrel.gov/gis/data-solar.html" target="_blank">National Renewable Energy Laboratory, U.S. Department of Energy</a><br />
Solar panel installations: <a href="https://openpv.nrel.gov/" target="_blank">OpenPV Project, NREL, U.S. Department of Energy</a><br />
Population estimates: <a href="https://seer.cancer.gov/popdata/download.html" target="_blank">Surveillance, Epidemiology and End Results (SEER) Program, National Cancer Institute</a><br />
State tax policies: <a href="http://www.dsireusa.org/resources/data-and-tools/" target="_blank">Database of State Incentives for Renewables & Efficiency (DSIRE), North Carolina State University</a><br />
U.S. county-level shapefiles: <a href="https://www.census.gov/geo/maps-data/data/cbf/cbf_counties.html" target="_blank">U.S. Census Bureau</a>
</p>
<h3>Code Sources<h3>
<p>
This project would not have been possible without the multitude of resources available online for learning and implementing D3, including:<br /><br />
<a href="https://d3js.org/" target="_blank">D3 v5</a> by Mike Bostock.<br />
<a href="https://alignedleft.com/work/d3-book" target="_blank"><i>Interactive Data Visualization for the Web (2nd Ed.)</i></a> by Scott Murray.<br />
<a href="https://github.com/russellgoldenberg/scrollama" target="_blank">Scrollama</a> by Russell Goldenberg.<br />
<a href="https://pudding.cool/process/introducing-scrollama/" target="_blank">Extensive implementation details for Scrollama</a> by The Pudding.<br />
<a href="http://wd.dizaina.net/en/scripts/stickyfill/" target="_blank">Stickyfill</a> by Oleg Korsunsky.<br />
<a href="https://github.com/topojson/topojson" target="_blank">TopoJSON library</a> by Mike Bostock.<br />
<a href="https://d3-legend.susielu.com/" target="_blank">D3-legend</a> by Susie Lu.<br />
Code for dynamic sizing adapted from <a href="https://github.com/d3/d3-selection/issues/128" target="_blank">this Github issue</a>.<br >
Code for multi-line charts adapted from <a href="http://bl.ocks.org/asielen/44ffca2877d0132572cb" target="_blank">this block</a>.<br />
Code for wipe-in transitions adapted from <a href="https://github.com/mdvandergon/monetary-policy" target="_blank">Mark Vandergon</a>.<br />
Code for appending annotation lines adapted from <a href="https://stackoverflow.com/questions/25418333/how-to-draw-straight-line-in-d3-js-horizontally-and-vertically" target="_blank">this StackOverflow thread</a>.<br />
Code for wrangling GeoJSON adapted from <a href="https://stackoverflow.com/questions/26232942/get-max-and-min-value-from-a-geojson" target="_blank">this StackOverflow thread</a>.<br />
Code for the map's color scale adapted from <a href="http://bl.ocks.org/jfreyre/b1882159636cc9e1283a" target="_blank">this block</a>.<br />
Code for calculating centroids from GeoJSON adapted from <a href="https://bl.ocks.org/curran/55d327542393530662c3" target="_blank">this block</a>.<br />
Code for working with TopoJSON adapted from <a href="https://bl.ocks.org/almccon/410b4eb5cad61402c354afba67a878b8" target="_blank">this block</a>.<br />
Code for mouseover tooltips adapted from <a href="http://bl.ocks.org/d3noob/a22c42db65eb00d4e369" target="_blank">this block</a>.<br />
</p>
<h3>Project Code</h3>
<p>
All code for this project is hosted on <a href="https://github.com/jtanwk/us-solar-d3" target="_blank">Github</a>.<br />
The more extensive static report that formed the basis for this project, including detailed data assembly scripts in R, can be found <a href="https://jtanwk.github.io/us-solar/" target="_blank">here</a>.<br />
</p>
</section>
<!-- D3 v5.9.1 downloaded on Feb 20, 2019 from https://d3js.org/ -->
<script type="text/javascript" src="js/lib/d3.min.js"></script>
<!-- External packages -->
<script src='https://unpkg.com/[email protected]/intersection-observer.js'></script>
<script src='https://unpkg.com/scrollama'></script>
<script src="https://unpkg.com/topojson@3"></script>
<script src="js/lib/stickyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script>
<!-- Internal scripts -->
<script type="text/javascript" src="js/00-init-svg.js"></script>
<script type="text/javascript" src="js/01-linechart.js"></script>
<script type="text/javascript" src="js/01b-update-linechart.js"></script>
<script type="text/javascript" src="js/02-dotplot.js"></script>
<script type="text/javascript" src="js/03-scatterplot.js"></script>
<script type="text/javascript" src="js/04-barchart.js"></script>
<script type="text/javascript" src="js/05-map.js"></script>
<script type="text/javascript" src="js/05b-update-map.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>