/
index.html
149 lines (135 loc) · 6.56 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
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Gläserne Kläranlage</title>
<link rel="stylesheet" href="assets/vendor/css/foundation.min.css" type="text/css">
<link rel="stylesheet" href="assets/vendor/css/c3.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/main.css" type="text/css">
</head>
<body>
<br>
<div class="row">
<div class="small-12 medium-6 columns">
<div id="main-image" class="thumbnail">
<img src="assets/img/KA1.jpg">
</div>
<div class="row partner-logo-container">
<div class="column small-12 medium-4">
<span class="vert-helper"></span>
<a href="http://www.oewa.de/">
<img class="partner-logo" src="assets/img/owea-logo.jpg" alt="OWEA Logo">
</a>
</div>
<div class="column small-12 medium-4">
<span class="vert-helper"></span>
<a href="http://codefor.de/leipzig/">
<img class="partner-logo" src="assets/img/oklab-logo.jpg" alt="OKLab Leipzig Logo">
</a>
</div>
<div class="column small-12 medium-4">
<span class="vert-helper"></span>
<a href="https://www.gi.de/">
<img class="partner-logo" src="assets/img/gi-logo.png" alt="GI Logo">
</a>
</div>
</div>
</div>
<div class="small-12 medium-6 columns">
<h1 id="introduction">Die gläserne Kläranlage</h1>
<p>
Beim OpenDataDay am 4. März 2017, wurde mit Hilfe der Anwesenden sowie der Unterstützung
der <a href="http://www.oewa.de/">OEWA</a>, der <a href="https://www.gi.de/">Gesellschaft für Informatik</a> und dem <a href="http://codefor.de/leipzig/">Leipziger OpenKnowledgeLab</a> die hier zu findenen Informationen erstellt. Diese Seite soll einen Einblick darüber geben, wie eine Kläranlage funktioniert und aufzeigen das sie in dem meisten Fällen autark vom Stromnetz arbeitet. Darüber hinaus schaft sie Transparenz, da Werte der vergangenen Monate geprüft und nachvollzogen werden können.
</p>
<p>
Der für dieses Projekt zugrunde liegende Code steht unter der <a href="https://github.com/CodeforLeipzig/glaeserne-klaeranlage/blob/master/LICENSE">BSD 3-Clause Lizenz</a>. Die von der OEWA zur verfügung gestellten Daten stehen unter der <a href="https://github.com/fraunhoferfokus/ogd-metadata/blob/master/lizenzen/BMI/Datenlizenz_Deutschland_Namensnennung_nichtkommerziell_V1.md">Datenlizenz Deutschland Namensnennung nichtkommerziell V1</a>. Der Code selbst ist auf <a href="https://github.com/CodeforLeipzig/glaeserne-klaeranlage">github</a> zu finden.
</p>
</div>
</div>
<hr>
<div class="row">
<div class="small-12 column">
<div class="row">
<div id="nav" class="small-12 medium-3 column">
<h3>Inhalt</h3>
<ul class="vertical menu" data-drilldown data-auto-height="true">
<li>
<a class="update-chart" data-target="energy">Energiewirtschaft</a>
</li>
<li>
<a>Ablauf (mit Grenzwerten)</a>
<ul class="vertical menu">
<li>
<a class="update-chart" data-target="nitrogen">Stickstoff</a>
</li>
<li>
<a class="update-chart" data-target="ammoniacalNitrogen">
Ammoniumstickstroff
</a>
</li>
<li>
<a class="update-chart" data-target="phosphor">Phosphor</a>
</li>
<li>
<a class="update-chart" data-target="oxygenOrganic">CSB</a>
</li>
<li>
<a class="update-chart" data-target="oxygenBiologic">BSB</a>
</li>
</ul>
</li>
</ul>
<div id="detail">
<h4>Grafischer Vergleich In/Out</h4>
<span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" data-width="400" title="Zulauf in orange. Ablauf in blau.">
<div id="detail-content"></div>
</span>
</div>
</div>
<div class="small-12 medium-9 column">
<h3>Darstellung</h3>
<div id="control">
<div class="row">
<div id="dateMessage" class="callout warning hide">
Das Enddatum darf nicht gleich dem oder vor dem Startdatum liegen.
</div>
<div class="small-12 medium-6 column">
<label>Startdatum:</label> <span id="startContainer"></span>
</div>
<div class="small-12 medium-6 column">
<label>Enddatum:</label> <span id="endContainer"></span>
</div>
</div>
<div class="row">
<div class="small-12 column">
<label>
<input type="checkbox" id="showInValue">
Zeige <span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex="1" data-width="400" title="Zuflusswerte werden nur bei Werten des Unterbereiches 'Ablauf (mit Grenzwerten)' angezeigt. Mit einem Klick auf Eintäge für die es sowohl einen Zufluss- als auch einen Ablaufwert gibt, ist eine alternative Darstellung verfügbar. Diese Werte sind in der Grafik rot hervorgehoben.">Zuflusswerte</span> an
</label>
</div>
</div>
</div>
<div id="chart"></div>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="small-12">
<strong>© OKLab Leipzig</strong> | <a href="https://okfn.de/impressum/">Impressum</a>
</div>
</div>
<br>
<script type="text/javascript" src="assets/vendor/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/vendor/js/jquery.csv.js"></script>
<script type="text/javascript" src="assets/vendor/js/foundation.min.js"></script>
<script type="text/javascript" src="assets/vendor/js/d3.v3.js"></script>
<script type="text/javascript" src="assets/vendor/js/c3.min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>