Immer häufiger lancieren Behörden, internationale Organsationen und NGOs Datenportale, über die riesige Mengen von Daten freigegeben werden. Moderne Open Source Tools wie D3.js erlauben es, mit neuartigen Visualisierungstechniken diese so genannten Open Data Bestände als interaktive Web-Applikationen zugänglich zu machen. Das Referat zeigt grundlegende Überlegungen zu Open Government Data und Datenvisualisierungen, demonstriert einige Beispiele und gibt eine Einführung in die technischen Grundlagen.
Digitale Nachhaltigkeit: Open Data, Open Source und Open Content
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
1. Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
Geomatik-Seminar am IGP/IKG, ETH Zürich 11. Dezember 2014
Dr. Matthias Stürmer
Forschungsstelle Digitale Nachhaltigkeit Institut für Wirtschaftsinformatik Universität Bern
2. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
2
Kurzportrait
>
Seit August 2013 Oberassistent an der Universität Bern und Leiter Forschungsstelle Digitale Nachhaltigkeit
>
2010 bis 2013 bei EY (Ernst & Young) Schweiz, Manager im Bereich IT Advisory
>
2009 bis 2010 Business Development und Projektleiter beim Software-Unternehmen Liip AG
>
2006 bis 2009 Doktorat an der ETH Zürich am Lehrstuhl für Strategisches Management und Innovation (D-MTEC)
>
2000 bis 2005 Studium Betriebswirtschaft und Informatik an der Universität Bern, Masterarbeit am IWI
>
Seit 2004 Inhaber Einzelunternehmen nice, Matthias Stürmer
>
Mitgründer des Open Government Data Verein Opendata.ch
>
Vorstandsmitglied Swiss Open Systems User Group /ch/open
>
Geschäftsleiter der Parl. Gruppe Digitale Nachhaltigkeit
>
EVP-Stadtrat von Bern
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
3. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
3
Agenda
1.
Einführung Open Government Data
2.
Beispiele von Datenvisualisierungen
3.
Technologische Grundlagen
4. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
4
Beginning of Open Government
>
Barack Obama, 21. Januar 2009: 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
5. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
5
Open Government Data
Quelle: http://www.webnotwar.ca/i-sing-the-data-open
Zusammenhang zwischen Open Government und Open Data:
"Open Data is to Open Government as the Body is to the Soul. Open Government is made real by Open Data. Open Data enables an open government to interact with its citizens, and it is Open Data that helps bring to life the principles and objectives of Open Government."
6. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
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. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
7
Qualität von Open Data: 5 Star Open Linked Data
Quelle: http://www.youtube.com/watch?v=ga1aSJXCFe0
Gov 2.0 Expo 2010: Tim Berners-Lee, "Open, Linked Data for a Global Community"
8. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
8
Qualität von Open Data: 5 Star Open Linked Data
Quelle: http://www.5stardata.info
★
make your stuff available on the Web (whatever format) under an open license
★★
make it available as structured data (e.g., Excel instead of image scan of a table)
★★★
use non-proprietary formats (e.g., CSV instead of Excel)
★★★★
use URIs to denote things, so that people can point at your stuff
★★★★★
link your data to other data to provide context5
9. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
9
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
10. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
10
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
11. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
11
Ö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
12. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
12
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 "Open Government Vorgehensmodell" http://www.collaboratory.de/w/Abschlussbericht_Offene_Staatskunst
13. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
13
OGD Strategie Schweiz 2014-2018
>
Vom Bundesrat am 16. April 2014 verabschiedet
>
Inhalt OGD Strategie Schweiz:
—
Vision
—
Zielsetzungen
—
Rahmenbedingungen
—
Umsetzung
Quelle: https://www.news.admin.ch/message/index.html?lang=de&msg-id=52688
14. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
14
Vision OGD Strategie Schweiz
>
OGD ermöglicht Innovation und wirtschaftliches Wachstum Innovative Unternehmen können neue Informationsdienstleistungen entwickeln, Lebensqualität verbessert sich, neue wissenschaftliche Erkenntnisse über Entwicklung der Schweiz möglich
>
OGD fördert Transparenz und Partizipation Tätigkeit von Regierung und Verwaltung werden transparenter, Bevölkerunge kann politische Rolle und gesellschaftliche Verantwortung kompetenter wahrnehmen
>
OGD erhöht die Effizienz der Verwaltung Behörden können eigenen Daten über politische und organisatorische Grenzen hinweg besser nutzen, Datenqualität dank Nutzer-Rückmeldungen verbessern
15. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
15
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
16. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
16
Umsetzung: Grundsätze
1.
OGD als Handlungsmaxime
—
OGD als Handlungsprinzip für alle geeigneten Behördendaten, Anpassung rechtlicher Grundlagen
2.
Offene und wiederverwendbare Behördendaten
—
Rechtlich: möglichst freie, einheitliche und verständlichen Nutzungsbedingungen
—
Finanziell: Grundsätzliche Gebührenbefreiung, auch kommerzielle Weiterverwendung durch Firmen gebührenbefreit
—
Technisch: Daten in maschinenlesbarer Form anbieten, möglichst offene Formate anwenden
17. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
17
Umsetzung: Grundsätze
3.
Leicht zugängliche Behördendaten
—
zentrale Publikationsplattform (OGD-Portal mit Metadatenverzeichnis)
—
standardisiertes Vorgehen für die Publikation und Bereitstellung der Daten
—
Metadatenformat (Titel, Kurzbeschreibung, Autor etc.)
—
Dateninventar und nationale Datenfreigabeplanung
4.
Kooperation mit den OGD-Anwenderinnen und -Anwendern als Voraussetzung
—
Etablierung einer Open-Data-Kultur in der Bundesverwaltung
—
Stärkung der Kompetenzen im Umgang mit Daten
—
Zusammenarbeit mit nationaler und int. Open-Data-Community
18. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
18
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
19. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
19
Agenda
1.
Einführung Open Government Data
2.
Beispiele von Datenvisualisierungen
3.
Technologische Grundlagen
20. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
20
D3.js – www.d3js.org
21. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
21
D3: Reingold–Tilford Tree
Quelle: http://bl.ocks.org/mbostock/4339184
22. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
22
D3: Radial Reingold–Tilford Tree
Quelle: http://bl.ocks.org/mbostock/4063550
23. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
23
D3: Hierarchical Edge Bundling
Quelle: http://bl.ocks.org/mbostock/7607999
24. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
24
D3: Visualisierte Interessenbindungen im Schweizer Parlament
Quelle: NZZ, 4. März 2014 http://www.nzz.ch/aktuell/schweiz/die-daten-hinter-der-visualisierung-1.18255344
25. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
25
D3: 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
26. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
26
D3: Zoomable Treemaps
Quelle: http://mbostock.github.io/d3/talk/20111018/treemap.html
27. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
27
D3: Obama’s 2012 budget proposal
Quelle: http://www.nytimes.com/packages/html/newsgraphics/2011/0119-budget/
28. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
28
D3: Clustered Force Layout I
Quelle: http://bl.ocks.org/mbostock/1747543
29. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
29
D3: Tax Rates of U.S. Companies
Quelle: http://www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html?_r=0
30. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
30
D3: Circle Packing
Quelle: http://bl.ocks.org/mbostock/4063530/
31. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
31
D3: Zoomable Circle Packing
Quelle: http://bl.ocks.org/mbostock/7607535/
32. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
32
D3: Budget 2015 von Brig-Glis
Quelle: http://brig-glis.budget.opendata.ch
33. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
33
D3: Kanton Bern ASP 2014
http://be-asp.budget.opendata.ch
Grafischer Überblick:
Detailinformationen:
34. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
34
D3: Kanton Bern ASP 2014
35. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
35
Sankey Diagram
Quelle: https://en.wikipedia.org/wiki/Sankey_diagram/
36. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
36
D3: Sankey Diagrams
Quelle: http://bost.ocks.org/mike/sankey/
37. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
37
D3: Finanzausgleich im Kanton Bern
Quelle: http://be-fa.budget.opendata.ch/
38. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
38
D3: Chord Diagram
Quelle: http://bl.ocks.org/mbostock/4062006
39. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
39
D3: World of Debt
Quelle: http://www.roxxistic.me/blog/we-are-the-world-of-debt/
40. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
40
D3: Bilevel Partition
Quelle: http://bl.ocks.org/mbostock/5944371
41. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
41
D3: Deutscher Bundeshaushalt 2013
Quelle: http://www.bundeshaushalt-info.de/startseite/#/2013/soll/ausgaben/einzelplan.html
42. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
42
Polymaps: Choropleth Map
Quelle: http://polymaps.org/ex/statehood.html
43. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
43
Polymaps: Krankenkassenprämien
Quelle: http://healthinsurance.opendata.ch
44. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
44
Polymaps: Krankenkassenprämien
Quelle: http://www.actmore.ch/comparatif/
45. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
45
https://kfd.piratenfraktion-nrw.de
46. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
46
Parallel Coordinates
Quelle: Alfred Inselberg, Multidimensional Detectives, 1997 http://www.cs.ucdavis.edu/~ma/ECS289H/papers/Inselberg1997.pdf
47. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
47
D3: Parallel Coordinates
Quelle: http://syntagmatic.github.io/parallel-coordinates/
48. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
48
D3: Nutrient Contents
Quelle: http://exposedata.com/parallel/
49. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
49
earth.nullschool.net
50. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
50
Faux-3D Arcs
http://bl.ocks.org/dwtkns/4973620
51. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
51
three.js – www.threejs.org
52. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
52
Periodic Table
http://threejs.org/examples/css3d_periodictable.html
53. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
53
Sprites
http://threejs.org/examples/css3d_sprites.html
54. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
54
Ocean Shaders
http://threejs.org/examples/webgl_shaders_ocean.html
55. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
55
Dynamic Terrain
http://threejs.org/examples/webgl_terrain_dynamic.html
56. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
56
Jelly Fish
http://aleksandarrodic.com/p/jellyfish/
57. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
57
piste.io
earth.nullschool.net
58. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
58
Agenda
1.
Einführung Open Government Data
2.
Beispiele von Datenvisualisierungen
3.
Technologische Grundlagen
59. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
59
Open Data Vorlesung
App Entwicklung:
29 Open Data Apps von 60 Studierenden
Mit Data Coaches oder von Datenportalen
Erstmalige Durchführung:
Frühlingssemester 2014 am Institut für Wirtschaftsinformatik der Universität Bern
60. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
60
Open Data Apps der Studierenden
61. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
61
Vorlesungs-Website
http://www.iwi.unibe.ch/content/studium/veranstaltungen/resource/open_data_datenmanagement_und_visualisierung/
62. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
62
Bottom-Up Approach: Interactive Data Visualization for the Web
>
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
63. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
63
D3.js API Reference
Application Programming Interface von D3.js:
https://github.com/mbostock/d3/wiki/API-Reference
>
Selections - manipulate elements in the current document.
>
Transitions - interpolate attributes and styles smoothly over time.
>
Arrays - manipulate arrays and objects with ease.
>
Requests - load external data.
>
Formatting - convert numbers, dates and other objects to strings.
>
Localization - control locale-specific behavior, such as number formatting.
>
Colors - parse and manipulate colors; work with color spaces.
>
Namespaces - extend D3's support for XML namespaces.
>
Math - miscellaneous mathematical functions.
>
Internals - sundry utilities for extending D3.
64. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
64
Chaining Methods
d3.select("body").append("p").text("New paragraph!");
D3 References the D3 object, so we can access its methods. Our D3 adventure begins here.
.select("body") Give the select() method a CSS selector as input, and it will return a reference to the first element in the DOM that matches.
.append("p") append() creates whatever new DOM element you specify and appends it to the end (but just inside) of whatever selection it’s acting on. Finally, append() hands off a reference to the new element it just created.
.text("New paragraph!") text() takes a string and inserts it between the opening and closing tags of the current selection.
; The all-important semicolon indicates the end of this line of code. Chain over.
65. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
65
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("New paragraph!");
Binding Data
d3.select("body") Finds the body in the DOM and hands off a reference to the next step in the chain.
.selectAll("p") Selects all paragraphs in the DOM. Because none exist yet, this returns an empty selection. Think of this empty selection as representing the paragraphs that will soon exist.
.data(dataset) Counts and parses our data values. There are five values in our array called dataset, so everything past this point is executed five times, once for each value.
.enter() To create new, data-bound elements, you must use enter(). This method looks at the current DOM selection, and then at the data being handed to it. If there are more data values than corresponding DOM elements, then enter() creates a new placeholder element on which you can work your magic. It then hands off a reference to this new placeholder to the next step in the chain.
.append("p") Takes the empty placeholder selection created by enter() and appends a p element into the DOM. Hooray! Then it hands off a reference to the element it just created to the next step in the chain.
.text("New paragraph!") Takes the reference to the newly created p and inserts a text value.
66. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
66
Using Your Data
Die Testdaten:
var dataset = [ 5, 10, 15, 20, 25 ];
Anzeigen der Testdaten:
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(function(d) {return "I can count up to " + d; });
Nur die letzte Zeile anpassen:
.style("color", function(d) {
if (d > 15) { //Threshold of 15
return "red";
} else {
return "black";
}
});
67. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
67
Top Down Approach: Anpassen bestehender D3.js Snippets
Vorgehen:
1.
Welche Daten werden visualisiert? -> Bevölkerungswachstum
2.
Welche Visualisierungsart macht Sinn? -> D3 Show Real
3.
Wie muss ich die Daten anpassen? -> Transponieren
4.
Was muss ich am Code Snippet anpassen -> Pfade
5.
Was läuft schief? -> Debugging
68. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
68
Daten von opendata.admin.ch holen
Link: http://opendata.admin.ch/de/dataset/je-d-01-04-02-00-01
69. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
69
ODS Datei mit LibreOffice geöffnet
70. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
70
Export der Daten als UTF-8 CSV-Datei
71. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
71
Daten als CSV in Brackets öffnen
72. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
72
Daten bereinigen: Kommentare und doppelte Zwischenräume löschen
73. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
73
Daten bereinigen: Hochkommas löschen
74. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
74
Top Down Approach: Anpassen bestehender D3.js Snippets
Vorgehen:
1.
Welche Daten werden visualisiert? -> Bevölkerungswachstum
2.
Welche Visualisierungsart macht Sinn? -> D3 Show Real
3.
Wie muss ich die Daten anpassen? -> Transponieren
4.
Was muss ich am Code Snippet anpassen -> Pfade
5.
Was läuft schief? -> Debugging
75. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
75
D3.js Code Snippets
Link: https://github.com/mbostock/d3/wiki/Gallery
76. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
76
D3.js Code Snippets
Link: http://christopheviau.com/d3list/gallery.html
77. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
77
D3.js Code Snippets
Link: http://bl.ocks.org/mbostock
78. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
78
D3.js Code Snippets
Link: http://bost.ocks.org/mike/
79. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
79
Es gibt viele D3 Snippets im Internet...
80. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
80
Auswahl einer passenden Visualisierung
Link: http://bl.ocks.org/syntagmatic/3891711
81. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
81
Auswahl einer passenden Visualisierung: D3 Show Reel
Link: http://bl.ocks.org/mbostock/1256572
82. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
82
Code und Datenformat von D3 Show Reel analysieren
Link: http://bl.ocks.org/mbostock/1256572
83. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
83
Top Down Approach: Anpassen bestehender D3.js Snippets
Vorgehen:
1.
Welche Daten werden visualisiert? -> Bevölkerungswachstum
2.
Welche Visualisierungsart macht Sinn? -> D3 Show Real
3.
Wie muss ich die Daten anpassen? -> Transponieren
4.
Was muss ich am Code Snippet anpassen -> Pfade
5.
Was läuft schief? -> Debugging
84. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
84
Daten in LibreOffice öffnen
85. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
85
Daten kopieren und transponieren
86. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
86
Top Down Approach: Anpassen bestehender D3.js Snippets
Vorgehen:
1.
Welche Daten werden visualisiert? -> Bevölkerungswachstum
2.
Welche Visualisierungsart macht Sinn? -> D3 Show Real
3.
Wie muss ich die Daten anpassen? -> Transponieren
4.
Was muss ich am Code Snippet anpassen -> Pfade
5.
Was läuft schief? -> Debugging
87. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
87
Code Snippet in Bracket kopieren
88. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
88
Pfad zu D3.js Bibliothek anpassen
89. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
89
Pfad zu CSV-Daten anpassen
90. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
90
Pfad zu CSV-Daten anpassen
91. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
91
Top Down Approach: Anpassen bestehender D3.js Snippets
Vorgehen:
1.
Welche Daten werden visualisiert? -> Bevölkerungswachstum
2.
Welche Visualisierungsart macht Sinn? -> D3 Show Real
3.
Wie muss ich die Daten anpassen? -> Transponieren
4.
Was muss ich am Code Snippet anpassen -> Pfade
5.
Was läuft schief? -> Debugging
92. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
92
A) Gar keine Darstellung -> Console
93. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
93
Fehler in der Beschriftung der Spalten
94. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
94
Fehler in der Beschriftung der Spalten
95. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
95
B) Fehlerhafte Darstellung
96. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
96
Falsches Datumsformat
97. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
97
Korrektes Datumsformat
98. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
98
Jetzt klappts!
99. Dr. Matthias Stürmer, 11. Dezember 2014
Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools
99
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