2. Team
> Patric Guggisberg
> Hauptfach: Archäologie
> Nebenfach: BWL
> Programmiererfahrung:
Delphi, C/Side
> Patrik Schori
> Hauptfach: BWL
> Nebenfach: Sport
> Programmiererfahrung:
Keine
3. 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.
4. 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
7. 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)
10. 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
13. 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
14. Erstellung einer funktionierenden App
Erfahrung sammeln mit Programmierung
Visualisierung von Projekten des
Tabakpräventionsfonds
17. Konzeption
Datenbereinigung
Datenübernahme nach csv und nach json
Code Snipping mit D3 (Test- und Echtdaten)
Fehlerbehebung und Feinschliff
22. 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
28. Motivation
• Crossover Vorlesung
• Grober Einblick in die IT-Welt
• Aneignung von Programmierfähigkeiten
• Praxisbezug
• Kompliziertes möglich einfach darstellen
29. 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
39. 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
43. Open Data App
Visualisierung von Ausgabendaten
für Entwicklungshilfe der Schweiz
Präsentation 22.05.2014
Stephanie Buechel
Taner Aydin
44. 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.
45. 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)
47. 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
48. Vorgehen
• Daten formatieren in .csv und .json
• Wahl des Visualisierungs-Layouts
• Erarbeitung des Stylesheets
• Programmieren der App mittels JavaScript
49. 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
50. 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
Institut für Wirtschaftsinformatik
Universität Bern
Staatssekretariat für Wirtschaft SECO
51. 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
Institut für Wirtschaftsinformatik
Universität Bern
Staatssekretariat für Wirtschaft SECO
52. 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
Institut für Wirtschaftsinformatik
Universität Bern
Staatssekretariat für Wirtschaft SECO
53. Datenquellen / Datenverarbeitung II
• Anschliessender Export zu csv-File
• Somit ist nun ein automatischer Import durch das App möglich
22.05.2014 5
Institut für Wirtschaftsinformatik
Universität Bern
Staatssekretariat für Wirtschaft SECO
54. Datenquellen / Datenverarbeitung III
• Aufschlüsselung der Daten nach 5 Themenblöcken:
• Weitere Aufschlüsselung nach …
22.05.2014 6
Institut für Wirtschaftsinformatik
Universität Bern
Staatssekretariat für Wirtschaft SECO
Innovationsleistung / Wissensnetzwerke / Ziele / Hemmnisse / Förderung
55. Datenquellen / Datenverarbeitung IV
22.05.2014 7
Institut für Wirtschaftsinformatik
Universität Bern
Staatssekretariat für Wirtschaft SECO
Regionen
56. Datenquellen / Datenverarbeitung V
22.05.2014 8
Institut für Wirtschaftsinformatik
Universität Bern
Staatssekretariat für Wirtschaft SECO
Branchen
57. Datenquellen / Datenverarbeitung VI
22.05.2014 9
Institut für Wirtschaftsinformatik
Universität Bern
Staatssekretariat für Wirtschaft SECO
<50 MA 50 - 250 MA >250 MA
Grösse
58. 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
Institut für Wirtschaftsinformatik
Universität Bern
Staatssekretariat für Wirtschaft SECO
59. Visualisierung II
• Pro Dimension wurde ein App erstellt (Layout ist aber identisch)
22.05.2014 11
Institut für Wirtschaftsinformatik
Universität Bern
Staatssekretariat für Wirtschaft SECO
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)
60. 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
Institut für Wirtschaftsinformatik
Universität Bern
Staatssekretariat für Wirtschaft SECO
61. Visualisierung II
22.05.2014 13
Institut für Wirtschaftsinformatik
Universität Bern
Staatssekretariat für Wirtschaft SECO
Durch Klicken der
Themenbereiche werden
automatisch die entsprechenden
Daten geladen und visualisiert
62. 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
Institut für Wirtschaftsinformatik
Universität Bern
Staatssekretariat für Wirtschaft SECO
65. Aufgabenstellung
● Visualisierung der Belastung von ÖV -
Verbindungen durch SBB Mitarbeitende
○ Absolutwerte Pro Strecke
○ Relative Werte im Verhältnis zur Gesamtzahl der
Reisenden
66. 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
67. 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
68. Vorgehen
● JSON Verarbeitung
● Erste Visualisierung
○ Streckenvisualisierung
○ Erste Filtermöglichkeiten
● Kundenmeeting
● Verbesserungen
○ Erweiterter Datensatz der SBB u.A. mit Kapazitäten
○ Erweiterung der Filter
○ Benutzerfreundlichkeit
76. Impact
• Schnelleres &
effizienteres Arbeiten mit App
• Vermeidung von falschen Interpretationen:
anonymisierte Daten bis zur Verbesserung der
Darstellung & Begründungen
78. 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
79. 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
80. 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
Marco Grütter, Tim Steiger (22.05.2014), Präsentation der Open Data App
81. Datenquellen
> Data Coach: Jürgen Allraum
> Daten: Volksschulstatistik Kanton Bern (2012/13)
http://www.erz.be.ch/schulstatistik
> Dateiformat: CSV
4
Marco Grütter, Tim Steiger (22.05.2014), Präsentation der Open Data App
82. > 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
Marco Grütter, Tim Steiger (22.05.2014), Präsentation der Open Data App
83. 6
Resultat
> Öffentlicher Link via githhub erstellt:
— http://tdjs.github.io/
Marco Grütter, Tim Steiger (22.05.2014), Präsentation der Open Data App
84. 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
86. 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)
92. Aufgabenstellung
• Visualisierung der Volksschuldaten des Kanton
Bern
• Motivation:
– Transparenz, bessere Kenntnisnahme der
Statistikdaten
– Insbesondere Aufzeigen von Unterschieden
zwischen den Regionen, Bildungsstufen,
Unterrichtssprachen, Kostenträgern
93. 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/
94. 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
95. 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
96. 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/
104. 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
105. 3. ZIEL UND MOTIVATION
• Etwas Neues lernen
• Programmieren erlernen
• Interessante Materie
• Grosse Herausforderung, da keine Erfahrung
• Gute Leistung / Resultat erzielen
106. 4. RESULTAT
• Link zum App
• http://sandbox.iwi.unibe.ch/~ab
13l082/Examples/App/Grossrat
swahlen%202014.html
112. 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
114. Messstationen
20.05.14 5
> Rietholzbach (Mosnang, SG)
> Grosstalbach (Isenthal, UR)
> Rosegbach (Pontresina, GR)
> Sense (Thörishaus, BE)
> Massa (Blatten bei Naters, VS)
115. 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
116. 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
119. 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
121. 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
126. • 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
127. 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
128. Resources
• Open Energy Data App
http://sizchart.herokuapp.com/chart/index.php
• Literature
Murray Scott, Interactive Data Visualization,
2013
131. - 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
133. - 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
134. - 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
142. 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
143. Vorgehen
(Funk:onen)
1. Zoomfunk:onalität
2. Daten
zu
Kartenteile
zuweisen
3. Kartenteile
rich:g
einfärben
4. Usability-‐Elemente
(Legende
und
Tips)
148. 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.
149. 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!
150. Open Data App
„Altersstrukturwandel“
Bachelor Major Betriebswirtschaftslehre
Institut für Wirtschaftsinformatik
Prof. Dr. Matthias Stürmer
22. Mai 2014
Carina Müller, Elias Koster
163. Bevölkerungsdynamik der Schweiz
Team
• Lukas Kälin
• BWL-Studi
• Keine
Programmierkenntnisse
1
Jasmine Quanbrough
Psych-Studi
Grundkenntnisse in C & HTML
164. > 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
Bevölkerungsdynamik der Schweiz
Daten & Ziele
165. ① 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
Bevölkerungsdynamik der Schweiz
Hacking-Rezept
168. Team
• Nartnarin Hallwyler
o Psychologiestudentin
o NF: BWL, Sozialwissenschaften
o wenig Programmiererfahrung
• Damian Schmutz
o Psychologiestudent
o NF: BWL
o keine Programmiererfahrung
175. Noch quellen der texte?
• www.derbund.ch
• www.20min.ch
• www.watson.ch
• www.tagesanzeiger.ch
176. 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
Institut für Wirtschaftsinformatik
Informationsmanagement
Datenviewer für Comparatif Kanton ZH,
2002-2012. Die Entwicklung der Finanzlage
bei den Zürcher Gemeinden.
177. Team 33
2
André Gsell (TG)
Bachelor in Internationalen Beziehungen, HSG
Eolo Ulrich (TI)
Bachelor in Kommunikationswissenschaften, USI
Seit September 2012:
178. 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
179. 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
180. 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
…
181. 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
182. 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
183. 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
184. 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
185. 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
187. 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
188. 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.
189. 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?
32014-05-22. Open Data. Cyrill Rast & Marc Rey
We are the world ... of debt. Visualization of governmental dependencies.
190. 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
42014-05-22. Open Data. Cyrill Rast & Marc Rey
We are the world ... of debt. Visualization of governmental dependencies.
191. Have a look!
> www.roxxistic.me/blog/we-are-the-world-of-debt/
52014-05-22. Open Data. Cyrill Rast & Marc Rey
We are the world ... of debt. Visualization of governmental dependencies.
192. 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
62014-05-22. Open Data. Cyrill Rast & Marc Rey
We are the world ... of debt. Visualization of governmental dependencies.
193. 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 ;)
72014-05-22. Open Data. Cyrill Rast & Marc Rey
We are the world ... of debt. Visualization of governmental dependencies.
194. 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.
82014-05-22. Open Data. Cyrill Rast & Marc Rey
We are the world ... of debt. Visualization of governmental dependencies.
195. Crime and Unemployment in Europe
Data Visualization at University Bern
In Open Data: Datenmanagement und Visualisierung
Tobias Graf
Manuel Maurer
196. Team
– MSc in Business Administration: Tobias
– BSc in Business Administration: Manuel
197. 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
200. 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)
𝐶𝐶𝐶𝐶𝐶𝐶 𝐶𝐶𝐶𝐶 𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟
𝐶𝐶𝐶𝐶𝐶𝐶𝐶𝐶𝐶𝐶𝐶𝐶 𝑦𝑦′ 𝑠𝑠 𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝𝑝
203. Über uns
Zwei Studenten im 4. Semester
Bachelor Informatik
Jan Binzegger
Florentina Ziegler
und
204. Motivation
• Wie entwickeln sich die Cryptowährungen im
Verlaufe der Zeit?
• Noch keine vergleichende Darstellungen
verschiedener Cryptocoins im Web
205. Was sind Cryptocoins?
• Währung
• Weltrekorde
• Gebührenfrei
Very Secure.
Much Freedom.
So Easy.
Wow!
208. 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
211. Ziel
• Interaktive Applikation für die Visualisierung von Twitter-
Kontakten
• Neugier / Spielerei
• Ausprobieren des Twitter realtime API
212. mApp
• Demo Online (opendata.zeilenwerk.ch)
• Code im Bitbucket-Repository
213. Datenquelle
• Twitter-API
• Gratis
• Zugriffsbeschränkung (15 Anfragen pro User)
• Serverseitiger Zugriff über Twitter-Gem
• Geocodierung
• Google Geocoding API (direkt über HTTP requests)
214. 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