-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
936 lines (830 loc) · 55.2 KB
/
index.html
File metadata and controls
936 lines (830 loc) · 55.2 KB
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
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
<html>
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="./lib/loading/loading.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./mapdata/jquery-csv/src/jquery.csv.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/e5683e4490.js" crossorigin="anonymous"></script>
</head>
<body oncontextmenu="javascript:reset();return false;">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="zoom:90%">
<img src="./assets/Logo_Universität_Bern.png" width="360px" height="91px" class="icon-swiss"></img>
<a href="/index.html" class="navbar-brand text-white">Recipients of feed-in Remuneration (KEV) - Open Data
Project 2022</a>
<ul class="nav nav-tabs ml-auto no style" style="border-bottom:0px" id="myTab">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#visualization"><i
class="fa-solid fa-chart-column mr-2"></i>Visualization</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#information">
<i class="fa-solid fa-circle-exclamation mr-2"></i>Information</a>
</li>
<li class="nav-item">
<a class="nav-link " data-toggle="tab" href="#datasource"><i class="fa-solid fa-oil-well mr-2"></i>Data
source</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#contact" id="change"><i
class="fa-solid fa-id-card mr-2"></i>About</a>
</li>
</ul>
</nav>
<div class="container-fluid mt-0 px-0 mx-0">
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="visualization">
<div class="row container-fluid mx-0 px-0" style="height: 100%;">
<div class="card col px-0"
style="height: 100%; border-left:hidden; border-bottom: hidden; border-right:hidden">
<div id="statistics"><svg id="statsvg" style="position: absolute"></svg></div>
<div id="svgcontainer">
<div id="map"></div>
<div id="loader">
<svg id="loading" width="960" height="500">
<defs>
<clipPath id="clip-upper">
<rect id="loadingrect" width="960" height="305" x="-480" y="-305"></rect>
</clipPath>
<clipPath id="clip-lower">
<rect id="loadingrect" width="960" height="195" x="-480" y="0"></rect>
</clipPath>
</defs>
<g clip-path="url(#clip-upper)" transform="translate(480,305)"></g>
<g clip-path="url(#clip-lower)" transform="translate(480,305)"></g>
</svg>
</div>
</div>
</div>
<div id="geoui" class="card col col-md-auto py-1 px-1 bg-secondary"
style="zoom:95%; overflow: hidden; border-top-right-radius: 0;">
<ul class="nav no style" style="overflow:hidden">
<div class="card col col-md-auto py-0 px-0 pr-1 bg-secondary"
style="text-align: center; border-color:transparent">
<text id="Title" class="bg-dark rounded-top">Year</text>
<div class="list-group list-group" role="tablist">
<a class="list-group-item list-group-item-action rounded-0 active" data-toggle="list"
onclick="updateValues('', '2011', null,'')" href="">2011</a>
<a class="list-group-item list-group-item-action" data-toggle="list"
onclick="updateValues('', '2012', null,'')" href="">2012</a>
<a class="list-group-item list-group-item-action" data-toggle="list"
onclick="updateValues('', '2013', null,'')" href="">2013</a>
<a class="list-group-item list-group-item-action" data-toggle="list"
onclick="updateValues('', '2014', null,'')" href="">2014</a>
<a class="list-group-item list-group-item-action" data-toggle="list"
onclick="updateValues('', '2015', null,'')" href="">2015</a>
<a class="list-group-item list-group-item-action" data-toggle="list"
onclick="updateValues('', '2016', null,'')" href="">2016</a>
<a class="list-group-item list-group-item-action" data-toggle="list"
onclick="updateValues('', '2017', null,'')" href="">2017</a>
<a class="list-group-item list-group-item-action" data-toggle="list"
onclick="updateValues('', '2018', null,'')" href="">2018</a>
<a class="list-group-item list-group-item-action" data-toggle="list"
onclick="updateValues('', '2019', null,'')" href="">2019</a>
<a class="list-group-item list-group-item-action" data-toggle="list"
onclick="updateValues('', '2020', null,'')" href="">2020</a>
<a class="list-group-item list-group-item-action" data-toggle="list"
onclick="updateValues('', '2021', null,'')" href="">2021</a>
</div>
</div>
<div class="card col col-md-auto py-0 px-0 bg-secondary"
style="text-align: center; border-color:transparent">
<select id="selectOptions" class="form-select bg-dark rounded"
style="border:none; text-align: center; color:white; font-family: 'Roboto', sans-serif; font-size: 18; padding-bottom: 2.73mm; padding-top: 2.73mm;"
aria-label=".form-select-lg example">
<option id="selection " selected value="dataset1">Country</option>
<option id="selection " value="dataset2">Canton</option>
<option id="selection " value="dataset3">Municipalities</option>
</select>
<div style="margin-bottom: 1.7mm; margin-top: 1.5mm;">
<text id="Title" class="bg-dark rounded-top">Indicator</text>
<div class="list-group" role="tablist">
<a class="list-group-item list-group-item-action rounded-0 active" data-toggle="list"
onclick="updateValues('Leistung_kw', '', null,'')" href="">Possible Output</a>
<a class="list-group-item list-group-item-action" data-toggle="list"
onclick="updateValues('Produktion_kwh', '', null,'')" href="">Production</a>
<a class="list-group-item list-group-item-action" data-toggle="list"
onclick="updateValues('Verguetung_chf', '', null,'')" href="">Remuneration</a>
</div>
</div>
<div>
<text id="Title" class="bg-dark rounded-top">Function</text>
<div class="list-group" role="tablist">
<a class="list-group-item list-group-item-action rounded-0 active" data-toggle="list"
onclick="updateValues('', '', 0,'')" href="">Highest</a>
<a class="list-group-item list-group-item-action" data-toggle="list"
onclick="updateValues('', '', 1,'')" href="">Lowest</a>
<a class="list-group-item list-group-item-action" data-toggle="list"
onclick="updateValues('', '', 2,'')" href="">Mean</a>
<a class="list-group-item list-group-item-action" data-toggle="list"
onclick="updateValues('', '', 3,'')" href="">Standarddev.</a>
<a class="list-group-item list-group-item-action" data-toggle="list"
onclick="updateValues('', '', 4,'')" href="">Count</a>
<a class="list-group-item list-group-item-action" data-toggle="list"
onclick="updateValues('', '', 5,'')" href="">Summation</a>
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="information" style="text-align:center">
<ul id="subbar" class="nav nav-tabs ml-auto bg-secondary"
style="border-bottom:0px; zoom:85%; justify-content:center" id="myTab">
<li class="nav-item" style="margin-top: 6px;" id="first">
<a class="nav-link active" data-toggle="tab" href="#KEV">Background</a>
</li>
<li class="nav-item" style="margin-top: 6px;">
<a class="nav-link" data-toggle="tab" href="#Categories">
Energy Categories</a>
</li>
<li class="nav-item" style="margin-top: 6px;">
<a class="nav-link" data-toggle="tab" href="#Explanation">
Manual</a>
</li>
<li class="nav-item" style="margin-top: 6px;">
<a class="nav-link" data-toggle="tab" href="#Scope">
Scope & Functions</a>
</li>
<li class="nav-item" style="margin-top: 6px;">
<a class="nav-link " data-toggle="tab" href="#Interpretation">Observations</a>
</li>
<li class="nav-item" style="margin-top: 6px;">
<a class="nav-link " data-toggle="tab" href="#Implementation">Implementation</a>
</li>
</ul>
<div role="tabpanel" class="tab-pane fade active show" style="position:absolute; width: 100%; height:100%"
id="KEV">
<div class="p-0 m-0 text-center bg-image" style="
background-image: url('assets/gebaeude_solarpanels_photovoltaik_shutterstock_278061698_16-92.png');
height: 100%; width:100%; background-size: contain; background-repeat: no-repeat;background-size: cover; display: block;
position: absolute;
left: 0;
top: 0;">
<div class="container" id="home" style="height: 100%;">
<div class="content">
<div class="row bg-light">
<div class="col-md-12" style="margin-top:15px">
<h1 style="font-weight: 600;">Cost-covering feed-in remuneration (KEV)</h1>
<h5 style="font-weight: 600;">What is it in short?</h5>
<p>The abbreviation KEV stands for the German term "Kostendeckende Einspeisevergütung " or in
English
"cost-covering feed-in remuneration". It is a federal instrument used to promote electricity
production from renewable energies.</p>
<h5 style="font-weight: 600;">History</h5>
<p>On June 26, 2009, a support system was created in Switzerland to increase the expansion of
electricity generation from renewable sources. The goal of the federal government was to keep
investments in the construction of plants for the generation of electricity from renewable
energies
as low as possible and to provide incentives for the rapid expansion of Switzerland's renewable
energy infrastructure.
The KEV subsidy program was very successful right from the start: an administrative bottleneck
quickly formed for applications at the Swiss Federal Office of Energy. At times, more than
37,000
plants were waiting on a waiting list for the financing subsidies for plant construction, as the
Aargauer Zeitung reported. It was just as quickly foreseeable that the legally available
subsidies
would be exhausted as early as 2018. However, with the Energy Strategy 2050, the parliament
found a
follow-up legislation that led to the replacement of the KEV by the Feed-in remuneration-system
(EVS) and the introduction of the direct marketing obligation for certain energy sources and
plant
sizes.
</p>
<h5 style="font-weight: 600;">How does it work?</h5>
<p>The KEV subsidies are and were financed by a pay-as-you-go surcharge on the high-voltage grids
of
CHF 0.015.- per kilowatt hour; with the new version of the Energy Act of January 1, 2018, this
amount increased to CHF 0.023.- which is paid by all electricity consumers per kilowatt hour
consumed. The grid surcharge fund thus fed was administered by the "Cost-covering feed-in
remuneration" foundation until the beginning of 2018; since then, UVEK (Federal Department of
the
Environment, Transport, Energy and Communications) has taken over the administration. </p>
</div>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" style="position:absolute; width: 100%; height:100%" id="Categories">
<div class="p-0 m-0 text-center bg-image" style="
background-image: url('assets/gebaeude_solarpanels_photovoltaik_shutterstock_278061698_16-92.png');
height: 100%; width:100%; background-size: contain; background-repeat: no-repeat;background-size: cover; display: block;
position: absolute;
left: 0;
top: 0; z-index: 999">
<div class="container-fluid">
<div class="row" style="padding-top:15px">
<div class="col-xl-3 col-sm-6 px-1 d-flex align-items-stretch" style="opacity:95%;">
<div class="card border-light">
<div class="card-header text-center my-0 py-1">
<h4 class="my-0 py-0">Photovoltaic</h4>
</div>
<div class="card-body bg-dark text-white rounded-bottom">
<h5>Attached photovoltaic plant</h5>
<p>The solar PV system is directly integrated with the electricity infrastructure. This is the
cheapest mode of going solar but you are still dependent on energy from the grid since you have
no way of storing it.</p>
<h5>Integrated photovoltaic plant</h5>
<p>The solar PV system is directly integrated with the electricity infrastructure and has its own
battery back-up to store excess electricity that is generated. More expensive but less
dependence on the grid.
</p>
<h5>Detached photovoltaic plant</h5>
<p>Completely detached from the electricity infrastructure, in this context it would probably
still be able to feed energy but not consume any. Ideal for remote locations but generally the
most pricey option.
</p>
<h5>More information</h5>
<div class="list-group bg-dark">
<a href="https://science.nasa.gov/science-news/science-at-nasa/2002/solarcells#:~:text=Photovoltaics%20is%20the%20direct%20conversion,of%20light%20and%20release%20electrons."
class="list-group-item list-group-item-action bg-dark px-0 py-0 border-0 mb-1"
style="color: white;">
<p>Photovoltaics</p>
</a>
<a href="https://minusco2.in/solarinsider/types-of-solar-pv-systems/"
class="list-group-item list-group-item-action bg-dark px-0 py-0 border-0 mb-1"
style="color: white;">
<p>Integrated, Attached, Detached</p>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 px-1 d-flex align-items-stretch" style="opacity:95%;">
<div class="card border-light">
<div class="card-header text-center my-0 py-1">
<h4 class="my-0 py-0">Hydropower</h4>
</div>
<div class="card-body bg-dark text-white rounded-bottom">
<h5>Drinking water hydropower plant</h5>
<p class="">Hydroelectricity production from a turbine utilizing water from the drinking water
supply lines.</p>
<h5>Flow hydropower plant</h5>
<p class="">Hydroelectricity production from a turbine most commonly utilizing the current of a
river.
</p>
<h5>Doping hydropower plant</h5>
<p class="">Hydroelectricity production from a turbine most commonly utilizing a hydroelectric dam
for blocking water. Electricity is produced by releasing water from the reservoir through a
turbine, which activates a generator
</p>
<h5>Diversion hydropower plant</h5>
<p class="">Channels a portion of a river through a canal and/or a penstock to utilize the natural
decline of the riverbed elevation to produce energy.
</p>
<h5>More information</h5>
<div class="list-group bg-dark">
<a href="https://www.energy.gov/eere/water/types-hydropower-plants#:~:text=There%20are%20three%20types%20of,renewable%20energy%20to%20the%20grid."
class="list-group-item list-group-item-action bg-dark px-0 py-0 border-0 mb-1"
style="color: white;">
<p>Doping, Diversion</p>
</a>
<a href="https://www.hydropower.org/iha/discover-types-of-hydropower"
class="list-group-item list-group-item-action bg-dark px-0 py-0 border-0 mb-1"
style="color: white;">
<p>Flow</p>
</a>
<a href="https://www.alpiq.com/power-generation/new-renewable-energy-sources/small-scale-hydropower-plants/tomils"
class="list-group-item list-group-item-action bg-dark px-0 py-0 border-0 mb-1"
style="color: white;">
<p>Drinking water</p>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 px-1 d-flex align-items-stretch" style="opacity:95%;">
<div class="card border-light">
<div class="card-header text-center my-0 py-1" s>
<h4 class="my-0 py-0">Biomass</h4>
</div>
<div class="card-body bg-dark text-white rounded-bottom">
<h5>Steam biomass plant</h5>
<p class="" id="biomass">Burns biomass directly to produce high-pressure steam that drives a
turbine generator to make electricity.</p>
<h5>Sewage gas power plant</h5>
<p class="" id="biomass">Sewage sludge is loaded into airtight tanks called anaerobic digesters.
As bacteria digests the sewage, methane (a natural gas) is produced. The methane is piped into
large engines which produce heat and electricity.
</p>
<h5>CHP power plant</h5>
<p class="" id="biomass">Fuel cell CHP technology generates electricity by taking energy from fuel
at a chemical level. It uses a steam reformer to convert methane in the gas supply into carbon
dioxide and hydrogen. The hydrogen then reacts with oxygen in the fuel cell to produce
electricity.
</p>
<h5>Wastewater power plant</h5>
<p class="" id="biomass">Organic waste decomposes in an oxygen-free environment and releases
methane gas. This methane can be captured and used to produce energy, instead of being released
into the atmosphere.
</p>
<h5>Waste incineration plant</h5>
<p class="" id="biomass">Waste-to-energy plants use garbage as a fuel for generating power, much
like other power stations use coal, oil or natural gas. The burning of the waste heats water and
the steam drives a turbine to generate electricity.
</p>
<h5>Landfill gas plant</h5>
<p class="" id="biomass">Landfills are a method to dispose of municipal or household solid wastes.
These wastes are held in oxygen-free environments and can produce large amounts of mainly
methane gas, which in turn can be used to produce energy.
</p>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 px-1 d-flex align-items-stretch" style="opacity:95%">
<div class="card border-light ">
<div class="card-header text-center my-0 py-1">
<h4 class="my-0 py-0">Wind & Geothermal</h4>
</div>
<div class="card-body bg-dark text-white rounded-bottom">
<h5>Wind turbine</h5>
<p class="">An installation that converts the kinetic energy of wind into electrical energy.</p>
<h5>Geothermal power plant</h5>
<p class="">Geothermal power plants use steam to produce electricity. The steam comes from
reservoirs of hot water found a few miles or more below the earth's surface. The steam rotates a
turbine that activates a generator, which produces electricity.
</p>
<h5>More Information</h5>
<div class="list-group bg-dark">
<a href="https://tinyurl.com/5bf5exk2"
class="list-group-item list-group-item-action bg-dark px-0 py-0 border-0 mb-1"
style="color: white;">
<p>Wind turbines</p>
</a>
<a href="https://tinyurl.com/3ev99r6h"
class="list-group-item list-group-item-action bg-dark px-0 py-0 border-0 mb-1"
style="color: white;">
<p>Geothermal power plants</p>
</a>
</div>
<span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" style="position:absolute; width: 100%; height:100%" id="Explanation">
<div class="p-0 m-0 text-center bg-image" style="
background-image: url('./assets/hydropower.png');
height: 100%; width:100%; background-size: contain; background-repeat: no-repeat;background-size: cover; display: block;
position: absolute;
left: 0;
top: 0;">
<div class="container" id="home" style="height: 100%;">
<div class="content">
<div class="row bg-light">
<div class="col-md-12" style="margin-top:15px">
<h5 style="font-weight: 600;">Visualization</h5>
<p>Visual representations help us to understand and interpret complex data. This visualization tries
to capture as many different angles and levels on the main indicators as possible, by allowing the
selection of different functions used on the main dataset. The main levels are country-wide,
canton-wide, municipality-wide. The main attributes are output in kW, production in kWh and
remuneration in CHF. </p>
<h5 style="font-weight: 600;">Specification</h5>
<span style="font-size:0.9vw; display:block;">The usable functions are as follows:</span>
<span style="font-size:0.9vw; display:block;">• The <a style="font-weight:800">Highest</a> value for
<a style="font-weight:800">a</a> recipient on the <a style="font-weight:800">selected level</a>
and for a <a style="font-weight:800">selected attribute</a>. </span>
<span style="font-size:0.9vw; display:block;"> • The <a style="font-weight:800">Lowest</a> value for
<a style="font-weight:800">a</a> recipient on the <a style="font-weight:800">selected level</a>
and for a <a style="font-weight:800">selected attribute</a>.</span>
<span style="font-size:0.9vw; display:block;">• The <a style="font-weight:800">Mean</a> of <a
style="font-weight:800">all</a> recipients on the <a style="font-weight:800">selected level</a>
and for a <a style="font-weight:800">selected attribute</a> .</span>
<span style="font-size:0.9vw; display:block;">• The <a style="font-weight:800">Standard
deviation</a> of <a style="font-weight:800">all</a> recipients on the <a
style="font-weight:800">selected level</a> and for a <a style="font-weight:800">selected
attribute.</a></span>
<span style="font-size:0.9vw; display:block;">• The <a style="font-weight:800">Count</a> of <a
style="font-weight:800">all</a> recipients on the <a style="font-weight:800">selected level</a>
and for a <a style="font-weight:800">selected attribute</a>.</span>
<span style="font-size:0.9vw; display:block;">• The <a style="font-weight:800">Sum</a> of <a
style="font-weight:800">all</a> recipients on the <a style="font-weight:800">selected level</a>
and for a <a style="font-weight:800">selected attribute</a>.</span>
<p></p>
<p>While you can select dynamically from these functions, the colour bar below, the ticks as well as
intervals change correspondingly. This and the colouring are mainly used for comparison of the
values between the different cantons and municipalities. It must be noted that the colouring was
done using a logarithmic scale since the outliers inside the dataset were so high that trying to
use a linear scale proved futile. This causes colouring of the higher values to be more in line
with the lower ones and might seem confusing, but a decision had to be made and the logarithmic
scale seemed to be the best option. </p>
<p>While an area is selected the pie charts on the left show the distribution of the count value
into the different energy types and installation types. Energy and installation types which occur
together are colour coded in the same way. E.g., photovoltaic energy has a colour yellow and is
the parent of the plant types: attached, integrated, and detached photovoltaic plant, which are
all coloured in different shades of yellow. Meanwhile right next to it, the name of the selection
is shown and with it the value for the selected year, function and attribute that is being
observed.</p>
<p>Consult the representation on the tab "Scope & Functions" for a better understanding.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" style="position:absolute; width: 100%; height:100%" id="Scope">
<div class="p-0 m-0 text-center bg-image" style="
background-image: url('./assets/Icelandgeoplant.png');
height: 100%; width:100%; background-size: contain; background-repeat: no-repeat;background-size: cover; display: block;
position: absolute;
left: 0;
top: 0;">
<div class="container" id="home" style="height: 100%; overflow-x:scroll;">
<div class="content" style="opacity:95%">
<div class="row bg-light" style="opacity:95%">
<div class="col-md-12 " style="margin-top:15px; margin-bottom: 15px; opacity: 95%;">
<img src="./assets/Visualization description.drawio (1).png"
style="width:auto;height:auto; max-width: 100%;" alt="Italian Trulli">
<!-- "width:1100px;height:490px;" -->
</div>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" style="position:absolute; width: 100%; height:100%"
id="Interpretation">
<div class="p-0 m-0 text-center bg-image" style="
background-image: url('./assets/hydropower.png');
height: 100%; width:100%; background-size: contain; background-repeat: no-repeat;background-size: cover; display: block;
position: absolute;
left: 0;
top: 0;">
<div class="container-fluid">
<div class="row" style="padding-top:15px">
<div class="col-xl-4 col-sm-6 px-1 d-flex align-items-stretch">
<div class="card border-light" style="opacity:95%">
<div class="card-header text-center my-0 py-1" style="opacity:95%">
<h4 class="my-0 py-0">Country</h4>
</div>
<div class="card-body bg-dark text-white rounded-bottom" style="opacity:95%">
<h5>More power more remuneration</h5>
<p>Since the first remuneration recipient entry (KEV) the dataset in 2011, the country wide sum of
the Output in kW is nearly 8 times larger in 2021, while the Production in kWh has more than
quadrupled. Remuneration on the other hand has its peak with a 4 times larger value in the first
quarter of 2020 and then nearly halves from its previous gain in 2021. All the indicators seem
to lose gain between 2020 and 2021, the reason for this is unknown.</p>
<h5>Continuous increase</h5>
<p>The count of installations steadily increases from 2011 with 2’860 to 2016 with 12’385, nearly
quadrupling its value, while falling completely flat after that and only increasing by a few
200s every year. This may be due to a stop of accepting new contracts.
</p>
<h5>And then came the light</h5>
<p> While in 2011 there were 2440 photovoltaic installations registered as recipients of feed-in
remunerations which at this time equals about 6/7th of all installations. In 2021 there are
12069 photovoltaic installations, with a share of about 11/12th of all installations. With approximately 5x as
many installations photovoltaic ones also received a much larger percentual increase than all the other
types, with the next larger one being around 3x as many.
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-sm-6 px-1 d-flex align-items-stretch">
<div class="card border-light" style="opacity:95%">
<div class="card-header text-center my-0 py-1" style="opacity:95%">
<h4 class="my-0 py-0">Canton</h4>
</div>
<div class="card-body bg-dark text-white rounded-bottom" style="opacity:95%">
<h5>A sustainable Bern</h5>
<p class="">Starting from 2013 on and overtaking Graubünden, Bern seems to have the highest
possible output, not only for all entries summed up, but also for an individual entry. Even
though this is the case, for the actual amount produce in kWh it is alway competing directly
with Graubünden and from 2018 on even with Wallis. Even though Bern has around 4 times as many
installations than the opposition.</p>
<h5>Polarization</h5>
<p class="">During all observed years, the southeast of Switzerland has the largest amount and
percentage of hydropower installations registered, while the northwest has the highest
percentage of solar installations. The middle of Switerland seems be a mixed bag of both, but
increasingly using solar.
</p>
<h5>Outliers</h5>
<p class=""> During all observed years, Graubünden seemed to have the largest standarddeviation of
remuneration received, starting in 2011 with 1'800k and and in 2018 meeting with canton Uri and
Wallis, all with a Remuneration standard deviation of around 600k. The same goes through for
overall production in a year which were similarily high for their category.
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-sm-6 px-1 d-flex align-items-stretch">
<div class="card border-light" style="opacity:95%">
<div class="card-header text-center my-0 py-1" style="opacity:95%">
<h4 class="my-0 py-0">Municipality</h4>
</div>
<div class="card-body bg-dark text-white rounded-bottom" style="opacity:95%">
<h5>Stagnated output</h5>
<p class="">During all observed years there are more and more installations in muncipality were
previously the output was low. Which reults in the map from being grey to more fully yellow. But
the overall highest output from one installation has only gone up around 1k. This might also be
due to a data error, where the PLZ4 was wrongly maintained since, the overal highest value on
the country-level was around 10k larger in 2021.</p>
<h5>Polarization</h5>
<p class="">During all observed years, the southeast of Switzerland has the largest amount and
percentage of hydropower installations registered, while the northwest has the highest
percentage of solar installations. The middle of Switerland seems be a mixed bag of both, but
increasingly using solar.
</p>
<h5>Domat</h5>
<p class="">Domat seems to have the highest prodution entry over all observed years, with
Lütschental, Grindelwald, Schattenwald und Meiringen being closely behind in the later years.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" style="position:absolute; width: 100%; height:100%"
id="Implementation">
<div class="p-0 m-0 text-center bg-image" style="
background-image: url('./assets/470173003_highres.png');
height: 100%; width:100%; background-size: contain; background-repeat: no-repeat;background-size: cover; display: block;
position: absolute;
left: 0;
top: 0;">
<div class="container" id="home" style="height: 100%;">
<div class="content">
<div class="row bg-light">
<div class="col-md-12" style="margin-top:15px">
<h5 style="font-weight: 600;"> Familiarization with the D3js library and Bootstrap</h5>
<p> To start the project I had to get into programming again and learn more about the d3js library.
For this the exercises in the provided open data hackroom proved enough to cover the basics but
most of it was done by experimenting with the different new functionalities that d3js presented to
me. This together with the fact that I knew that I wanted to display something using maps, made me
quickly prepare the basic TopoJSON maps and play around with how you can manipulate them with
d3js. So the zooming, mouseover, onclick and all boundaries of the 3 levels were created quite
quickly and I knew about the basics of how I could display data with them. Since I was already
aware from the show room what the open data web app was supposed to look like or at least in what
general direction it was supposed to go, I started already a little bit with the Web-Design using
bootstrap. </p>
<h5 style="font-weight: 600;">Data selection</h5>
<p> So by this point I already had the maps prepared without data and a part of the design was done.
During the Open Data Speed Dating Event on the 17 March 2022, where data coaches from different
areas were presenting the data, I looked for data which would benefit from having it mapped to
geograpical areas and which would have enough dimensions to allow further visualization other than
mapping. This proved to be the case with the recipients of feed-in remuneration (KEV) dataset, so
this was the one I chose.</p>
<h5 style="font-weight: 600;">Completing the concept and starting implementation</h5>
<p> After discussing the data with the data coach and having a look at it my self, I thought It
would be interesting to create a dashboard with a time axis using the maps I already had, and show
information about areas when they are clicked. To support this I had to first preprocess the
dataset using python to bring it into a form that would enable this. This also included the
transformation of the PLZ4 to GDENR, so that the identifiers would match and the data can be
linked correctly. After that I added the chloropleth of the cantons for one attribute of the
dataset and over all 11 years to the map. This was done quite quickly but then had to be expanded
to support also the other attributes and levels of map. Further along a dynamic color scale was
added, which color would need to fit the logarithmic scale of the map color. As a next step I
wanted to support the different energy and plant types
, so I had to integrate this somehow into the alreay very interactive visualization, which proved
quite easy because it only depended on the count value and year.</p>
<h5 style="font-weight: 600;">Finalization</h5>
<p> After valuable feedback of the data coach, I streamlined the UI, fixed a few issues and added a
different country overview with area charts over time, since only showing the map for the country
level was nonsense. Then the text was written and included and a bit of Web-Design to the
application was added to support it. On the 01 June 2022 in the late afternoon it was then
uploaded to the <a href="https://opendata.iwi.unibe.ch/?orderBy=-date_publish&filter.$=bern" style="color:blue"></a>Open Data Showroom.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" style="position:absolute; width: 100%; height:100%" id="datasource">
<div class="p-0 m-0 text-center bg-image" style="
background-image: url('assets/turbines-on-horizon.png');
height: 100%; width:100%; background-size: contain; background-repeat: no-repeat;background-size: cover; display: block;
position: absolute;
left: 0;
top: 0;">
<div class="container" style="margin-top:15px; height: 100%;">
<div class="content">
<div class="row">
<div class="bg-light rounded" style="opacity:95%">
<div class="col-md-12 my-2" style="text-align: center;" id="content2" style="opacity:95%">
<h1 style="font-weight: 600;">Data sources</h1>
<h5 style="font-weight: 600;">Main data source:</h5>
<p>The dataset on Swiss recipients of the feed-in remuneration corresponds to the status as of 04
Mai
2022. The dataset contains all recipients of feed-in remuneration between 2011 and 2021 with
varying
degree of data quality and following specifics:</p>
<div class="container border rounded" style="text-align: center;">
<div class="row">
<div id="attr" class="col-sm">
<h6>Energy Type</h6>
</div>
<div id="attr" class="col-sm">
<h6>Installation Type</h6>
</div>
<div id="attr" class="col-sm">
<h6>Output kW</h6>
</div>
<div id="attr" class="col-sm">
<p>Registration date</p>
</div>
<div id="attr" class="col-sm">
<p>Closing date</p>
</div>
</div>
<div class="row">
<div id="attr" class="col-sm">
<h6>Year</h6>
</div>
<div id="attr" class="col-sm">
<h6>Canton and Municipality</h6>
</div>
<div id="attr" class="col-sm">
<h6>PLZ4</h6>
</div>
<div id="attr" class="col-sm">
<p>Launch date</hp>
</div>
<div id="attr" class="col-sm">
<p>Producer Specifics</p>
</div>
</div>
<div class="row">
<div id="attr" class="col-sm">
<h6>Production kW</h6>
</div>
<div id="attr" class="col-sm">
<h6>Remuneration CHF</h6>
</div>
<div id="attr" class="col-sm">
<p></p>
</div>
<div id="attr" class="col-sm">
<p>Project Specifics</p>
</div>
<div id="attr" class="col-sm">
<p></p>
</div>
</div>
</div>
<p></p>
<p>For each year an entry is created for each running project with the up-do-date data for that
year, which results to date in
a csv file with 110’750 rows. The attributes highlighted in bold were the ones used in this
project.
This dataset includes entries from all following energy types: Hydropower (up to 10 megawatts MW),
photovoltaics, wind energy, geothermal energy, biomass and waste. This dataset is created and
being
maintained by the federal office of energy (BFE). Although contracts are still running, no new
registrations can be made. Link to the source of this dataset:
<a href="https://opendata.swiss/de/dataset/bezugerinnen-und-bezuger-der-einspeisevergutung-kev"
style="color: blue">opendata.swiss</a>.
</p>
<h5 style="font-weight: 600;">Supporting data sources:</h5>
<h6 style="font-weight: 600;">GeoData</h6>
<p>The TopoJSON data required for generating the country, canton and municipality boundaries were
taken from following Github: <a href="https://github.com/interactivethings/swiss-maps"
style="color: blue">swiss-maps</a>, which provides a
mechanism to generate TopoJSON from publicly available swisstopo geodata, created and maintained
by
the federal office of topography. It also provided the necessary names, and the official
municipality identification number.
</p>
<h6 style="font-weight: 600;">Data link</h6>
<p>To obtain a link between the individual renumeration recipient data and the geodata of the
municipalities, a third dataset had to be used, which allowed the transformation of PLZ4 numbers
to
municipality identification numbers. This official document can be found here: <a
href="https://www.bfs.admin.ch/asset/de/do-t-09.02-gwr-37" style="color: blue">bfs.admin.ch</a>.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" style="position:absolute; width: 100%; height:100%" id="contact">
<div class="p-0 m-0 text-center bg-image" style="
background-image: url('assets/hydropower.png');
height: 100%; width:100%; background-size: contain; background-repeat: no-repeat;background-size: cover; display: block;
position: absolute;
left: 0;
top: 0; z-index: 999;">
<div class="container " style="height: 100%;">
<div class="content ">
<div class="row ">
<div class="col-md-13" style="margin-top:15px">
<div class="row " style="flex-wrap:nowrap; justify-content: center;">
<div class="col mb-1 bg-dark rounded" style="border:2px; border-color:transparent; opacity: 95%;">
<div class="mx-2 my-4 " style="color:white">
<h5 style="font-weight: 600;">About the project</h5>
<p> This visualization was created during the Open Data Course at the University in Bern in
2021. Different Technologies were used in the creation of it including Javascript, Bootstrap
and the D3.js library. Python with the Numpy and Pandas libaries were used for processing and
cleaning of the data. The data about the Recipients of feed-in Remuneration was retrieved from
<a href="https://opendata.swiss/de/dataset/bezugerinnen-und-bezuger-der-einspeisevergutung-kev"
style="color: gainsboro;">Opendata.swiss</a> and the WebApp developed in consultation with a
data coach from the federal office of energy (BfE) who also gave me the necessary feedback to
improve it and guide it into the right direction.</p>
<p>With a little bit more time and effort it would have even be improved a little bit more by feeding it data directly from the API, since the script for transforming the data is already written. Additionaly the link between the energy / installation types and indicators could be made more clear as well as adding a leaderboard for showing entries, municipalities, cantons etc...</p>
</div>
</div>
</div>
<div class="row " style="flex-wrap:nowrap; justify-content: center;">
<div class="col bg-dark rounded" style="border:2px; border-color: transparent ; opacity: 95%;">
<div class="mx-2 my-4 " style="color:white">
<h5 style="font-weight: 600;">About me</h5>
<p> I am Daniel Guggisberg currently studying in the third semester of my Master's Degree for
Business Administration with a focus on Information Systems. I had previous programming
knowledge due to a minor in Computer Science but during my day-to-day I don't generally get to
program as much as I like to, so creating this was a joy. </p>
<p>E-Mail: Daniel.Guggisberg@hotmail.ch <a
href="https://www.linkedin.com/in/daniel-guggisberg-26862a208/"><img
src="./assets/58e91afdeb97430e81906504.png" style="width:1.3vw"></img></p></a>
</div>
</div>
<div class="col-md-auto bg-dark ml-1 rounded"
style="border:2px; border-color:transparent ; opacity: 95%;">
<h5></h5>
<div class="mx-2 my-3 rounded"><img class="" src="./assets/_DSC5883v8.png"
style="width:auto;height:auto; max-width: 8vw;" alt="Italian Trulli"></img></div>
</div>
</div>
<div class="row " style="flex-wrap:nowrap; justify-content: center;">
<div class="col mt-1 bg-dark rounded" style="border:2px; border-color:transparent; opacity: 95%;">
<div class="mx-2 my-4 " style="color:white">
<h5 style="font-weight: 600;">References</h5>
<div class="row">
<div class="col">
<h6 style="font-weight: 600;">Background Pictures</h6>
<p id="references"><a
href="https://www.swissinfo.ch/eng/swiss-companies-told-to-brace-for-electricity-shortages/47034548"
style="color: gainsboro;">Electricity Grid</a></p>
<p id="references"><a
href="https://www.propertycasualty360.com/2019/04/24/make-sure-your-roofs-warranty-remains-effective-under-those-solar-panels-414-154169/?slreturn=20220501065753"
style="color: gainsboro;">Photovoltaic Roof</a></p>
<p id="references"><a href="https://sinaumedia.com/geothermal-power-plant-work-system/"
style="color: gainsboro;">Geothermal power plant</a></p>
<p id="references"><a
href="https://eos.org/research-spotlights/researchers-zero-in-on-methane-released-from-reservoirs"
style="color: gainsboro;">Hydropower plant</a></p>
<p id="references"><a
href="https://www.shell.com/business-customers/lubricants-for-business/products/wind-power.html"
style="color: gainsboro;">Wind turbines</a></p>
<span>None of the background pictures used are my own works and all credit goes to the
original creators.</span>
</div>
<div class="col">
<h6 style="font-weight: 600;">Data</h6>
<p id="references"> <a class="mr-1"
href="https://opendata.swiss/de/dataset/bezugerinnen-und-bezuger-der-einspeisevergutung-kev"
style="color: gainsboro;">Recipients of feed-in remuneration</a></p>
<p id="references"> <a href="https://www.bfs.admin.ch/asset/de/do-t-09.02-gwr-37"
style="color: gainsboro;">GDENR Transformation CSV</a></p>
<p id="references"> <a href="https://fontawesome.com/" style="color: gainsboro;">UI
Icons</a></p>
<p id="references"> <a href="https://devdocs.io/d3/" style="color: gainsboro;">D3js
information</a></p>
<p id="references"> <a href="https://d3-graph-gallery.com/index.html"
style="color: gainsboro;">Visualization inspiration</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="references">
<div class="alert alert-info">references</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="./lib/d3/package/dist/d3.js"></script>
<script src="https://d3js.org/topojson.v1.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="https://unpkg.com/topojson-simplify@3"></script>
<script src="visualization.js"> </script>
<script src="./lib/loading/loading.js"> </script>
</html>