forked from carinehuerbin/Open-Data-Visualisation
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
180 lines (141 loc) · 25 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Solarstrompotentiale der Schweizer Gemeinden </title>
<!-- Einbinden des CSS Teils von Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Eigenes CSS Stylesheet verlinken -->
<link rel="stylesheet" href="style.css" type="text/css">
<!-- Einbinden von D3.js und weitere online -->
<script src="d3.js" charset="utf-8"></script>
<script src="d3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-request.v1.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- Einbinden von JQuery und Popper.js -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- Einbinden von Bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Einbinden der eigenen App und Hilfsfunktionen -->
<script src="app.js"></script>
<script src="donutChart.js"></script>
<script src="drawScenarios.js"></script>
</head>
<body>
<!-- hier folgt die Bootstrap Navbar -->
<div class="jumbotron">
<div class="container">
<span class="text-white"> <h1 class="font-weight-normal"><br>Solarenergiepotentiale der Schweizer Gemeinden – <br> Fokus Strom </h1></span>
<span class="text-white"><h4 class="font-weight-lighter"> Übung Open Data, Universität Bern </h4></span></div>
</div>
<nav class="navbar navbar-expand-sm bg-light navbar-light sticky-top">
<button class="navbar-toggler" type="button" data-toggle="tab" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<!-- hier die übergeordnete Liste der Tabs -->
<a class="nav-link active" data-toggle="tab" href="#home">Visualisierung</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#bedienungsanleitung">Bedienungsanleitung</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#interpretation">Interpretation</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#lessonslearned">Lessons learned</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#dokumentation">Dokumentation</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#quellen">Quellen</a>
</li>
</ul>
</div>
</nav>
<div class="tab-content">
<!-- hier folgt der Inhalt der Nav-Tabs-->
<div id="home" class="container tab-pane active"><br>
<div class="radio" class="font-weight-lighter">
<label><input type="radio" name="optradio" id="scenario1" checked class="font-weight-normal" onchange="refillFeatures()"> Dächer nutzen </label>
</div>
<div class="radio">
<label><input type="radio" name="optradio" id=scenario2" class="font-weight-normal" onchange="refillFeatures()"> Dächer und Fassaden nutzen </label>
</div>
</div>
<div id="bedienungsanleitung" class="container tab-pane fade"><br>
<h3 class="font-weight-lighter">Bedienungsanleitung</h3><br>
<p class="text-justify"> Die Grundlage unserer Visualisierung bildet eine Karte der Schweizer Gemeinden. Diese wird grundsätzlich unabhängig von allen Funktionalitäten der Visualisierung dargestellt. Ohne Input der Betrachtenden ist das dargestellte Szenario standardmässig auf das Szenario 1 "Nur Dächer nutzen" eingestellt. Mithilfe der Radio Buttons an der oberen linken Ecke der Karte lässt sich das Szenario wechseln auf das Szenario 2 "Dächer und Fassaden nutzen", wenn man mit der Maus die entsprechende Schaltfläche drückt. Mit beiden Knöpfen kann man zwischen diesen beiden Szenarien schnell hin und her wechseln, um die Unterschiede deutlicher wahrnehmen zu können. Die Einfärbung wird dann automatisch für das angewählte Szenario aktualisiert. Die Legende für die Karte ist statisch und wird, unabhängig von Inputs und Mausposition, immer eingeblendet. Das Potential wurde in den Rohdaten in Gigawattstunden (GWh) berechnet.<br> Abgesehen von der Darstellung der Szenarien kann man in der Visualisierung zusätzlich den Namen der jeweiligen Gemeinde abfragen, über die man gerade die Maus hält. Dies dient der Orientierung. Zur Ergänzung werden im Tooltip der Gemeinde auch die Anteile der jeweiligen Gebäudeklassen in Prozent mit angezeigt. Unterhalb des Diagramms wird, direkt im Tooltip-Fenster, die Legende zu den jeweiligen Gebäudeklassen angezeigt: Die Farbe orange steht für den Anteil der Einfamilienhäuser, die Farbe gold für den der Mehrfamilienhäuser, violett für Gebäude ohne Wohnnutzung (z.B. Schulhäuser, Turnhallen, Industriegebäude, usw.). In der dunkelblauen Farbe ist der Anteil aller übrigen Gebäude zusamengefasst (siehe auch Interpretation und Dokumentation). Dies soll die Applikation ergänzen und die Interpretation unterstützen, ist aber nicht ihr Schwerpunkt. <br></p>
</div>
<div id="interpretation" class="container tab-pane fade"><br>
<h3 class="font-weight-lighter">Interpretation</h3><br>
<h5 class="font-weight-lighter">Übersicht</h5>
<p class="text-justify">
Die für diese Visualisierung verwendeten Rohdaten beruhen auf komplexen Berechnungen des Solarenergiepotentials für alle Schweizer Gemeinden. Diese Berechnungen sind dokumentiert und beim Bundesamt für Energie BFE einsehbar. Sie beruhen auf verschiedenen Szenarien, die besser fassbar machen sollen, wieviel Solarenergie man in der jeweiligen Schweizer Gemeinde unter bestimmten Rahmenbedingungen gewinnen könnte. Für diese Berechnungen wurden die am besten geeigneten, realistisch gut nutzbaren Dach- und Fassadenflächen eruiert und einbezogen. Das Potential wird daher realistisch dargestellt. Besonders zu berücksichtigen gilt aber, dass im berechneten Solarenergiepotential die bereits errichteten Solaranlagen mit einberechnet sind! Das heisst, das berechnete und in unserer Visualisierung dargestellte Potential wird zum Teil bereits genutzt. Allerdings ist das bestehende Potential immer noch sehr gross und noch lange nicht vollständig ausgeschöpft.<br>Aus insgesamt vier Szenarien, die Potentiale sowohl für Solarstrom als auch für Solarwärme aufzeigen, haben wir zwei ausgewählt, die sich nur auf Solarstrom beziehen (siehe auch Dokumentation). Mit Einbezug der Daten zu Solarwärme könnte das Gesamtbild des Schweizer Solarenergiepotentials allenfalls ein wenig anders aussehen. Zwischen unseren beiden ausgewählten Szenarien – eines mit Bezug auf Dachflächen, eines mit Bezug auf Dach- und Fassadenflächen – lassen sich einige Unterschiede erkennen.</p><br>
<p class="text-justify"> Für die Interpretation der Visualisierung ist wichtig zu beachten, dass für einige Gemeinden keine Informationen zu den Gebäudeklassen vorliegen. Um die Visualisierung innerhalb der gegebenen Zeit erstellen zu können, mussten wir auf einige Funktionen verzichten (siehe auch Dokumentation), und haben uns daher dafür entschieden, die Gemeinden ohne Informationen zu den Gebäudeklassen der Einfachheit halber auch in unserer Darstellung der Szenarien auszublenden. Dies bedeutet nicht, dass für die jeweiligen Gemeinden keine Informationen zu den Szenarien vorliegen, sondern dass wir sie, um unseren Code nicht zu überfrachten, diese nicht eingeblendet haben. Für diese Gemeinden kann daher keine genaue Aussage getroffen werden, was ihr Solarenergiepotential betrifft. Es sind allerdings nur wenige, die das Gesamtbild des Solarenergiepotentials, über die gesamte Schweiz betrachtet, kaum trüben sollten. Der Grund dafür, warum die Informationen von einigen Daten fehlen, könnte der Stand der Rohdaten oder in der Zeit nach der letzten Aktualisierung der Rohdaten durchgeführte Gemeindefusionen sein.</p><br>
<p class="text-justify"> Zusätzlich zur Visualisierung mittels Farbabstufungen wollten wir auch vorhandene Daten zu den erhobenen Gebäudeklassen in die App einbeziehen. Dazu haben wir eine Statistik über die in Zusammenhang mit dem Solarpotential erhobenen Gebäudeklassen in die Visualisierung einbezogen. Aus Gründen der Übersichtlichkeit haben wir entschieden, nicht alle Gebäudeklassen in die zu den Gemeinden gehörigen Kreisdiagramme einfliessen zu lassen. Daher haben wir die Einfamilien- und Mehrfamilien-Wohnhäuser sowie gewerbliche Gebäude in den Kreisdiagrammen separat abgebildet und viele weiteren Gebäudeklassen unter der Kategorie „übrige“ zusammengefasst. Dadurch könnte die Aussagekraft der Statistik zu den Gebäudeklassen sinken. Da dies aber nicht der Fokus unserer App ist und nur als Ergänzung dienen soll, haben wir dies inkauf genommen.</p><br>
<h5 class="font-weight-lighter">Szenario 1: Nur Dächer nutzen</h5>
<p class="text-justify"> Beim ersten Blick auf die Karte, mit der Visualisierung für das Szenario 1 "Nur Dächer nutzen" fällt auf, dass in vielen Schweizer Gemeinden das Solarenergiepotential durchaus als mittel bis hoch einzustufen ist. Dies trifft besonders zu für das schweizerische Mittelland. Einige grosse Städte, wie Basel, Luzern, Zürich, Schaffahusen und Genf stechen mit einem hohen Potential heraus, aber auch Gemeinden wie Scuol, Aarau und Davos. Generell kann man sagen, dass in kleineren Gemeinden weniger Potential besteht, wahrscheinlich daher, dass es in kleineren Siedlungen weniger Gebäude gibt, deren Flächen für die Erzeugung von Solarstrom genutzt werden könnten. Der Grund dafür, dass einige Berggemeinden hervortreten, könnte der starke Tourismus in den jeweiligen Ortschaften sein.</p><br>
<h5 class="font-weight-lighter">Szenario 2: Dächer und Fassaden nutzen</h5>
<p class="text-justify"> Wenn die Fassaden mit einbezogen werden, wird auf der Karte erkennbar, dass das Potential für die Erzeugung von Solarstrom deutlich ansteigt. Dies liegt wahrscheinlich daran, dass in grossen Städten mit viel verbauter Fläche viel mehr Fassaden zur Verfügung stehen, die genutzt werden könnten, verglichen mit einer kleinen Gemeinde auf dem Land. Es würde sich also um einen Grösseneffekt handeln, der für das höhere Potential sorgt. Bemerkenswert ist aber, dass sich verbaute Flächen in einer Stadt auch gegenseitig beschatten und so das Potential senken könnten, was in der Schweiz anscheinend nicht oder nur wenig der Fall ist. Dies gilt auch für stark bebaute Agglomerationen im schweizerischen Mittelland. Zusammengefasst lässt sich sagen, dass in denjenigen Gemeinden, in denen bereits ein bemerkenswertes Potential für die Erzeugung von Solarstrom vorhanden ist, sich dieses durch den Einbezug der Fassaden noch steigern lässt. Bei Gemeinden mit eher kleinem Potential bleiben die Steigerungen durch die zusätzliche Energie von Fassaden ebenfalls eher gering, sind aber unserer Meinung nach dennoch nicht vernachlässigbar. Da es auch einige Ausreisser und Auffälligkeiten gibt, lässt sich das Potential für die Erzeugung von Solarstrom generell nicht allein auf die Grösse der bebauten Fläche und die Bevölkerungsdichte zurückführen. </p><br>
</div>
<div id="lessonslearned" class="container tab-pane fade"><br>
<h3 class="font-weight-lighter">Lessons learned</h3> <br>
<h5 class="font-weight-lighter">Viele Entscheidungen zu treffen</h5>
<p class="text-justify"> In der Visualisierung stecken sehr viele, unterschiedlich gewichtete Entscheidungen. Wir mussten uns überlegen, wie wir unsere Daten aufbereiten, welche Daten effektiv in die Visualisierung einfliesssen sollten, und natürlich, auf welche Weise wir überhaupt die Daten visualisieren wollen. Uns war ziemlich schnell klar, dass wir das Solarenergiepotential auf einer Schweizer Karte darstellen wollten. Doch bis dahin mussten wir auch darüber nachdenken, wie die Interaktivität auf der Karte gestaltet werden soll und mit welchen Farben wir das Potential darstellen wollen. Diese Entscheidungen haben wir zu zweit besprochen und uns danach entschieden, was für uns am meisten Sinn ergeben hat. Man kann sie also auch bis zu einem bestimmten Grad als willkürlich betrachten.</p><br>
<h5 class="font-weight-lighter">Früh mit der Datensichtung beginnen</h5>
<p class="text-justify">In den Rohdaten steckt mehr als auf den ersten Blick sichtbar ist. Auch bei der Aufbereitung der Daten mussten wir uns überlegen, wie wir genau vorgehen wollen. Auf einige Aspekte der Rohdaten sind wir erst gestossen, als wir mit der Visualisierung schon ein wenig fortgeschritten waren. In einem neuen Projekt würden wir wohl daher früher mit der Datensichtung beginnen, um rascher einen Überblick zu haben und effizientere Fortschrittte machen zu können.</p><br>
<h5 class="font-weight-lighter">Früh mit der Programmierung beginnen</h5>
<p class="text-justify"> Da wir beide vor der Veranstaltung in Open Data nicht oder kaum über Kenntnisse im Programmieren verfügten, brauchten wir für alle Visualisierungsschritte mehr Zeit als jemand, der schon programmieren kann, und standen unter starkem Zeitdruck. Mit vielen Fehlermeldungen, die wir antrafen, konnten wir nicht viel anfangen und hatten teilweise beim Debugging Schwierigkeiten. Ausserdem hatten wir Mühe damit, im Internet nach Beispielen für unsere Art der Visualisierung zu suchen und bereits vorhandene Code Snippets zu übernehmen, da diese teilweise in früheren D3.js Versionen geschrieben worden waren. Diese konnten wir nicht zum Laufen bringen. Daher würden wir in einem neuen Projekt früher mit dem konkreten Schreiben des Codes beginnen. Mit etwas mehr Zeit wäre es auch möglich gewesen, die in der Übung erworbenen Kenntnisse zu vertiefen und effizienter anzuwenden.</p><br>
<h5 class="font-weight-lighter">Mehr geht immer</h5>
<p class="text-justify"> Zu Beginn des Projekts wollten wir sehr viele weitere Funktionen in unsere Solarenergiepotential-Karte einbauen. Von Anfan an dachten wir, dass eine Lupe oder Zoom-Funktion sowie eine Suchfunktion sehr praktisch wären, da es in der Schweiz sehr viele Gemeinden gibt, vor allem auch sehr viele kleine. Diese könnte man mit einer einfacheren Mouseover-Funktion nicht besonders gut anwählen. Da wir den Aufwand unterschätzt hatten und uns nicht mehr viel Zeit blieb, haben wir auf diese Funktionen verzichten müssen. Als Kompromiss haben wir uns dafür entschieden, die Schweizer Karte vergrössert abzubilden, damit die kleinen Gemeinden besser sicht- und anwählbar sind. Wir hätten auch noch Bevölkerungsdaten einbeziehen können, um das Potential pro Kopf zu berechnen, und dieses ebenfalls auf der Karte darstellen. Auch die Daten zu den Gebäudeklassen hätten wir stärker einbeziehen und interpretieren können. Rein mathematisch wären viele weitere Darstellungsformen möglich gewesen. Wir hätten usn für die Übersicht auch eine interaktive Legende gewünscht, also die Funktion, dass beim Klicken auf eine Legendenfarbe (also bei der Auwahl einer bestimmten Grösse des Potentials) die zugehörigen Gemeinden hervorgehoben werden und alle anderen abgeblendet werden würden. Da wir kaum passende, übersichtliche Beispiele dazu fanden, die uns in der aktuellen D3.js-Version als Vorbild hätten dienen können, verzichteten wir auf diese Funktion.</p><br>
<p class="text-justify"> Zuletzt hätten wir unsere Darstellung auch noch verschönern können, z.B. die Legende für die Karte stärker anpassen, und im Tooltip die Prozentzahlen der Gebäudeklassen numerisch darstellen lassen. Diesen Aufwand konnten wir leider nicht mehr betreiben, doch blieben alle Ideen bis zum Schluss bestehen. Im Rahmen eines noch grösseren Projektes hätten wir diese allenfalls noch umgesetzt. Mit dem aktuellen Stand (Mai 2019) haben wir versucht, die für uns besten Kompromisse zu finden.
</p>
</div>
<div id="dokumentation" class="container tab-pane fade"><br>
<h3 class="font-weight-lighter">Dokumentation</h3><br>
<h5 class="font-weight-lighter">Ausgangslage</h5>
<p class="text-justify"> Im Rahmen der Veranstaltung Open Data – Vorlesung und Übung mit Vertiefung an der Unviersität Bern im Frühlingssemester 2019 war es unsere Aufgabe, einen offen verfügbaren Datensatz zu visualisieren. Die dazu benötigten Programmierkenntnisse sollten in der Veranstaltung selbst erworben werden. Den Datensatz durften wir selbst auswählen. Dafür stellten die externen Data Coaches, von verschiedenen Bundesämtern, der SBB und vielen weiteren Unternehmen und Ämtern, ihre Datensätze im Rahmen der Übung Open Data vor. Aufgrund unserer Fachhintergründe, von der Betreibswirtschaftslehre und der Geographie kommend, entschieden wir uns für das Solarenergiepotential der Schweizer Gemeinden. Dieses Thema erschien uns aktuell und relevant für die Schweizer Gesellschaft und Politik.
</p><br>
<h5 class="font-weight-lighter">Über die Daten</h5>
<p class="text-justify"> Die Daten über das Solarenergiepotential stammen vom Bundesamt für Energie und liegen sowohl als JSON- als auch als Excel-Dateien vor. Für die Verarbeitung mit D3.js und Javascript verwendeten wir die JSON-Variante, da wir sonst die Excel-Datei sowieso hätten umwandeln müssen. Die Grundlage für die Schweizer Karte mit den Gemeindegrenzen, ohne weitere Informationen, bildet ebenfalls eine JSON-Datei. Für die Visualisierung der Gebäudeklassen lag eine Excel-Datei vor, die wir für die Verarbeitung mit D3.js in eine CSV-Datei umwandelten. Eine CSV-Datei stellt Daten mit Kommatrennung (comma separated values) bereit, die mit D3.js einfach ausgelesen werden können. Für die Visualisierung an sich wurden Skripts geschrieben, die als Javascript-Dateien vorhanden sind. Das Aussehen der gesamten Internetseite wurden mithilfe von HTMLgeschrieben, welches durch eine CSS-Datei (Stylesheet) und das Framework Bootstrap in der Version 4.1 ergänzt werden.</p><br>
<h5 class="font-weight-lighter">Vorgehen</h5>
<p class="text-justify"> Als erstes mussten wir uns mit den Daten vertraut machen. Schnell war uns klar, dass wir die Daten zum Solarenergiepotential auf einer Schweizer Karte als Choropleth visualisiert haben wollten. So ist das Solarenergiepotential pro Gemeinde intuitiv mittels Farbabstufungen sichtbar. Unser Ansatz war "von innen nach aussen". Das heisst, wir wollten zuerst die inneren, grundlegenden Funktionen unserer Visualisierung erstellen, also eine Karte der Schweiz und ein Tooltip für die Namen der Gemeinden. Die Szenarien, Legenden und das Design, das die Visualisierung einfasst, sollten danach hinzugefügt werden. So wollten wir den Überblick über unseren geschriebenen Code behalten.</p>
<p class="text-justify"> Unser erster Schritt war daher, aus einer auf GitHub bereits vorhandenen TopoJSON-Datei eine Schweizer Karte zu generieren. Diese Basiskarte wurde mit einem Tooltip ausgestattet, der zuerst nur den Namen der Gemeinde anzeigte. Danach fügten wir eine Funktion hinzu, die die Gemeinde einfärbt, wenn sich der Mauszeiger über sie bewegt. Als nächstes fügten wir zum Tooltip ein Ringdiagramm hinzu, das die Gebäudeklassen der jeweiligen Gemeinde anzeigt. Für dieses Ringdiagramm haben wir einige Gebäudeklassen, die uns zur Verfügung verstanden, zusammengefasst aus Gründen der Übersichtlichkeit. Die Anteile der Gebäudeklassen liegen in den Rohdaten in Prozentzahlen vor. Für die Zusammenfassung einiger Gebäudeklassen haben wir uns für eine Rundung der Prozentzahlen auf plus/minus 1 Prozent entschieden. Zuerst wollten wir die Prozentzahlen auf dem Ringdiagramm einblenden, doch erschien uns das zu unübersichtlich. Von dieser Idee kam die Entscheidung zur Genauigkeit. Doch da die Prozentzahlen nun auf dem Ringdiagramm nicht zu lesen sind, spielt dies nicht mehr so eine grosse Rolle.</p>
<p class="text-justify"> Von diesem Stand ausgehend verknüpften wir die Daten zum Solarenergiepotential mit der Karte und wiesen diesen Werten jeweils eine Farbstufe zu. So wird das Solarenergiepotential visualisiert. Während dieser Arbeit haben wir gleichzeitig auch begonnen, die gesamte Internetseite zu gliedern und zu gestalten, sind also von unserem "von innen nach aussen"-Ansatz ein wenig abgewichen, um mehr Fortschritte machen zu können. Zuletzt zeichneten wir mit D3.js die Legenden zur Karte und zum Ringdiagramm.
Nach und nach ergänzten wir die schriftlichen Informationen über die Visualisierung. Im Lauf der Arbeit an der Visualisierung haben wir uns dafür entschieden, aus den zur Verfügung stehenden sechs Szenarien vier auszuwählen. Wir haben uns für die Szenarien mit Strom entschieden, um gleichzeitig die Vergleichbarkeit zu gewährleisten und die Visualisierung zu fokussieren. Um die offen verfügbaren Daten auch für möglichst viele Personen verständlich zu halten, haben wir während des gesamten Prozesses darauf geachtet, in den Farben auf der Karte und im Diagramm rot und grün zu meiden, damit auch rot-grün-blinde Personen unsere App gut gebrauchen können.</p><br>
</div>
<div id="quellen" class="container tab-pane fade"><br>
<h3 class="font-weight-lighter"> Quellen</h3><br>
<h5 class="font-weight-lighter">Rohdaten </h5>
<p class="text-justify"> Die Daten zum Solarenergiepotential sind verfügbar unter <a href="https://opendata.swiss/de/dataset/solarenergiepotenziale-der-schweizer-gemeinden" target="_blank"> Opendata.swiss</a>. Sie stammen vom Bundesamt für Energie BFE und wurden für diese Visualisierung verwendet. Weitere Hintergrundinformationen zu den im Kreisdiagramm verwendeten Hintergrunddaten der Gebäudeklassen können beim<a href="https://www.bfs.admin.ch/bfsstatic/dam/assets/346493/master"> Bundesamt für Statistik BFS</a> als Bericht heruntergeladen werden (2MB). Die in der App verwendeten Angaben zu den Gebäudeklassen wurden vom Bundesamt für Energie in aggregierter Form zur Verfügung gestellt. Sie können beim Bundesamt für Statistik unverarbeitet bezogen werden, sind allerdings kostenpflichtig. Ausserdem sind weitere Hintergrundinformationen und Berechnungsmöglichkeiten für das eigene Haus verfügbar unter <a href="https://www.uvek-gis.admin.ch/BFE/sonnendach/" target="_blank">Sonnendach.ch</a>.<br>
<p><br>
<h5 class="font-weight-lighter">Design und Umsetzung </h5>
Suvetha Somasundram (Bsc Betriebswirtschaftslehre), Kontakt: <a href="mailto:suvetha92@hotmail.com"><i>E-Mail</i></a> <br>
Carine Hürbin (MSc Geographie), Kontakt: <a href="mailto:carine.huerbin@gmx.ch"><i>E-Mail</i></a><br></p>
<p> Der vollständige Quellcode kann aus einem <a href="https://github.com/carinehuerbin/Open-Data-Visualisation" target="_blank">GitHub Repository</a> heruntergeladen werden.</p>
<p> Quelle Hintergrundbild: <a href="https://www.wwf.ch/de/unsere-ziele/solarenergie" target="_blank">WWF Schweiz</a><br></p>
<p> Entstanden im Rahmen der Übung Open Data der Forschungsstelle Digitale Nachhaltigkeit, Universität Bern, im Frühlingssemester 2019.<br>Erstellt mit D3.js, Javascript, HTMl, CSS und Bootstrap.</p><br>
</div>
</div>
</div>
<!-- Fusszeile hier -->
<footer class="page-footer background-blue font-small blue">
<div class="footer-copyright text-center py-3">
Copyright: © Creative Commons Namensnennung 4.0 International Lizenz
<p> Suvetha Somasundram und Carine Hürbin, Universität Bern – Frühlingssemester 2019 </p>
</div>
</footer>
<script> drawMap();</script>
</body>
</html>