-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
291 lines (278 loc) · 17.1 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-140692343-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-140692343-1');
</script>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" type="text/css" />
<link rel="stylesheet" href="static/css/main.css" type="text/css" />
<link rel="stylesheet" href="static/css/dc.min.css" type="text/css" />
<script src="static/js/jquery-3.3.1.min.js"></script>
<script src="static/js/queue.min.js"></script>
<script src="static/js/d3.min.js"></script>
<script src="static/js/crossfilter.min.js"></script>
<script src="static/js/dc.js"></script>
<script src="static/js/d3.tip.min.js"></script>
<script src="static/js/charts.js"></script>
<meta name="viewport" content="width=device-width">
<title>Irelands Energy Balance</title>
</head>
<body>
<!-----------------------------------------------------------------------------------------------------------------Header Content-->
<nav class="navbar navbar-default navbar-fixed-top header_container">
<div class="container-fluid">
<div class="navbar-header">
<h3>Ireland's Energy Balance</h3>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsible-navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="collapsible-navbar">
<ul class="nav navbar-nav navbar-right nav-text">
<li class="menu-item"><a data-toggle="modal" href="#howToModal">How to Use</a></li>
<li class="divider"></li>
<li class="menu-item"><a data-toggle="modal" href="#sourceModal">About the Charts</a></li>
<li class="divider"></li>
<li class="menu-item"><a data-toggle="modal" href="#developerModal">About the Developer</a></li>
<li class="divider"></li>
<li class="menu-item"><a href="javascript:dc.filterAll(); dc.renderAll(); toolTip();">Reset Charts</a></li>
</ul>
</div>
</div>
</nav>
<!---------------------------------------------------------------------------------------------------------Pop Ups-->
<!-- How to Use my_modal modal -->
<div class="my_modal modal fade" id="welcomeModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Welcome to Irelands Energy Balance Dashboard</h4>
</div>
<div class="modal-body">
<h4 class="modal-title">What is it?</h4>
<p>
This dashboard explores Irelands Energy Balance as per the SEAI's <a target="_blank" href="https://www.seai.ie/resources/publications/Energy-in-Ireland-2018.pdf">Energy in Ireland 2018</a> report.
</p>
<hr>
<h4 class="modal-title">How to use it?</h4>
<ul>
<li>The dashboard is best explored on desktop.</li>
<li>All charts are in Tonnes of Oil Equivalent (toe).</li>
<li>Hover the mouse over a data group to reveal additional information on a data group. (Only available on desktop)</li>
<li>Click on a data group to filter the data displayed on the charts.</li>
<li>Click a filtered data group again to remove the group from the filter.</li>
<li>Narrow or widen your filter by selecting or removing a number of data groups.</li>
<li>Filter only works within chart groupings - Final Energy Consumption, Primary Energy Requirements and Transformation.</li>
<li>Reset the charts by clicking the 'Reset Charts' option from the menu. </li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.my_modal modal -->
<!-- How to Use my_modal modal -->
<div class="my_modal modal fade" id="howToModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">How to use the Dashboard</h4>
</div>
<div class="modal-body">
<ul>
<li>The dashboard is best explored on desktop.</li>
<li>All charts are in Tonnes of Oil Equivalent (toe).</li>
<li>Hover the mouse over a data group to reveal additional information on a data group. (Only available on desktop)</li>
<li>Click on a data group to filter the data displayed on the charts.</li>
<li>Click a filtered data group again to remove the group from the filter.</li>
<li>Narrow or widen your filter by selecting or removing a number of data groups.</li>
<li>Filter only works within chart groupings - Final Energy Consumption, Primary Energy Requirements and Transformation.</li>
<li>Reset the charts by clicking the 'Reset Charts' option from the menu. </li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.my_modal modal -->
<!-- About the Charts my_modal modal -->
<div class="my_modal modal fade" id="sourceModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">About the Charts</h4>
</div>
<div class="modal-body">
<h4 class="modal-title">Source of Data</h4>
<p>
The source of the chart data is a report called <a target="_blank" href="https://www.seai.ie/resources/publications/Energy-in-Ireland-2018.pdf">Energy in Ireland 2018</a> which was prepared by <a target="_blank" href="https://www.seai.ie">SEAI</a>, and published in December 2018.
<hr>
<h4 class="modal-title">Chart Development</h4>
<p>The data was downloaded as .xlsx, converted to .json and re-grouped using Python.</p>
<p>
The interactive charts were made using a JavaScript charting library called <a target="_blank" href="http://nickqizhu.github.io/dc.js/">dc.js</a>, which was built to work natively with <a target="_blank" href="http://square.github.com/crossfilter/">crossfilter</a> and leverages <a target="_blank" href="http://d3js.org">d3.js</a> library.
</p>
<p>Bootstrap framework was utilized for responsive page development.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.my_modal modal -->
<!-- About Developer my_modal modal -->
<div class="my_modal modal fade" id="developerModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">About Developer - Dan Casey</h4>
</div>
<div class="modal-body">
<h4 class="modal-title">Bio</h4>
<p>
I have a degree in Energy Engineering from University College Cork,
have worked as an Automation Engineer in a range of progressive energy projects and
am currently completing a diploma in Software Development through The Code Institute.
</p>
<p>
Combining industry experience with web development skills, I hope to help achieve a more efficient, sustainable energy future.
</p>
<h4 class="modal-title">Connect</h4>
<p>
If you would like to connect you can find me on <a target="_blank" href="https://www.linkedin.com/in/danielcaseyengineer/">LinkedIn</a>, where I plan to share similar projects in the future.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.my_modal modal -->
<!---------------------------------------------------------------------------------------------------------Main Content-->
<div class="main_container row">
<div class="row finalEnergyConsumption_container ">
<h4 class="chart_title row">Final Energy Consumption</h4>
<div class="row">
<div class="col-xs-12 col-lg-6 consumptionFuelContainer">
<h5 class="chart_title row">Consumption by Fuel</h5>
<div class="finalEnergyConsumptionFuelChartContainer row">
<div class="col-xs-12 col-sm-6 consumptionByFuelType_rowchart_container ">
<div id="consumptionByFuelType_rowchart" class="dc-chart"></div>
</div>
<div class="col-xs-12 col-sm-6">
<p class="subchart_title">Fuel Breakdown <br />(Inner: Grouped / Outer: Specific)</p>
<div class="consumptionByFuel_sunburst_chart">
<div id="consumptionByFuel_sunburstchart_outer" class="dc-chart"></div>
<div id="consumptionByFuel_sunburstchart_inner" class="dc-chart"></div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-lg-6 consumptionConsumerContainer">
<h5 class="chart_title row">Consumption by Consumer</h5>
<div class="finalEnergyConsumptionConsumerChartContainer row">
<div class="col-xs-12 col-sm-6 consumptionByConsumer_barchart_container">
<div id="consumptionByConsumer_barchart" class="dc-chart"></div>
</div>
<div class="col-xs-12 col-sm-6">
<p class="subchart_title">Consumer Breakdown <br />(Inner: Grouped / Outer: Specific)</p>
<div class="consumptionByConsumer_sunburst_chart">
<div id="consumptionByConsumer_sunburstchart_outer" class="dc-chart"></div>
<div id="consumptionByConsumer_sunburstchart_inner" class="dc-chart"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row primAndTrans_container">
<div class="col-xs-12 col-lg-6 primaryEnergyReq_container">
<h4 class="chart_title row">Primary Energy Requirements</h4>
<h5 class="chart_title row">Requirements by Source</h5>
<div class="primaryEnergyRequirmentChartContainer row">
<div class="col-xs-12 col-sm-6">
<div class="primReqBySource_barchart_container">
<div id="primReqBySource_barchart" class="dc-chart"></div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<p class="subchart_title">Fuel Breakdown <br />(Inner: Grouped / Outer: Specific)</p>
<div class="fuel_primReq_sunburst_chart">
<div id="primReqByFuel_sunburstchart_outer" class="dc-chart"></div>
<div id="primReqByFuel_sunburstchart_inner" class="dc-chart"></div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-lg-6 transformation_container">
<h4 class="chart_title row">Transformation</h4>
<div class="tranformationChartContainer row">
<div class="col-xs-12 col-sm-9">
<div class="transformation_barchart_container">
<div class="tranChart_label_container">
<h5 class="subchart_title">Input<span class="labelOut">Output</span></h5>
<div class="transChart_text_container">
<p class="tranChart_label">Public Thermal Power Plants</p>
<p class="tranChart_label">Oil Refineries & other energy sector</p>
<p class="tranChart_label">Combined Heat and Power Plants</p>
<p class="tranChart_label">Briquetting Plants</p>
<p class="tranChart_label">Pumped Storage</p>
</div>
</div>
<div class="transformation_barchart_bar_container">
<div id="transformationInput_barchart" class="dc-chart"></div>
<div id="transformationOutput_barchart" class="dc-chart"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h5 class="subchart_title">Fuel Inputs</h5>
<div class="transformationInput_piechart_container">
<div id="transformationInputByFuel_piechart" class="dc-chart"></div>
</div>
</div>
<div class="col-xs-6 col-sm-12">
<h5 class="subchart_title">Fuel Outputs</h5>
<div class="transformationOutput_piechart_container">
<div id="transformationOutputByFuel_piechart" class="dc-chart"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!---------------------------------------------------------------------------------------------------------Footer Content-->
<footer class="container footer col-xs-12">
<div class="footer-text">
<p>Developed by <a class="linkedIn-link" data-toggle="modal" href="#developerModal">Dan Casey</a></p>
</div>
</footer>
<!---------------------------------------------------------------------------------------------------------Scripts-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(window).on('load', function () {
$('#welcomeModal').modal('show');
});
</script>
</body>
</html>