Präsentationen der 29 Studierenden-Apps der Open Data Vorlesung 2014

App Präsentation
Gruppe 17
Tabakprävention
Open Data

Team
> Patric Guggisberg
> Hauptfach: Archäologie
> Nebenfach: BWL
> Programmiererfahrung:
Delphi, C/Side
> Patrik Schori
> Hauptfach: BWL
> Nebenfach: Sport
> Programmiererfahrung:
Keine

Ziel und Motivation
> Entwurf einer App zur Darstellung von Praxisrelevanten
Daten
> Mit dem Ziel die Kosten der Tabakprävention auf
verschiedenen Stufen darzustellen und deren Verteilung
aufzuzeigen und so eine bessere Übersicht zu schaffen.
> Als persönliches Ziel, interaktive
Visualisierungsmöglichkeiten für grosse Datenmengen
kennen zu lernen.

Resultat
> Sunburst Darstellung
> Auf deutsche Sprache beschränkt
> Verschiedene Detaillierungsebenen
> Zoombar auf: Sprachregion, Zielgruppe, Projekte
> Diverse detaillierte Projektinformationen: Gesamtsumme,
Laufzeiten
> Hilfestellung
> Link:
http://sandbox.iwi.unibe.ch/~pg11k788/Tabakpraevention

Datenquelle
> Bundesamt für Gesundheit, Tabakprävention
> Excel-sheet
> Mehrsprachig
> Einteilung nach diversen Kategorien
> Beispielsweise: Sprachregion, Zielgruppe, Setting usw.

Probleme der Daten
> Lange Projektnamen
> Zeilenumbrüche in Zellen
> Viele unnötige Informationen
> Was ist zentral? -> Kosten, Wo wird investiert
> Codierung (UTF-8)
> Anforderung des Codes: Baumstruktur
> Daten auf die entsprechende Periode berechnen (Laufzeit)

Überarbeitete Daten
> Json-Dateien
> Pro Jahr separate Datei
> Baumstruktur
> Sprachregion>Zielgruppe>Projekte
> Aufsummieren

Vorgehen
> Die darzustellenden Daten indentifizieren
> Geeignete Darstellung suchen
> Daten an geforderte Struktur anpassen
> Zeitaspekt in die App einbringen
> Zusatzinformationen visualisieren
> Design individualisieren
> Zusätzliche Informationen zu den Daten
> Bedienhilfe einfügen durch Help-Button

App
> Link: http://sandbox.iwi.unibe.ch/~pg11k788/Tabakpraevention

App zur Visualisierung von Fördergeldern
des Tabakpräventionsfond

 Nicolas Camenzind
 4. Semester BWL
 Grundverständnis von
Informatik aus dem
Gymnasium, aber keine
Erfahrung beim
Programmieren
 Patrick Neidhart
 5. Semester BWL
 Keine Erfahrung beim
Programmieren

 Erstellung einer funktionierenden App
 Erfahrung sammeln mit Programmierung
 Visualisierung von Projekten des
Tabakpräventionsfonds

 http://tabfonds.github.io/tabfonds/

 Ursprungsformat Excel-Datei
 Endformat json-Dateien

 Konzeption
 Datenbereinigung
 Datenübernahme nach csv und nach json
 Code Snipping mit D3 (Test- und Echtdaten)
 Fehlerbehebung und Feinschliff

Präsentation Tabakpräventions-App
Reto Zaugg, Stefan Imhof
Institute of Information Systems
University of Bern
22.05.2014, Open Data: Datenmanagement und Visualisierung

Team
> Reto Zaugg
— Master BWL, Management
> Stefan Imhof
— Master BWL, Wirtschaftsinformatik
2

Ziel, Motivation
> 10 Jahre Tabakpräventionsprojekte
> Ziel BAG:
— bisherige Fördertätigkeit visualisieren
— Besonderheiten, Stärken und Schwächen des Mitteleinsatzes
— Grundlage für Diskussion über zukünftige Strategien
> Unsere Motivation:
— Einstieg ins Programmieren
— Aussagekräftige App erstellen
3

Datenquelle: Ursprungsformat
4

Datenquelle: Transformation
5
> Was haben wir:
— Einzelne Projekte mit Projektdauer und z.T. mehreren Settings
> Was wir brauchen:
— Kumulierte Ausgaben pro Zeitpunkt pro Setting
> Unsere Transformation:
— Handarbeit
— Umrechnungstabelle

Datenquelle: Endformat
6
Mr. Data Converter:
XLS -> JSON
http://shancarter.github.io/mr-data-converter/

Programmieren
> Snippets suchen, testen und auswählen
> Code kennenlernen und verstehen
> Code anpassen, u.a.:
— 3 anstatt 1 Variablen
— 3 anstatt 1 Visualisierungen
— Achsenbeschriftung (Zahlen- und Datumsformat)
> Webseite erstellen (HTML)
> CSS Anpassungen
> Testen und Korrektur der Daten
7

Resultate: Live App-Demo
> www.puegi.ch/opendata
8

Gruppe 25
Daten zur Tabakprävention
Geliefert vom BAG

Wir
Antje Ködel
Bachelor BWL/VWL
Timothy Grüninger
Bachelor BWL/Englisch

Motivation
• Crossover Vorlesung
• Grober Einblick in die IT-Welt
• Aneignung von Programmierfähigkeiten
• Praxisbezug
• Kompliziertes möglich einfach darstellen

Visualisierungsziel
7 Förderbereiche im Bereich Tabakprävention.
Jeder Förderbereich spricht gewisse Zielgruppen an.
Wie viel wird in die jeweiligen Zielgruppen investiert?
Wie viel wird in die Förderbereiche investiert?
Darstellung dieser Grössen als D3-Sunburst

Kombination & Kontrolle der Daten

Resultat nach viel Getüftel
Zur Webpage

Vorstellung der Open Data App
Budget allocation for development aid

Vorstellung
Patrick Fahrni; Bachelor-Studiengang
Beginn HS2012; Major BWL
Priska Maurer; Master-Studiengang
BuisinessAdministration; Schwerpunkt
Marketing

Aufgabenstellung: Daten-Input
Budgets der Jahre 2009, 2010, 2011
Aufteilung bezüglich Domain Modality Thematic Geographical
Regional Cooperation Bilateral & Multi-Bi
Agricultural water
resources Asia
Global Cooperation Multilateral Agricultural policy Sub-Saharan Africa
Humanitarian Aid
NGO (incl. Aide
alimentaire d’urgence)
Agricultural
development Latin America
Cooperation with Eastern Europe Agricultural research Europe & CIS
Rural development MENA
Forestry development Global
Transportation
Agro-biodiversity
Others

Schritte
• Wahl der passenden Grafik
• Excel  Json (für Baum-Darstellung), tsv (für
„Stack to Multiples“)
• Implementierung des D3.js Codes
• Anpassungen am Code
• Gestaltung der restlichen Seite
– Titelbild
– Einleitungstext

Output
• Link:
• http://sandbox.iwi.unibe.ch/~pf12w270/Exam
ples/baumPF.html
• Code Snippet für „Baum Darstellung“
• http://mbostock.github.io/d3/talk/20111018/
tree.html
• Code Snippet für „Stack to Mulitples“
http://bl.ocks.org/mbostock/4679202

Open Data App
Visualisierung von Ausgabendaten
für Entwicklungshilfe der Schweiz
Präsentation 22.05.2014
Stephanie Buechel
Taner Aydin

Team
Stephanie Buechel
Major: Master
Betriebswirtschaft
Vorkenntnisse: Keine
Wieso Open Data:
weil Programmieren allgegenwärtig ist;
Steigender Bedeutung in der Zukunft
Taner Aydin
Major: Bachelor
Betriebswirtschaft
Minor: Sozialwissenschaften
Vorkenntnisse: Keine
Wieso Open Data:
Daten werden immer wichtiger und
allgegenwärtig. Interessiert an
Grundkenntnissen in Programmieren.

Ziel / Motivation
• Visualisierung der Ausgaben im Bereich
Entwicklungshilfe (DEZA)
• Visualisierung muss einfach auf Hardcopy
übertragbar sein
• Vergleich über die verschiedenen Jahre muss
möglich sein
• Schaffung von Transparenz bei der
Ausgabenseite (da Ausgaben immer kritisch
betrachtet werden)

Datenquellen
• Daten vom DEZA, erhalten durch Data-Coach
• Ursprungsformat der Daten war .xls
• Zahlen waren mit 1000-Trennzeichen
versehen
• Waren Kommastellen enthalten (Rappen)
• Endformat der Daten sind .csv

Vorgehen
• Daten formatieren in .csv und .json
• Wahl des Visualisierungs-Layouts
• Erarbeitung des Stylesheets
• Programmieren der App mittels JavaScript

Visualisierung der
Innovationsaktivitäten in der
Schweizer Wirtschaft
von:
Marc Brunner
Julian Kubaty
22.05.2014 1
Institut für Wirtschaftsinformatik
Universität Bern
Staatssekretariat für Wirtschaft SECO

Personen
Marc Brunner
Student der Betriebswirtschaftslehre, 4. Semester
Nebenfach: Volkswirtschaftlehre
Julian Kubaty
Student der Betriebswirtschaftslehre, 6. Semester
Nebenfach: Obligationen- und Wirtschaftsrecht
Programmierkenntnisse = 0
22.05.2014 2
Universität Bern

Motivation und Ziele
• Daten entstammen dem Strukturbericht zu den Innovationsaktivitäten der
Schweizer Wirtschaft erstellt durch das SECO in Zusammenarbeit mit dem KOF
• Daten sind als xls-Files auf der Homepage des SECO verfügbar, sind aber nicht
maschinenlesbar
• http://www.seco.admin.ch/themen/00374/00459/04076/04077/index.html?lang=de
Ziele:
• Visualisierung der Daten um damit den Bericht einfacher verständlich zu
machen und Trends grafisch erkennen zu können
• Durch einfache Visualisierung sollte es auch für Personen ohne
entsprechenden wirtschaftlichen Hintergrund einfacher werden die Daten zu
interpretieren
• Wichtig: der Bericht muss, um das Verständnis für die einzelnen
Variablen/Dimension zu haben, trotzdem gelesen werden.
 App dient nur als Ergänzung, nicht aber als Ersatz
22.05.2014 3
Universität Bern

Datenquellen / Datenverarbeitung I
• Daten sind auf der Homepage des SECO als xls-Files zu finden
• Befinden sich aber nicht in einem maschinenlesbaren Format
• Erstellen eines Excel-Makros, welches die Daten automatisch in ein
Format bringt welches durch die App lesbar ist
22.05.2014 4
Universität Bern

Datenquellen / Datenverarbeitung II
• Anschliessender Export zu csv-File
• Somit ist nun ein automatischer Import durch das App möglich
22.05.2014 5
Universität Bern

Datenquellen / Datenverarbeitung III
• Aufschlüsselung der Daten nach 5 Themenblöcken:
• Weitere Aufschlüsselung nach …
22.05.2014 6
Universität Bern
Innovationsleistung / Wissensnetzwerke / Ziele / Hemmnisse / Förderung

Datenquellen / Datenverarbeitung IV
22.05.2014 7
Universität Bern
Regionen

Datenquellen / Datenverarbeitung V
22.05.2014 8
Universität Bern
Branchen

Datenquellen / Datenverarbeitung VI
22.05.2014 9
Universität Bern
<50 MA 50 - 250 MA >250 MA
Grösse

Visualisierung I
• Ausgangslage: Starke Multidimensionalität
 Gesucht war ein App welches mehrere Dimensionen darstellen
kann
• Wahl viel auf: mehrere Donuts
 einfach verständlich und populär da sie mehrere Dimensionen auf
einmal darstellen können
• Jeder Donut stellt eine Branche/Grösse/Region dar
• Segmente stellen prozentuale Nennung der Variablen dar
• Zeitdimension kann durch laden der Daten „visualisiert“ werden
 dazu später mehr
22.05.2014 10
Universität Bern

Visualisierung II
• Pro Dimension wurde ein App erstellt (Layout ist aber identisch)
22.05.2014 11
Universität Bern
 Durch Klicken der Jahreszahlen
werden automatisch die
entsprechenden Daten geladen
und visualisiert
 Homepage:
http://sandbox.iwi.unibe.ch/
~mb12n011/
(Funktioniert nur innerhalb
Uninetzwerk oder über VPN)

Visualisierung III
• Wichtiger Aspekt: Veränderung der Daten im Zeitverlauf
• Darstellung sollte übersichtlich sein, trotz vieler Variablen
• Wahl des Klassikers: Line Chart
einfache und verständliche Darstellung
 einzelne Linien können mit mouseover-Funktion hervorgehoben
werden
22.05.2014 12
Universität Bern

Visualisierung II
22.05.2014 13
Universität Bern
 Durch Klicken der
Themenbereiche werden
automatisch die entsprechenden
Daten geladen und visualisiert

Erstellung App
• Als Grundlage diente ein Code aus der d3js.org-Bibliothek
 http://bl.ocks.org/mbostock/3888852
 http://bl.ocks.org/mbostock/3884955
• Diverse Anpassungen
– Buttons und Funktion um Jahres-/Themendaten automatisch zu laden
– Tooltip, welcher zusätzliche Daten und Prozentzahl anzeigt
– Sonstige Anpassungen der Darstellung um Usability zu erhöhen
• Erstellung einer Homepage und Einbindung der Apps
22.05.2014 14
Universität Bern

Präsentation
Open Data App
Konstantin Niedermann
Oscar Meier

Team
Oscar Meier &
Konstantin Niedermann
Bachelor
(Major Informatik Minor WI)

Aufgabenstellung
● Visualisierung der Belastung von ÖV -
Verbindungen durch SBB Mitarbeitende
○ Absolutwerte Pro Strecke
○ Relative Werte im Verhältnis zur Gesamtzahl der
Reisenden

Datenquelle
● Ursprung: JSON Datei (Person im Zentrum)
○ Für jeden SBB-Mitarbeitenden:
■ Befahrene Strecke
● Haltestationen
○ Koordinaten
○ Verkehrsmittel
■ Servicenummer
■ Datum und Uhrzeit für Abfahrt / Ankunft
■ Auslastung / Kapazität

Datenquelle
● Endformat: JSON Datei (Verbindung im
Zentrum)
○ Für jede befahrene Strecke:
■ Koordinaten der beiden Stationen
■ Für jede Fahrt (Unterschiedliche Zeiten)
● Anzahl SBB-Mitarbeitende
● Serviceinformationen
○ Servicenummer
○ Abfahrtsort / Destination
○ Datum und Uhrzeit
○ Auslastung / Kapazität

Vorgehen
● JSON Verarbeitung
● Erste Visualisierung
○ Streckenvisualisierung
○ Erste Filtermöglichkeiten
● Kundenmeeting
● Verbesserungen
○ Erweiterter Datensatz der SBB u.A. mit Kapazitäten
○ Erweiterung der Filter
○ Benutzerfreundlichkeit

Resultat
www.discover-the-world.ch

IT-Kennzahlen
Auf der Suche nach den kantonalen
IT-Kostentreibern

Team
Tanja Hüppi
Major Sportwissenschaft
Minor BWL
Corina Feuerstein
Major Sportwissenschaft
Minor BWL

Ziel
• 5 Leistungsindikatoren
6 Finanzindikatoren
= 30 Möglichkeiten
• Interaktive,
benutzerfreundliche &
übersichtliche
Visualisierung
• Integration in Corporate Identity der SIK

Vorgehen
• Einarbeitung in Daten  Workshop Tessin
• Analyse
• Java Script Bibliotheken (jQuery, D3)
• Programmierung (self.html)
• Diagramm mit einer Achse
• Diagramm mit zwei Achsen
• Feinschliff

Resultat
http://www.sik.ch/opendata/
http://sik.ch/opendata/Hompage.html

Impact
• Schnelleres &
effizienteres Arbeiten mit App
• Vermeidung von falschen Interpretationen:
anonymisierte Daten bis zur Verbesserung der
Darstellung & Begründungen

Danke!
• Grégoire Hernan
• Marc Jäger
• Donat Sterren

Volksschulstatistik Kanton Bern -
Schuljahr 2012/13
Open Data App Präsentation
Marco Grütter und Tim Steiger
Universität Bern
Wirtschafts- und Sozialwissenschaftliche Fakultät
Institut für Wirtschaftsinformatik (IWI)
22. Mai 2014, im Rahmen der Vorlesung Open Data: Datenmanagement und Visualisierung

2
> Name: Marco Grütter > Name: Tim Steiger
> Hauptfach: BWL > Hauptfach: VWL
> Nebenfach: SOWI > Nebenfach: BWL
> Semester: 6 > Semester: 6
> Stufe: Bachelor > Stufe: Bachelor
Team
Marco Grütter, Tim Steiger (22.05.2014), Präsentation der Open Data App

Ziel und Motivation
> Zunehmende Bedeutung von „Open Data“ im Informationszeitalter
> Auseinandersetzung mit der graphischen Darstellung von Daten zur
besseren Bewältigung der “Datenflut“
— „Ein Bild sagt mehr als tausend Worte“
> Entwicklung einer interaktiven Data-App mit den Volksschuldaten
des Kantons Bern
> Oberstes Ziel: Einfache und intuitive Darstellung der Rohdaten
3

Datenquellen
> Data Coach: Jürgen Allraum
> Daten: Volksschulstatistik Kanton Bern (2012/13)
http://www.erz.be.ch/schulstatistik
> Dateiformat: CSV
4

> Analysieren der Daten
> Säuberung der Daten
> Auswahl der Visualisierungsart
— Choropleth: Farbe
http://bl.ocks.org/mbostock/4060606
— Swiss TopoJSON: Karte Schweiz
http://bl.ocks.org/herrstucki/4327678
— Legende und Zoom:
http://bl.ocks.org/herrstucki/6312708
> Anpassung der Snippets
> Erstellung eigener Legende/Knöpfe
5
Vorgehen

6
Resultat
> Öffentlicher Link via githhub erstellt:
— http://tdjs.github.io/

APP: Schuldaten
Studenten: Roger Stebler und Nadine Liechti
Data Coach: Jürgen Allraum
Professor: Dr. Matthias Stürmer und Prof. Thomas Myrach
Jahr: Mai, 2014

Team
Roger Stebler Nadine Liechti

Ziel und Motivation
Motivation
• Persönliches Interesse an Schuldaten
Ziel
• Sehr viele Daten, in Tabellenform kaum vergleichbar
• Interessant: Veränderung Daten nach Regionen
• Darstellung verschiedener Aggregationsebenen
(Schulhaus, Region/Ort, Kanton)

Resultat
http://sandbox.iwi.unibe.ch/~rs08d723/

Datenquellen
Erziehungsdirektion Bern
Datacoach: Jürgen Allraum
Ursprungsformat / Endformat: CSV
WWW:
http://www.erz.be.ch/erz/de/index/direktion/organisation/genera
lsekretariat/statistik/schul-_und_gemeindetabellen.html

Vorgehen
1. Daten erhalten (CSV Format)
2. Karte
3. Kuchendiagramm erstellt
4. Koordinaten angefordert
5. Daten implementiert
6. Rückfragen Daten
7. Beschrieb und Quellen

Schulstat
Volksschuldaten Kanton Bern

Team
Arun Sittampalam
BSc Informatik
Oliver Stapleton
BSc Informatik

Aufgabenstellung
• Visualisierung der Volksschuldaten des Kanton
Bern
• Motivation:
– Transparenz, bessere Kenntnisnahme der
Statistikdaten
– Insbesondere Aufzeigen von Unterschieden
zwischen den Regionen, Bildungsstufen,
Unterrichtssprachen, Kostenträgern

Resultat
• 20 Visualisierungen:
– Karten, Balken-, Kuchen-, Baumdiagramme, Treemap,
Sunburst, Spiderchart
• Gliederung nach 5 Kategorien:
– Gebiete, Bildungsstufen, Schultypen, Sprachen,
Kostenträger
• Diskussion der Erkenntnisse, ausführliche
Dokumentation
• App mit 2 Modi:
– Nur Visualisierungen oder Visualisierungen + Text
• Siehe: http://st4ple.github.io/schulstat/

Datenquelle
• Volksschuldaten Kanton Bern aus dem Jahr
2012
• Data Coach: Jürgen Allraum vom Kanton Bern
• Ursprungsformat: CSV-File publiziert auf
Website des Kantons
• Endformate: siehe Referenzen im Quellcode
und http://st4ple.github.io/schulstat/#dateien

Vorgehen
1. Säubern der erhaltenen Daten in Rohdaten
2. Analysieren der Daten
3. Einarbeiten in D3.js
4. Auswahl der Visualisierungsarten
5. Aggregation und Verarbeitung der Daten in
benötigte Form
6. Erstellen der Visualisierungen
7. Zusammensetzen der Website
Siehe auch: http://st4ple.github.io/schulstat/#vorgehen

Schlusswort
• Aufbereiten der Daten und Erstellen der
Visualisierungen und der Website hat Spass
gemacht
• Wir haben dabei viel gelernt
• Besucht die Website für mehr Details!
– http://st4ple.github.io/schulstat/

Open Data Visualisierung
Volksschuldaten des Kantons Bern
Universität Bern
20.05.2014

2
Über uns
Rene Gadow
Bachelor
Computer Science
BWL
Urs Zysset
Bachelor
Computer Science
BWL

3
Rohdaten
CSV mit Schülern, Schulen, Gemeinden, Stufen etc.

4
Visualisierungen im Überblick

5
App
http://uzysset.github.io/OpenData/

OPEN DATA
APP
DATENMANAGEMENT UND VISUALISIERUNG

ABLAUF
1. Vorstellung Team
2. Ziel und Motivation
3. Resultat
4. Datenquellen
5. Vorgehen

2. VORSTELLUNG TEAM
• Anna Bohnenblust:
• Abschluss Master in Sprachwissenschaften (Linguistik, Germanistik)
Northern (Arctic) Federal University, Archangelsk RU
• Abschluss Bachelor of Science in Betriebsökonomie, All-Russian
Distance Institute of Finance and Economics, Moskau RU
• Keine Erfahrung im Programmieren
• Nicole Bürki
• Abschluss Bachelor of Science in Betriebsökonomie Fachhochschule
Freiburg
• Anstellung bei der Post CH AG
• Keine Erfahrung im Programmieren

3. ZIEL UND MOTIVATION
• Etwas Neues lernen
• Programmieren erlernen
• Interessante Materie
• Grosse Herausforderung, da keine Erfahrung
• Gute Leistung / Resultat erzielen

4. RESULTAT
• Link zum App
• http://sandbox.iwi.unibe.ch/~ab
13l082/Examples/App/Grossrat
swahlen%202014.html

5. DATENQUELLEN
• http://www.sta.be.ch/sta/de/index/wahlen-
abstimmungen/wahlen-
abstimmungen/wahlen/wahlen_2014.html
• Daten von Smartvote in Excel-Format

5. VORGEHEN
• Themensuche
• Datenrecherche
• Unterlagen studieren
• Ausprobieren
• Erarbeitung App

Viktor Kitanov & Reto Vogt
Open Data: Datenmanagement und
Visualisierung
Hydro-App: Abfluss und Temperatur von
5 Schweizer Flüssen

Team
>  Viktor Kitanov
—  Bachelor VWL
—  6. Semester
>  Reto Vogt
—  Bachelor BWL
—  6. Semester
20.05.14 2

Ziel
>  Den Verlauf von Abfluss und Temperatur von 5 Schweizer
Flüssen visualisieren
>  Hydrologische Daten von Messstationen in „natürlichen“
Einzugsgebieten verwenden (z.B. keine verfälschten
Wasserstand-Daten durch Schleusen, AKWs etc.)
>  Langfristige Trends sichtbar machen
1.  Haben sich Abfluss und Temperatur im Beobachtungszeitraum
systematisch verändert?
2.  Gibt es regionale Unterschiede?
20.05.14 3

Resultat
20.05.14 4
Link zum App: http://sandbox.iwi.unibe.ch/~vk11m230/Hydro-App/Hydro-App.html

Messstationen
20.05.14 5
>  Rietholzbach (Mosnang, SG)
>  Grosstalbach (Isenthal, UR)
>  Rosegbach (Pontresina, GR)
>  Sense (Thörishaus, BE)
>  Massa (Blatten bei Naters, VS)

Daten
>  Datenquelle: Bundesamt für Umwelt (BAFU)
>  Art: Tägliche Daten zu Temperatur und Abfluss von
folgenden Schweizer Flüssen:
1.  Rosegbach (Pontresina)
2.  Grosstalbach (Isenthal)
3.  Massa (Blatten bei Naters)
4.  Rietholzbach (Mosnang)
5.  Sense (Thörishaus)
>  Zeitraum: 19.02.2004 bis 06.12.2013
>  Ursprüngliches Format: ASC
20.05.14 6

Vorgehen
1.  Wahl einer geeigneten Visualisierungsvorlage
2.  Übertragen der Daten vom Ursprungsformat (ASC) ins
Zielformat (JSON)
3.  Anpassen der Vorlage auf unsere Hydro-Daten
—  X-Achse von „Einkommen“ auf „Zeit“
—  Y-Achse von „Lebenserwartung“ auf „Temperatur“
—  Kreisfläche von „Bevölkerungsgrösse“ auf „Abfluss“
4.  Ergänzung der Vorlage mit zusätzlichen „Features“:
—  Kurven, die den Verlauf der Kreise abbilden
—  Buttons um jeden Fluss einzeln zu betrachten
—  Mouse-Over Funktion zur Anzeige der Abfluss- und Temperaturwerte
—  uvm.
20.05.14 7

Today’s Overview
• Background1-2
• Result3-4
• Findings5

1. Who’s Who
Lead Contact information
Pramod Sasidharan pramod.sasidharan@students.unibe.ch
Chetan Pandit chetan.pandit@students.unibe.ch
Data Coach Max Ursin max.ursin@ingridag.com
Coach Daniel Studer dani.studer@gmx.li
1-2 3-4 5

Welcome
Pramod Sasidharan
Msc Business Administration
University of Bern
Chetan Pandit
Msc Business Administration
University of Bern

2. Requirements
• Preparation and visualisation of existing data
• Organization of data set
• Selection of meaningful graphs
• Parameters (area, value, stack etc.)
• Three dynamic graphs
• Establish appropriate relation between
graphs (timing)
1-2 3-4 5

Time Spent
ProjectsWorkedOn
Get Familiar
Achieve
Mastery
Our Goal & Motivation
Get
Experienced

3. Result – The change of data
• Original data to .tsv
1-2 3-4 5

4. Result – Our App
• http://sizchart.herokuapp.com/chart/index.php
1-2 3-4 5

• Complexity: According to
topic (Energy model data)
and provided data
• 1. : Reading programmes
to match requirements
• 2. : Programming
according to data and
possibilities (expectations)
• 3. : Try and fail
(limitations&exchange with
coaches)
• 4. : Visualisation
based on data and
programming
possibilities (creativity)
• 5. : Implementation
focus lays on usability
and data expressiveness
4. Step by Step
1-2 3-4 5

5. Summary
• Complexity as challenge
– Technological as well as personal
(Lack of knowledge)
• Set realistic expectation
– Mastery is not achieved overnight
(Possibilities are not clear from the beginning)
• Keep your eye on the goal
– Client-centric app based on data coach’s
expectations
1-2 3-4 5

Resources
• Open Energy Data App
http://sizchart.herokuapp.com/chart/index.php
• Literature
Murray Scott, Interactive Data Visualization,
2013

Open Data Montemedia
Sébastien Broggi, Lukas Riesen
Universität Bern 2014
Professoren: Thomas Myrach, Matthias Stürmer

Team
Sébastien Broggi
- Informatik
- 4. Semester
Lukas Riesen
- Informatik
- 4. Semester

- Daten der Öffentlichkeit zugänglich machen
- Attraktive Visualisierung von Daten
- Webapp erstellen
- Neue Erfahrungen mit Frameworks und im
Bereich der Datenanalyse sammeln
Ziel und Motivation

- Montemedia http://www.montemedia.com/
- xlxs Datei (Excel)
Date;Device Type;Country;Region;City;Browser;OS;
Language (browser);Language (OS);Screen Size;
JS enabled;Supports Flash;Cookies Enabled;Pageviews
- csv Datei -> Objekt
Land: d.Country,
Kanton: d.Region,
Device: d['Device Type'],
OS: d.OS,
Browser: d.Browser
Datenquelle

- Programmieren in Cloud9 (http://c9.io)
- Einarbeitung in Polymaps & D3
- Daten in sinnvolles Format bringen
- Logik zur Datenverarbeitung und
Visualisierungen programmieren
- Libraries einbinden
- Daten für Scripts aufbereiten
- Visualisierungen(Sunburst, BarChart, etc.) anpassen
- Design des Apps
Vorgehen

- Realisierung durch Polymaps & D3
- Aufzeigen der Datendichte pro Kanton
- Auftreten verschiedener Eigenschaften der
Geräte relativ zur Datenmenge der Region
- Darstellung in verschiedenen Formen
- Map
- Sunburst Sequence Diagram
- Bar Charts
Demo: http://opendata.br-it.ch
Resultat

Presentation.theEnd();
Vielen Dank für Ihre Aufmerksamkeit;

Open
Data
App:
Zoomable
Map

Dominik
Seliner

“Team“

•  Dominik
Seliner

•  Major:
Informa:k

•  Minor:
BWL
und
VWL

Ziel,
Mo:va:on

•  Etwas
neues

•  Universell
einsetzbar

Ø Idee:
Schweizerkarte
mit
zoom-‐funk:on

Resultat

•  Demo:

– hLp://swisszoom.businesscatalyst.com/

•  Github:

– hLps://github.com/selinerdominik/swiss_zoom

– (Mitarbeit
erwünscht)

Datenquellen

•  Montemedia
(Nutzerdaten)

•  Ursprungsformat

– Exel-‐Tabelle

– Ein
Eintrag
pro
Benutzer

– 20‘000
Einträge

– 2.3
Mb

•  Endformat

– CSV

– Ein
Eintrag
pro
Gemeinde

– 11
Kb

Vorgehen
(Karte)

•  Kartendaten
beschaﬀen:

– Admin.ch
GEOSTAT
(www.geostat.admin.ch/)

1.  Umwandeln
in
GeoJson

•  Datengrösse
über
4
Mb

2.  Umwandeln
in
TopoJson

•  Datengrösse
knapp
2
Mb

3.  Details
endernen
(hLp://www.mapshaper.org/)

•  Datengrösse
600
Kb

Vorgehen
(Daten)

1.  Exel-‐Tabelle
in
CSV
umwandeln

2.  CSV
in
eine
SQL-‐Datenbank
laden

3.  SQL-‐Befehle
um
Besucher
pro
Gemeinde
zu

erhalten.

4.  Neue
Daten
in
ein
CSV
laden

Vorgehen
(Funk:onen)

1.  Zoomfunk:onalität

2.  Daten
zu
Kartenteile
zuweisen

3.  Kartenteile
rich:g
einfärben

4.  Usability-‐Elemente
(Legende
und
Tips)

DasA-Team
Sammer Puran
Informatik-Student
Pascal Giehl
Informatik-Student

Motivation&Ziel
Entwicklung einer Analyse-
Möglichkeite für moderne und
zugeschnittene Werbung

DasResultat:
http://swisszoom.businesscatalyst.com/
Swissmap.html

Datenquelle
Wir haben 20’000 Datensätze
der Montemedia AG zur
Verfügung gestellt
bekommen.
Dankeschön an:
Bora Günaydin
Im .xlsx-Format erhalten und
zu .json weiterverarbeitet.

Kochrezept-
Vorgehen
1. Ein JS mit schweizer Karte
erstellen
2. 500g Daten eingelesen und
berechnung der Werte
3. Färbung der Karte nach den
Werten mit
Lebensmittelfarbe
4. Erstellen weiterer,
tiefergehender Diagramme
gem. seperatem Kochrezept.
5. Ansehen und geniessen!

Open Data App
„Altersstrukturwandel“
Bachelor Major Betriebswirtschaftslehre
Prof. Dr. Matthias Stürmer
22. Mai 2014
Carina Müller, Elias Koster

Carina Müller
 BWL im 6. Semester
 Nachhaltige Entwicklung
 Interesse für Gesellschaftsfragen
 keine Programmiervorkenntnisse

Elias Koster
 BWL im 8. Semester
 Nachhaltige Entwicklung
 Interesse an Politik
 keine Programmiervorkenntnisse

Ziel, Motivation
 Interessen einbinden
 Veränderung der Altersstruktur aufzeigen
1960 heute

Resultat
http://sandbox.iwi.unibe.ch/~ek10t486/

Datenquellen
 Ursprungsformat
 Daten: Ständige Wohnbevölkerung (Total) nach Alter
 Quelle:
http://www.bfs.admin.ch/bfs/portal/de/index/themen/01/02/bl
ank/data/01.html
 in Libre-Office Datenstruktur bearbeitet

Vorgehen
1. Daten suchen
2. Daten aufbereiten
3. D3 Vorlage auswählen
4. In Brackets bearbeiten
5. Visuelle Anpassungen
6. In IWI Sandbox laden

Danke
für eure Aufmerksamkeit

Bevölkerungsdynamik der Schweiz
Team
• Lukas Kälin
• BWL-Studi
• Keine
Programmierkenntnisse
1
Jasmine Quanbrough
Psych-Studi
Grundkenntnisse in C & HTML

> Ziele & Motivation:
Auswirkungen der Bevölkerungsdynamik auf die
Finanzierung der AHV?
> Datenquellen:
Bundesamt für Statistik:
– Bevölkerungsdaten im Zeitvergleich 1950-2012
(opendata.admin.ch)
– Ständige Wohnbevölkerung der Schweiz, mittleres Szenario
2010-2060
2
Daten & Ziele

① Aufbereitung der Daten
② Erstellen des Balkendiagramms, mit den drei
Altersgruppen
③ Hmmm...: Wie wird das nun interaktiv ???
 Zeitdruck
④ Ein Kreis soll den Anteil der geklickten Gruppe
zur Gesamtbevölkerung repräsentieren.
⑤ Jetzt nur noch in den Browser damit und Voilà!
3
Hacking-Rezept

> http://sandbox.iwi.unibe.ch/~jq12h337/Open%20Data/
4
Und es werde visualisiert...

Open Data App:
Veränderung der Heiratsrate über die Zeit

Team
• Nartnarin Hallwyler
o Psychologiestudentin
o NF: BWL, Sozialwissenschaften
o wenig Programmiererfahrung
• Damian Schmutz
o Psychologiestudent
o NF: BWL
o keine Programmiererfahrung

Motivation
• Aktualität und Relevanz
• Interesse (Studium)
• Belege zum Wandel nach der 68er-Bewegung

Resultat
• Darstellung der Heiratsrate
• 1960 - 2012
• http://gruppe23.square7.ch/OpenData/index.php

Daten
• Quelle:
http://www.bfs.admin.ch/xmlns/opendata/je-d-01.02.02.02.02.01.ods
• Ursprungsformat: .ODS
• Endformat: .HTML

Vorgehen
1. Datenbereinigung und -aufbereitung
2. Datenanalyse
3. Auswahl der Visualisierung
4. Modifizierung der Daten
5. Onlinepräsentation

Noch quellen der texte?
• www.derbund.ch
• www.20min.ch
• www.watson.ch
• www.tagesanzeiger.ch

André Gsell (andre.gsell@students.unibe.ch)
Eolo Ulrich (eolo.ulrich@students.unibe.ch)
22. Mai 2014
Im Rahmen der Vorlesung Open Data:
Datenmanagement und Visualisierung
Dr. Matthias Stürmer und Prof. Dr. Thomas Myrach
Informationsmanagement
Datenviewer für Comparatif Kanton ZH,
2002-2012. Die Entwicklung der Finanzlage
bei den Zürcher Gemeinden.

Team 33
2
 André Gsell (TG)
Bachelor in Internationalen Beziehungen, HSG
 Eolo Ulrich (TI)
Bachelor in Kommunikationswissenschaften, USI
Seit September 2012:

Ziel und Motivation
3
 Öffentlicher Sektor
 Entwicklung der finanzielle Lage der Zürcher Gemeinden
 Kurs Prof Dr. Nils Soguel am IDHEAP Lausanne
 Kartographische Darstellung / GIS4Web

Datenquellen und Verarbeitung
4
 Kanton ZH publiziert Gemeinderechnungen über das
Datenportal des Bundes opendata.admin.ch
 Import der Daten in Microsoft SQL Server
 Berechnungen in SQL
 Dynamisch über Views – skalierbar
 Einfach reproduzierbar da Skriptsprache
 11 Seiten SQL Script
 Export in Excel, Ablage als TSV

Resultat
5
 Datenviewer Comparatif Kanton ZH, 2002 – 2012:
http://www.actmore.ch/comparatif/
 Komponenten:
 Umgang mit Daten (TSV)
 Karte (TopoJSON) mit Choropleth
 Slider
 HTML Form-Objekte
 MouseOver Effekt
 Queue.js für synchrone Verarbeitung
 …

Vorgehen
6
 Karte: 171 Path-Objekte
 Shapefile der Gemeinden vom Kanton ZH publiziert
 Konversion in TopoJSON über shpescape.com
 Einbindung mit Queue in D3.js
 Einfärbung der Gemeinden mittels Chloropleth
 Daten: Handling von ~2300 Records
 Auslesen aus TSV mit .filter
 Interface: Herausforderung verschiedene Granularität der
Daten in einer Oberfläche
 Karte: Stufe Jahr und Indikator
 Liniengrafik: Stufe Gemeinde und Indikator
 Details: Stufe Gemeinde, Jahr und Indikator

1
Open Data App:
Öffentliche Finanzen der Schweiz
Vergleich auf Bundes- , Kantons- und Gemeindeebene
Jonas Felder Oliver Saurenmann
Master BWL (WI) Master BWL (Mgmt)
Open Data
22. Mai 2014

2
Ziele und Motivation
Kontext:
Angespannte Situation bei den Öffentlichen Finanzen
Fragen:
- Wie sehen die Ausgaben der öffentlichen Hand in der
Schweiz aus?
- Wie sehen die Ausgaben im Vergleich zwischen den
verschiedenen Ebenen aus?
- Wo wird für was Geld ausgegeben?
22. Mai 2014
Open Data

3
Vorgehen
- Präzisierung, was Nutzer wissen möchten
- Suchen und Auswahl der Daten
- Analyse und Auswahl der Visualisierungsarte(n)
- Aufbereitung der Daten
- Programmierung der App:
- Hilfssystem:
22. Mai 2014
Open Data

4
Datenquelle
– Eidgenössische Finanzverwaltung (EFV)
– Berichterstattung > Öffentliche Finanzen > Rohstoff
– xls-Files jeweils für:
– FS-Modell auf Grundlage von HRM2 & NRM (IPSAS)
– GFS-Modell (GFSM2011 des IWF)
– JSON-Format: > 100’000 Datensätze
22. Mai 2014
Open Data

5
Resultat
http://www.saurenmann.ch/openapp-finanzdaten
22. Mai 2014
Open Data

We are the world ... of debt
Visualization of governmental dependencies
based on open data and d3.js
Cyrill Rast 09-125-329
Marc Rey 03-131-968
22 May 2014, Open Data: Datenmanagement und
Visualisierung

We are ...
Cyrill Rast
> Master (BWL, Finance)
> 10 Semester
> Coding Experience: Little
Marc Rey
> Bachelor (Economics)
> 10 Semester
> Coding Experience: Little
— Intr. Computer Science
22014-05-22. Open Data. Cyrill Rast & Marc Rey
We are the world ... of debt. Visualization of governmental dependencies.

What drove us...
> What do we want to get out of it?
— Data: Economics
— Impact: Current Issue
— Complexity Level: Newbies want to learn about data
visualization
— Creativity: Show alternatives to common statistical
visualizations
> Topic
— governmental dependencies
— based on debt
— Who owes whom? Who owns whom?

What inspired us ...
> It’s All Connected: An Overview of the Euro Crisis
— The New York Times, October 22, 2011
— http://www.nytimes.com/interactive/2011/10/23/sunday-review/an-overview-of-the-euro-crisis.html?_r=1&
> What did we intend to do differently?
— Multiple years, easy to keep it up to date
— Multiple country selections

Have a look!
> www.roxxistic.me/blog/we-are-the-world-of-debt/

Data
> Data Sources:
— IMF e-Library Data
– http://elibrary-data.imf.org/DataExplorer.aspx
— Eurostat
– http://epp.eurostat.ec.europa.eu
> Data Availability
— Data can be filtered by multiple criteria
– Country, Counterparty, Time Range, Database ...
— Data can be downloaded as CSV-File

Step by step
> Data
— getting the data
— getting the right data
— narrowing down to a smart selection of data
> Code the visualization
— Layout: Chord Diagram
— Issues:
– the chord diagram is quite complex
– there are several open source solutions
– each provides some parts to the solution but not all (no
template to fill in)
– each is based on a quite different code usage
— Coders are nice and helpful ;)

What have we learned?
> The more data sets, the more difficult to select and retrieve
the right ones.
> Interactive and out-of-the-box visualization of statistics
provides a new and easy-to-grasp perspective.
> Code is standardized – and it is not.
> Creating visualizations is fun – as soon as it works.

Crime and Unemployment in Europe
Data Visualization at University Bern
In Open Data: Datenmanagement und Visualisierung
Tobias Graf
Manuel Maurer

Team
– MSc in Business Administration: Tobias
– BSc in Business Administration: Manuel

Ziel, Motivation
• Persönliches Interesse
– Open Data
– Visualisieren von Daten
– Programmieren (GeoJSON, D3…)
• Aufgabenstellung
– Vergleich Arbeitslosigkeit und
Kriminalitätsraten
– Unterschiedliche Kriminalität
– Landesabhängigkeiten
– Alles im zeitlichen Vergleich

Resultat
• http://go-there.ch/visua/
– Korrelation von Arbeitslosen- und Kriminalitätsrate
– Visualisierte Datenreihe von 1994-2012
– Ganz Europa bzw. von 40 Ländern
– …

Datenquellen
• Ursprungsformat
– Von World Bank und Eurostat als XLSX-Datei
• Endformat
– Nach Datenaufbereitung als CSV-Datei

Vorgehen
Datensuche Datenvergleich Datenaufbereitung Programmierung
Datenintegration
und Visualisierung
Unemployment rate von:
• http://databank.worldbank.org
Crime Rate (recorded by police)
and population data von:
• http://epp.eurostat.ec.europa.eu
GeoJSON Europa Map
CityCodes and Coordinates
CSV Data Files
JQuery for Interactive Elements
• Zeitreihe nur bis 2012
• Unvollständigkeit (Liechtenstein)
• Ländername ungleich
(Slovakia vs. Slovak Republic)
(GB=England, Wales,
Scotland, Northern Ireland)
𝐶𝐶𝐶𝐶𝐶𝐶 𝐶𝐶𝐶𝐶 𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟
𝐶𝐶𝐶𝐶𝐶𝐶𝐶𝐶𝐶𝐶𝐶𝐶 𝑦𝑦′ 𝑠𝑠 𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝

Über uns
Zwei Studenten im 4. Semester
Bachelor Informatik
Jan Binzegger
Florentina Ziegler
und

Motivation
•  Wie entwickeln sich die Cryptowährungen im
Verlaufe der Zeit?

•  Noch keine vergleichende Darstellungen
verschiedener Cryptocoins im Web

Was sind Cryptocoins?
•  Währung
•  Weltrekorde
•  Gebührenfrei
Very Secure.
Much Freedom.
So Easy.
Wow!

Quellen
•  Cryptsy HTML-Tabelle
•  Vircurex HTML-Tabelle
•  blockr.io JSON

è MySQL Datenbank
Daten
Graphen
•  d3Pie Alpha
•  MPF Vis Chart

Vorgehen
•  Sammeln und Aufbereiten der Daten
•  Bestimmen des Designs
•  Suche nach existierenden Lösungen für die
Graphen
•  Anpassung der Graphen an Daten & Design
•  Einbinden von Bootstrap

mApp
Eine geographische Visualisierung
von Twitter-Kontakten mittels D3.js

Team
Lukas Diener – Informatik
Raphael Reber – BWL

Ziel
• Interaktive Applikation für die Visualisierung von Twitter-
Kontakten
• Neugier / Spielerei
• Ausprobieren des Twitter realtime API

mApp
• Demo Online (opendata.zeilenwerk.ch)
• Code im Bitbucket-Repository

Datenquelle
• Twitter-API
• Gratis
• Zugriffsbeschränkung (15 Anfragen pro User)
• Serverseitiger Zugriff über Twitter-Gem
• Geocodierung
• Google Geocoding API (direkt über HTTP requests)

Vorgehen
• Usernamen als Input erhalten
• Bei Twitter authentifizieren
• Follower-IDs bei Twitter abrufen
• Entsprechende Profildaten abrufen
• Geo-Daten aus den Profil-Angaben extrahieren und mittels
Geo-Codierer errechnen
• Darstellen auf einer D3 DataMap
 Applikation in ruby

Zeilenwerkstatt (werkstatt.zeilenwerk.ch)

Open Data Project
Open Movie App
Gruppe 9

Wer sind wir?
Andreas Hohler
Major: Informatik
Minor: BWL, WI, Math
Karan Sethi
Major: Informatik
Minor: BWL, Math

Ziel
● Filmdaten visualisieren
● Persönliche Filmdatenbank erstellen
● Filmliebhaber das Leben einfacher machen

Motivation
● Wir wollen etwas Neues lernen
● Schauen gerne GUTE Filme
● Geld verdienen
● Berühmt werden

Resultat
Link zum Open Movie App: openmovie.ch

Datenquellen
● Quelle: rottentomatoes.com (PHP API)
● Ursprungsformat: json
● Endformat
○ Speicherung in MySQL-Datenbank
○ Übergabe der Daten aus Datenbank, aufbereitet im
json-Format, an d3js

Vorgehen
● Eigene Anbindung an rottentomatoes API
● Spezifische Requests (Listen / Film) und
Datenspeicherung
● Datenaufbereitung & Ausgabe

Präsentationen der 29 Studierenden-Apps der Open Data Vorlesung 2014

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (19)

Ähnlich wie Präsentationen der 29 Studierenden-Apps der Open Data Vorlesung 2014

Ähnlich wie Präsentationen der 29 Studierenden-Apps der Open Data Vorlesung 2014 (20)

Mehr von Matthias Stürmer

Mehr von Matthias Stürmer (20)

Präsentationen der 29 Studierenden-Apps der Open Data Vorlesung 2014