Vortrag im webmap Workshop 2016

1. webmap – step by step:
Datenvisualisierungen mit D3.js
und weiteren Web-Technologien
Dr. Matthias Stürmer – @maemst
Forschungsstelle Digitale Nachhaltigkeit
Universität Bern, Institut für Wirtschaftsinformatik
20. Januar 2016

2. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
2
Forschungsstelle Digitale Nachhaltigkeit
Forschung, Lehre und Beratung zu
> Open Source Software: Community Governance,
Anwendergemeinschaften, Qualitätskriterien,
Finanzierungsmodelle usw.
> Open Data: Visualisierung von Finanzdaten,
Open Aid, Creative Commons usw.
> Open Government: Open Government Partnership,
Transparenz und Partizipation von und in politischen
Prozessen usw.
> Netzpolitik: Netzneutralität, Internet Governance,
Urheberrechte im Internetzeitalter usw.
> ICT-Beschaffungen: Agile Software-Entwicklung,
Requirements Engineering, Herstellerabhängigkeiten,
freihändige Vergaben usw.
Dr. Matthias Stürmer
Oberassistent,
Leiter Forschungsstelle
Digitale Nachhaltigkeit
Institut für Wirtschaftsinformatik
Universität Bern
Büro 309
Engehaldenstrasse 8
CH-3012 Bern
Tel: +41 31 631 38 09
Mobile: +41 76 368 81 65
Twitter: @maemst
matthias.stuermer@iwi.unibe.ch
www.digitale-nachhaltigkeit.unibe.ch

3. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
3
Tätigkeiten im Bereich Open Data
> Forschungsprojekte zu Open Data und Open Government,
Betreuung von Bachelor- und Masterarbeiten
> Vorlesung «Grundlagen von Open Data und praktische
Anwendung» für Bachelor- und Masterstudierende, weitere Kurse
> Beratungs- und Programmier-Mandate für die öffentliche
Verwaltung (Pilot-Apps)
> Open Data Hack Days, Opendata.ch Konferenz und andere Events

4. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
4
Agenda
1. Überblick Open Government Data
2. Praxis-Beispiele
3. D3.js, three.js und Studierenden-Apps

5. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
5
Beginning of Open Government
> Barack Obama, 21. Januar 2009 (sein erster
voller Arbeitstag): zwei "Memorandum for the
Heads of Executive Departments and Agencies"
> Transparency and Open Government
— Government should be transparent.
— Government should be participatory.
— Government should be collaborative.
> Information of Freedom Act (FOIA)
— "In the face of doubt, openness prevails."
— "commitment to accountability and transparency"
Quellen: http://www.whitehouse.gov/the_press_office/TransparencyandOpenGovernment
http://www.whitehouse.gov/the-press-office/freedom-information-act

6. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
6
10 Prinzipien von
Open (Government) Data
1. Vollständigkeit: Alle öffentlichen Daten werden verfügbar gemacht.
2. Primärquelle: Die Daten werden an ihrem Ursprung gesammelt.
3. Zeitnah: Daten werden umgehend zur Verfügung gestellt.
4. Zugänglich: Daten werden allen für möglichst viele Verwendungszwecke bereit gestellt.
5. Maschinenlesbar: Daten sind in einem offenen, strukturiertem Format gespeichert.
6. Nicht diskriminierend: Daten sind allen ohne Registrierung verfügbar.
7. Nicht proprietär: Zur Dateninterpretation wird keine proprietäre Software benötigt.
8. Freie Lizenz: Daten sind unter einer freien Lizenz (z.B. Open Government Licence).
9. Permanent verfügbar: Datenbestände sind permanent online und versioniert verfügbar.
10. Kostenlos: Der Zugriff auf die Daten ist kostenlos.
Quellen: http://sunlightfoundation.com/policy/documents/ten-open-data-principles/
http://www.netzpolitik.org/2010/8-open-government-data-prinzipien/

7. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
7

8. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
8
Pro: Argumente für die
Öffnung von Behördendaten
> Anrecht auf freie Daten
Den Bürgern gehören die Behördendaten, denn sie wurden im
Auftrag des Staates mit Steuergeldern erarbeitet.
> Demokratie
Freier und ungehinderter Datenzugang sind Voraussetzung für
Meinungsbildung und Partizipation an politischen Prozessen.
> Wirtschaftlichkeit
Durch öffentliche Daten werden Prozesse und Missstände sichtbar,
somit werden behörden-interne Vorgänge verbessert.
> Innovation
Das Innovationspotential von Open Government Data wird als hoch
eingeschätzt, somit bilden freie Behördendaten einen
wirtschaftlichen Vorteil.
Quelle: http://www.collaboratory.de/w/Abschlussbericht_Offene_Staatskunst

9. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
9
Ökonomische Studie OGD Schweiz, 2013
> Jährlicher Wertschöpfungsanteil
aus OGD in der Schweiz zwischen
900 Millionen und 1.2 Milliarden
Franken
> Jährlicher Nettonutzen von OGD für
den Bund liegt zwischen
2.9 Millionen und 20.3 Millionen
Franken.
> Auf Gebühren (u.a. Geodaten)
kann verzichtet werden.
Quelle: http://www.bar.admin.ch/themen/01648/01651/index.html?lang=de

10. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
10
Contra: Argumente gegen die
Öffnung von Behördendaten
> Datenschutz: Zusammenführen von anonymisierten Daten lässt unter Umständen
doch Rückschlüsse auf bestimmte Personen ziehen
> Staatssicherheit: Die Freigabe von Daten von Geheimdiensten oder Militär können
die Staatssicherheit gefährden, deshalb von OGD ausgenommen
> Fehlinterpretation: Rohdaten lassen falsche Interpretationen zu, Deutungshoheit
liegt nicht mehr alleine bei Behörden, kann zu Reputationsschäden führen
> Diskriminierung: Transparenz kann zu noch mehr Stigmatisierung bestimmter
Wohnbezirke oder Bevölkerungsgruppen führen
> Haftung: Behörden könnten für Verluste, Verletzungen oder Schäden bei der
Verwendung der Daten haftbar gemacht werden
> Kosten: Interne und externe Kosten zur Vorbereitung, Publikation und
Bekanntmachung der Daten
> Qualität: Datenqualität ist in Form von Rohdaten besser ersichtlich
> Organisationskultur: OGD benötigt Kulturwandel in der Verwaltung
> Partizipation: Mediales Interesse heisst noch nicht, dass Bevölkerung tatsächlich
an allen OGD Datensätzen interessiert ist
Quellen: http://www.kdz.eu/de/webfm_send/1206
http://www.collaboratory.de/w/Abschlussbericht_Offene_Staatskunst

11. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
11
Open Government Implementation Model
> 2011 von Gwanhoo Lee (The American University) und
Young Hoon Kwak (The George Washington University)
> Open Government Implementation Model (OGIM)
Quelle: http://www.businessofgovernment.org/report/open-government-implementation-
model-moving-increased-public-engagement

12. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
12
Open Data Lizenzen
1. Open Data Lizenzen:
— Public Domain Dedication and License (PDDL)
(entspricht CC0)
— Open Data Commons Attribution (ODC-By)
(entspricht CC-BY)
— ODC Open Database License (ODbL)
(entspricht CC-BY-SA)
2. Creative Commons Lizenzen:
— Creative Commons Zero CC0 (Public Domain)
— Creative Commons Attribution CC-BY
— Creative Commons Share Alike CC-BY-SA
Quellen: http://opendatacommons.org/licenses/ http://opendefinition.org
https://creativecommons.org

13. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
13
Öffentlichkeitsgesetz

14. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
14
Informationsfreiheitsgesetze
> Gesetzgebung Informationsfreiheit:
Bürgerrecht zur Einsicht in Dokumente
und Akten der öffentlichen Verwaltung
> Weitere Begriffe:
Öffentlichkeitsgesetz, Öffentlichkeitsprinzip,
Verwaltungstransparenz
> Englisch: Access to Information Law (ATI),
Right to Information Law (RTI),
Freedom of Information Act (FOI/FOIA)
> Internationale Verbreitung:
In 95 Ländern gibt es Gesetzgebungen
zu Informationsfreiheit (September 2013)
Quellen: http://www.right2info.org/access-to-information-laws
http://www.right2info.org/resources/publications/laws-1/ati-laws_fringe-special_roger-vleugels_2011-oct

15. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
15
Die ersten 12 Länder mit einem
Informationsfreiheitsgesetz
1766 Sweden: Freedom of the press act
1951 Finland: Act on the openness of government activities
1967 United States: Freedom of information act (FOIA)
1970 Denmark: Access to public administration files act
1970 Norway: Freedom of information act
1978 France: Law on freedom of access to administrative documents
1980 Netherlands: Act on public access to government information
1982 Australia: Freedom of information act
1983 Canada: Access to information act
1983 New Zealand: Official information act
1985 Colombia: Law ordering the publicity of official acts and documents
1986 Greece: Code of administrative procedure
Quelle: http://www.right2info.org/resources/publications/laws-1/ati-laws_fringe-special_roger-vleugels_2011-oct

16. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
16
Paradigmenwechsel mit der Einführung
des Öffentlichkeitsprinzips
> Systemwechsel:
— vom Grundsatz der Geheimhaltung mit Öffentlichkeitsvorbehalt zum
Grundsatz der Öffentlichkeit mit Geheimhaltungsvorbehalt
> Bis 2006 galt der Geheimhaltungsgrundsatz:
— Grundsätzlich Informationen geheim, unter Vorbehalt von Ausnahmen
— Kein generelles Recht auf Informationen über Verwaltungstätigkeit
— Anspruch auf Dokumenten-Zugang nur in bestimmten Fällen
— Freies Ermessen der Behörden ob sie Zugang geben oder nicht
> Mit dem Öffentlichkeitsgesetzt ab 2006 gilt:
— Durchsetzbares Recht auf Zugang zu amtlichen Dokumenten
— Der einer Person gewährte Zugang gilt für jede Person
(«access to one; access to all»)
— Es muss kein besonderes Interesse nachgewiesen werden.
— Recht auf Zugang kann eingeschränkt werden.
Quelle: Medienrohstoff, 12.02.2003
http://www.ejpd.admin.ch/content/dam/data/staat_buerger/gesetzgebung/oeffentlichkeitsprinzip/rohstoff-d.pdf

17. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
17
Öffentlichkeitsverordnung:
Privatsphäre vs. öffentliches Interesse
Artikel 6 Interessenabwägung zwischen dem
Schutz der Privatsphäre Dritter und
öffentlichem Interesse am Zugang
Öffentliches Interesse kann überwiegen:
> Vorliegen eines besonderen
Informationsinteresses der Öffentlichkeit (z.B.
Korruptionsvorfälle)
> Schutz spezifischer öffentlicher Interessen wie
öffentliche Ordnung und Sicherheit oder
öffentliche Gesundheit
> Bei Empfängern von Finanzhilfen oder
Abgeltungen
Quelle: Verordnung über das Öffentlichkeitsprinzip der Verwaltung – Erläuterungen, 24.05.2006
http://www.ejpd.admin.ch/content/dam/data/staat_buerger/gesetzgebung/oeffentlichkeitsprinzip/erl-entw-d.pdf

18. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
18
Plattform für Journalisten und Bürger:
Öffentlichkeitsgesetz.ch

19. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
19
Beispiel einer Recherche Dank
Öffentlichkeitsgesetz: Seco-Beschaffung
Quelle: http://www.tagesanzeiger.ch/schweiz/standard/Das-Seco-vergab-Millionenauftraege-unter-der-Hand/story/11703121

20. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
20
OGD Strategie

21. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
21
OGD Strategie Schweiz 2014-2018
> Vom Bundesrat am
16. April 2014 verabschiedet
> Inhalt OGD Strategie Schweiz:
— Vision
— Zielsetzungen
— Rahmenbedingungen
— Umsetzung
> Verantwortlich für Umsetzung:
Schweizerisches Bundesarchiv
Quelle: https://www.news.admin.ch/message/index.html?lang=de&msg-id=52688

22. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
22
Zielsetzungen
> Freigabe der Behördendaten
Bund stellt Öffentlichkeit geeignete Daten in maschinenlesbaren und
offenen Formaten zur freien Wiederverwendung zur Verfügung, alle
Rahmenbedingungen sind angepasst, "Open Data by Default"
> Koordinierte Publikation und Bereitstellung der Behördendaten
Zentrale Infrastruktur für Datenbestände aufbauen, Publikation der
Metadaten, zuständige Verwaltungseinheiten publizieren
Beschreibungen ihrer Datenbestände auf OGD-Portal, standardisierte
technische Zugriffsfunktionen für die offenen Daten anbieten
> Etablierung einer Open-Data-Kultur
Bund fördert Nutzung der offenen Daten, Etablierung einer
partizipativen und innovativen Open-Data-Kultur

23. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
23
Umsetzung: Massnahmen
1. Überprüfung und Anpassung der rechtlichen Rahmenbedingungen
2. Datenfreigabeprozess
3. Datenfreigabeplanung
4. Inventarisierung der Datenbestände des Bundes
5. Überprüfung der Gebührenpolitik
6. Aufbau des OGD-Portals
7. Bereitstellung von Hilfsmitteln und Instrumenten für die Datenpublikation
und -bereitstellung
8. Auswahl und Definition der OGD-Standards
9. Erarbeitung einheitlicher Nutzungsbedingungen
10. Erarbeitung eines OGD-Kooperationsmodells
11. Dialog mit den OGD-Anwendern
12. Bekanntmachung des Datenangebots in der Öffentlichkeit
13. Evaluation der Wirkung von OGD

24. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
24
Massnahme 5:
Überprüfung Gebührenpolitik
> Die Erhebung von Gebühren für die Nutzung von Behördendaten wird in
Etappen abgebaut.
> Für die Gratisabgabe von OGD und die Grenzkostenverrechnung individueller
Zusatzleistungen im Zusammenhang mit frei zugänglichen Daten werden die
bestehenden Rechtsgrundlagen geprüft und wo erforderlich angepasst.
> Ein übergeordnetes Konzept zur Kompensation des Einnahmeausfalls
wird erarbeitet.
> Die betroffenen Verwaltungseinheiten erstellen auf dieser Basis die
entsprechenden Erlassentwürfe.
> Zur Abgrenzung zwischen OGD und kundenspezifischen, individuellen
Leistungen werden allgemeine Kriterien für die Bundesverwaltung erarbeitet.
> Darauf aufbauend klären die einzelnen Bundesstellen, welche ihrer Daten
unter OGD fallen und somit gratis verfügbar sein sollen.

25. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
25
Agenda
1. Überblick Open Government Data
2. Praxis-Beispiele
3. D3.js, three.js und Studierenden-Apps

26. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
26
Open Finance

27. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
27
Problemstellung
Unübersichtliche öffentliche Finanzen:
> Grosse Zahlenmengen, wenige Visualisierungen
> Komplexe Budgetstrukturen und Planungsinstrumente
> Mehrfache Umverteilungen zwischen föderalen Ebenen
Mögliche Folgen davon:
> Nur noch Experten verstehen öffentlich Finanzen wirklich
> PolitikerInnen fällen medial attraktive Bauchentscheide
> Bevölkerung wenig Verständnis für öffentliche Finanzen,
kann Notwendigkeit von Sparmassnahmen nicht
nachvollziehen

28. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
28
Budget 2016 der Stadt Bern
Quelle: http://www.bern.ch/themen/stadt-recht-und-politik/finanzen/budget

29. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
29
Nutzen von Open Finance
Nutzen für die Öffentlichkeit (Bevölkerung, Verbände, Politiker etc.)
1. Attraktivität: Wecken des Interesse an Finanzdaten
2. Zugänglichkeit: niederschwelliger Zugang zu Finanzen
3. Benutzerfreundlich: rasch viele Informationen abrufbar
4. Verständnis: Zusammenhänge, Veränderungen etc. erkennen
5. Vergleichbarkeit: andere Städte, Kantone, Departemente...
6. Vertrauen: Transparenz ermöglich Prüfung der Realität
7. Rückmeldung: Volk kann Meinung abgeben (Partizipation)
8. Fokus: Diskussion der wesentlichen Punkte (Proportionen etc.)
9. Akzeptanz: Notwendigkeit von Sparpaketen verstehen
10. Respekt: Bevölkerung erkennt Leistungen der öffentlichen Hand

30. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
30
Stadt Bern Open Budget App
http://bern.budget.opendata.ch

31. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
31
Kanton Bern ASP 2014
http://be-asp.budget.opendata.ch
Grafischer Überblick: Detailinformationen
:

32. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
32
Finanzausgleich Kt. Bern
http://be-fa.budget.opendata.ch

33. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
33
https://kfd.piratenfraktion-nrw.de

34. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
34
Österreich
http://www.offenerhaushalt.at

35. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
35
Deutschland
http://www.bundeshaushalt-info.de

36. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
36
England
http://www.wheredoesmymoneygo.org

37. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
37
USA
http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html

38. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
38
Open Aid

39. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
39
There’s lots of
information available but it’s...
Different formats Hard to find Not current
Not
comprehensive
Inconsistent In multiple
locations
Not forward
looking
Not comparable
Quelle: http://www.aidtransparency.net/resources/speakers-kit

40. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
40
Solution with IATI
IATI has been designed to enable all organisations to:
> Publish in the same format as other organizations, so
datasets from various sources can be easily combined
> Update their data on a monthly, quarterly, or six-monthly
basis, to keep information as current as possible
> Publish data using a flexible standard, regardless of the
kind of development cooperation provider
> Publish in one central location. The IATI Registry
provides links to the data published by all organisations
using the IATI Standard
> Provide, where possible, forward-looking information,
enabling developing country governments to plan and
budget more clearly and comprehensively
Quelle: How IATI differs from other standards http://www.aidtransparency.net/about/iati-standard

41. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
41
IATI Development Toolkit
Quelle: Open Aid: Neue Wege der Transparenz, Partizipation und Kooperation in der Entwicklungszusammenarbeit
http://opus.kobv.de/zlb/volltexte/2015/25248/pdf/TOGI_140826_TOGI_Band_9_Rinke_Open_Aid_V1.pdf

42. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
42
IATI XML Standard
Quelle: Example Usage XML http://iatistandard.org/201/organisation-standard/example-xml/

43. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
43
Sweden Open Aid Portal
www.openaid.se

44. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
44
Netherlands Open Aid Portal
www.openaid.nl

45. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
45
UK Open Aid Portal
devtracker.dfid.gov.uk

46. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
46
Publish What You Fund
www.publishwhatyoufund.org

47. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
47
Aid Transparency Index 2013:
Schweiz schneidet sehr schlecht ab
Quelle: http://ati.publishwhatyoufund.org/index-2013/results/

48. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
48
Aid Transparency Index 2014:
Schweiz ist sehr viel besser
Quelle: http://ati.publishwhatyoufund.org/index-2014/results/

49. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
49
Open Data Journalism

50. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
50
Process of Data-Driven Journalism (DDJ)
http://en.wikipedia.org/wiki/Data-driven_journalism

51. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
51
Data Journalism Handbook
> www.datajournalismhandbook.org
> Initiative of the European
Journalism Centre and the
Open Knowledge Foundation
> Authors from BBC, Guardian,
Financial Times, New York Times,
Washington Post, Zeit Online etc.
> Typical steps of a data story:
1. Getting Data
2. Understanding data
3. Delivering Data

52. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
52
Abschuss der MH17: Datenjournalismus-
Reportage von CORRECT!V (11.01.2015)
https://mh17.correctiv.org

53. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
53
Abschuss der MH17: Web-Reportage
von Spiegel Online (12.1.2015)
http://www.spiegel.de/panorama/gesellschaft/mh17-wer-hat-die-boeing-ueber-der-ukraine-abgeschossen-a-1011983.html

54. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
54
Abschuss der MH17: CORRECT!V und
OpenDataCity App des Flugverkehrs
https://apps.correctiv.org/mh17/

55. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
55
Daten von flightradar24
http://www.flightradar24.com

56. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
56
Weitere Datenjournalismus-Reportagen
von OpenDataCity
https://opendatacity.de/portfolio/

57. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
57
Agenda
1. Überblick Open Government Data
2. Praxis-Beispiele
3. D3.js, three.js und Studierenden-Apps

58. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
58
Eine neue
Programmier-
sprache
lernen:
Quelle: Peter Kröner http://archiv.peterkroener.de/die-neue-programmiersprache-lernen/

59. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
59
Interactive Data Visualization for the Web
Quelle:
> O'Reilly Media, von Scott Murray
> März 2013, 272 Seiten, Englisch
> ISBN-10: 1449339735
> Gratis online als ebook
> Auf Amazon.de für CHF 22.50
> „Create and publish your own
interactive data visualization projects
on the Web-even if you have little or
no experience with data visualization
or web development.”
> Total 13 Kapitel, 10 Kapitel davon
werden in den Übungen behandelt

60. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
60
D3.js Code Snippets
Link: https://github.com/mbostock/d3/wiki/Gallery

61. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
61
D3.js Code Snippets
Link: http://christopheviau.com/d3list/gallery.html

62. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
62
D3.js Code Snippets
Link: http://bl.ocks.org/mbostock

63. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
63
D3.js: Cushion Treemaps
Quelle: Jarke J. van Wijk and Huub van de Wetering, Cushion Treemaps: Visualization of Hierarchical Information, 1999
http://www.win.tue.nl/~vanwijk/ctm.pdf

64. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
64
D3.js: Zoomable Treemaps
Quelle: http://mbostock.github.io/d3/talk/20111018/treemap.html

65. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
65
D3.js: Obama’s 2012 budget proposal
Quelle: http://www.nytimes.com/packages/html/newsgraphics/2011/0119-budget

66. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
66
D3.js: Zoomable Circle Packing
Quelle: http://bl.ocks.org/mbostock/7607535/

67. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
67
D3.js: Finanzen Kanton Bern
Quelle: http://files.be.ch/fin/gs/ausgaben_ktbe/index.html#/2014/

68. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
68
Sankey Diagram
Quelle: https://en.wikipedia.org/wiki/Sankey_diagram/

69. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
69
D3.js: Sankey Diagrams
Quelle: http://bost.ocks.org/mike/sankey/

70. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
70
D3.js: Finanzausgleich im Kanton Bern
Quelle: http://be-fa.budget.opendata.ch/

71. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
71
D3.js: Hierarchical Edge Bundling
Quelle: http://bl.ocks.org/mbostock/7607999

72. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
72
D3.js: Visualisierte Interessenbindungen
im Schweizer Parlament
Quelle: NZZ, 4. März 2014
http://www.nzz.ch/aktuell/schweiz/die-daten-hinter-der-visualisierung-1.18255344

73. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
73
D3.js: Clustered Force Layout I
Quelle: http://bl.ocks.org/mbostock/1747543

74. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
74
D3.js: Tax Rates of U.S. Companies
Quelle: http://www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html?_r=0

75. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
75
D3.js: Zoomable Sunburst
Quelle: http://bl.ocks.org/mbostock/4348373

76. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
76
D3.js: Finanzen Deutschland
Quelle: http://www.bundeshaushalt-info.de/#/2016/soll/ausgaben/einzelplan/32.html

77. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
77
D3.js: Ausländische Wohnbevölkerung
Quelle: http://lh10p414.sandbox.iwi.unibe.ch/

78. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
78
D3.js: Chord Diagram
Quelle: http://bl.ocks.org/mbostock/4062006

79. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
79
D3.js: Eurozone debt
Quelle: http://www.bbc.co.uk/news/business-15748696

80. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
80
D3.js: Parallel Coordinates
Quelle: http://syntagmatic.github.io/parallel-coordinates/

81. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
81
D3: Nutrient Contents
Quelle: http://exposedata.com/parallel/

82. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
82
D3.js: Faux-3D Arcs
http://bl.ocks.org/dwtkns/4973620

83. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
83
Earth
http://earth.nullschool.net

84. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
84
three.js
http://www.three.js

85. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
85
Periodic Table
http://threejs.org/examples/css3d_periodictable.html

86. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
86
Sprites
http://threejs.org/examples/css3d_sprites.html

87. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
87
Ocean Shaders
http://threejs.org/examples/webgl_shaders_ocean.html

88. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
88
Dynamic Terrain
http://threejs.org/examples/webgl_terrain_dynamic.html

89. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
89
Studierenden-Apps

90. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
90
Open Data Studierenden-Apps 2014
Links zu allen 2014 Apps: http://opendata.ch/2014/05/vorlesung-unibern/

91. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
91
Gewinner 2014: Finanzen Kanton Zürich
Quelle: http://www.actmore.ch/comparatif/

92. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
92
Data Coaches 2015
Daten Coaches haben folgende Daten angeboten:
1. David Oesch, swisstopo: Daten der Schweizerischen Landestopografie
2. Leyko Agnieszka, Deloitte: Implikationen der Aufhebung des fixen CHF/EUR Wechselkurses
3. Christian Trachsel, SBB: Daten der Schweizerischen Bundesbahnen
4. Roman Page, Statistisches Amt Zürich Kanton Zürich:
Nationalrats-Wahlen 1999-2011 pro Gemeinde KtZH und Webapplikation Gemeindeporträt
5. Hansueli Pestalozzi, Bundesamt für Umwelt BAFU:
Schadstoffregister SwissPRTR (Welcher Betrieb setzt wieviel Umweltgifte frei?)
6. Marco Majoleth, Schweizerisches Bundesarchiv: Daten aus Projekt Open Government Schweiz
7. Thomas Bigliel, 20 Minuten: diverse Daten zu interessanten Themen
8. Ralf Hauser, PrivaSphere: Daten von Schweizer Behörden
9. Donat Agosti und Guido Sautter, Plazi: Biodiversitäts-Daten
10. Marc Jost, Interaction: internationale Daten von rund 500 Hilfsprojekten
11. Christian Gutknecht, Schweizerischer Nationalfonds : Daten aus der Forschungsdatenbank P3
12. Jürgen Allraum, Erziehungsdirektion Kanton Bern: Abschlussdaten auf der Sekundarstufe II
13. Daniel Studer, Statistikkoordination Kanton Bern: Demografie-Daten des Kantons Bern

93. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
93
Open Data Studierenden-Apps 2015

94. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
94
Integration in BAFU Website

95. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
95
Links der Studierenden-Apps 2015
1. Schadstoffausstoss in der Schweiz http://je12k036.sandbox.iwi.unibe.ch
2. Ausländische BEvölkerung http://lh10p414.sandbox.iwi.unibe.ch
3. Kriminalität in der Schweiz http://jt05q035.sandbox.iwi.unibe.ch
4. Lohnvergleich nach Geschlecht und Ausbildung http://mb10r511.sandbox.iwi.unibe.ch
5. ImmoSearcher http://ga08z443.sandbox.iwi.unibe.ch
6. Swiss Public Transportation Visualization http://sh11j239.sandbox.iwi.unibe.ch
7. Vereinbarung Beruf und Familie in Schweizer Kantonen http://oa07v513.sandbox.iwi.unibe.ch
8. Berufsabschlüsse in der Schweiz http://d3orn.github.io/open_data_app
9. Die neuen Schweizer 2013 http://mp11j084.sandbox.iwi.unibe.ch
10. Implikationen der Aufhebung des EUR/CHF Mindestkurses http://jc13u044.sandbox.iwi.unibe.ch
11. P3-Forschungsdatenbank des SNF http://mb0220.asuscomm.com
12. Schadstoffemissionen der Schweiz http://ns12f228.sandbox.iwi.unibe.ch
13. Visualisierung gymnasialer Abschlussdaten des Kantons Bern http://tt11b448.sandbox.iwi.unibe.ch
14. Interaction: Visualisierung der Hilfsprojekte 2012 http://sj09l033.sandbox.iwi.unibe.ch
15. Altersstruktur des Kanton Bern http://tb06h118.sandbox.iwi.unibe.ch
16. OPENED http://fp06j948.sandbox.iwi.unibe.ch
17. InterAction Visualisierung http://pp14j021.sandbox.iwi.unibe.ch
18. Datenschutz im elektronischen Rechtsverkehr http://ml09e057.sandbox.iwi.unibe.ch
19. Geldpolitik der SNB http://tv11a629.sandbox.iwi.unibe.ch
20. Bevölkerungsentwicklung im Kanton Bern http://www.thecrackers.tk/yves
Studierenden-Präsentationen: http://de.slideshare.net/nice/abschlussprsentationen-studierendenapps-open-data-vorlesung-2015

96. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
96
Alle Videos und Folien der
Open Data Veranstaltungen 2015
> Gesamtüberblick und Folien der Open Data Veranstaltungen:
http://www.digitale-nachhaltigkeit.unibe.ch/studium/open_data_vorlesung
> Videos der Vorlesung und aller Gastreferate in der Vorlesung:
https://cast.switch.ch/vod/channels/1sfq74bebv
> Podcasts der Übung (D3.js) und alle Gastreferate in der Übung:
https://cast.switch.ch/vod/channels/q8pu4fwsj

97. 20. Januar 2016
Datenvisualisierungen mit D3.js und weiteren Web-Technologien
97
Fragen und Diskussion
> Für weitere Fragen und Anliegen rund um Open Government,
Open Data und Datenvisualisierungen:
Dr. Matthias Stürmer
Oberassistent,
Leiter Forschungsstelle
Digitale Nachhaltigkeit
Universität Bern
Institut für Wirtschaftsinformatik
Engehaldenstrasse 8
CH-3012 Bern
Tel: +41 31 631 38 09
Mobile: +41 76 368 81 65
matthias.stuermer@iwi.unibe.ch
www.digitale-nachhaltigkeit.unibe.ch