Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools

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

Dr. Matthias Stürmer, 11. Dezember 2014
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
Agenda
1.
Einführung Open Government Data
2.
Beispiele von Datenvisualisierungen
3.
Technologische Grundlagen

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
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
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
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
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
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
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
Ö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
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
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
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
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
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
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
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
Agenda
1.
2.
3.

20
D3.js – www.d3js.org

21
D3: Reingold–Tilford Tree
Quelle: http://bl.ocks.org/mbostock/4339184

22
D3: Radial Reingold–Tilford Tree

23
D3: Hierarchical Edge Bundling

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
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
D3: Zoomable Treemaps
Quelle: http://mbostock.github.io/d3/talk/20111018/treemap.html

27
D3: Obama’s 2012 budget proposal
Quelle: http://www.nytimes.com/packages/html/newsgraphics/2011/0119-budget/

28
D3: Clustered Force Layout I

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
D3: Circle Packing
Quelle: http://bl.ocks.org/mbostock/4063530/

31
D3: Zoomable Circle Packing
Quelle: http://bl.ocks.org/mbostock/7607535/

32
D3: Budget 2015 von Brig-Glis
Quelle: http://brig-glis.budget.opendata.ch

33
D3: Kanton Bern ASP 2014
http://be-asp.budget.opendata.ch
Grafischer Überblick:
Detailinformationen:

34
D3: Kanton Bern ASP 2014

35
Sankey Diagram
Quelle: https://en.wikipedia.org/wiki/Sankey_diagram/

36
D3: Sankey Diagrams
Quelle: http://bost.ocks.org/mike/sankey/

37
D3: Finanzausgleich im Kanton Bern
Quelle: http://be-fa.budget.opendata.ch/

38
D3: Chord Diagram

39
D3: World of Debt
Quelle: http://www.roxxistic.me/blog/we-are-the-world-of-debt/

40
D3: Bilevel Partition

41
D3: Deutscher Bundeshaushalt 2013
Quelle: http://www.bundeshaushalt-info.de/startseite/#/2013/soll/ausgaben/einzelplan.html

42
Polymaps: Choropleth Map
Quelle: http://polymaps.org/ex/statehood.html

43
Polymaps: Krankenkassenprämien
Quelle: http://healthinsurance.opendata.ch

44
Polymaps: Krankenkassenprämien
Quelle: http://www.actmore.ch/comparatif/

45
https://kfd.piratenfraktion-nrw.de

46
Parallel Coordinates
Quelle: Alfred Inselberg, Multidimensional Detectives, 1997 http://www.cs.ucdavis.edu/~ma/ECS289H/papers/Inselberg1997.pdf

47
D3: Parallel Coordinates
Quelle: http://syntagmatic.github.io/parallel-coordinates/

48
D3: Nutrient Contents
Quelle: http://exposedata.com/parallel/

49
earth.nullschool.net

50
Faux-3D Arcs
http://bl.ocks.org/dwtkns/4973620

51
three.js – www.threejs.org

52
Periodic Table
http://threejs.org/examples/css3d_periodictable.html

53
Sprites
http://threejs.org/examples/css3d_sprites.html

54
Ocean Shaders
http://threejs.org/examples/webgl_shaders_ocean.html

55
Dynamic Terrain
http://threejs.org/examples/webgl_terrain_dynamic.html

56
Jelly Fish
http://aleksandarrodic.com/p/jellyfish/

57
piste.io
earth.nullschool.net

58
Agenda
1.
2.
3.

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
Open Data Apps der Studierenden

61
Vorlesungs-Website
http://www.iwi.unibe.ch/content/studium/veranstaltungen/resource/open_data_datenmanagement_und_visualisierung/

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
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
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
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
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
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
Daten von opendata.admin.ch holen
Link: http://opendata.admin.ch/de/dataset/je-d-01-04-02-00-01

69
ODS Datei mit LibreOffice geöffnet

70
Export der Daten als UTF-8 CSV-Datei

71
Daten als CSV in Brackets öffnen

72
Daten bereinigen: Kommentare und doppelte Zwischenräume löschen

73
Daten bereinigen: Hochkommas löschen

74
Vorgehen:
1.
2.
3.
4.
5.

75
D3.js Code Snippets
Link: https://github.com/mbostock/d3/wiki/Gallery

76
D3.js Code Snippets
Link: http://christopheviau.com/d3list/gallery.html

77
D3.js Code Snippets
Link: http://bl.ocks.org/mbostock

78
D3.js Code Snippets
Link: http://bost.ocks.org/mike/

79
Es gibt viele D3 Snippets im Internet...

80
Auswahl einer passenden Visualisierung
Link: http://bl.ocks.org/syntagmatic/3891711

81
Auswahl einer passenden Visualisierung: D3 Show Reel
Link: http://bl.ocks.org/mbostock/1256572

82
Code und Datenformat von D3 Show Reel analysieren
Link: http://bl.ocks.org/mbostock/1256572

83
Vorgehen:
1.
2.
3.
4.
5.

84
Daten in LibreOffice öffnen

85
Daten kopieren und transponieren

86
Vorgehen:
1.
2.
3.
4.
5.

87
Code Snippet in Bracket kopieren

88
Pfad zu D3.js Bibliothek anpassen

89
Pfad zu CSV-Daten anpassen

90
Pfad zu CSV-Daten anpassen

91
Vorgehen:
1.
2.
3.
4.
5.

92
A) Gar keine Darstellung -> Console

93
Fehler in der Beschriftung der Spalten

94
Fehler in der Beschriftung der Spalten

95
B) Fehlerhafte Darstellung

96
Falsches Datumsformat

97
Korrektes Datumsformat

98
Jetzt klappts!

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

Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools

Weitere ähnliche Inhalte

Was ist angesagt?

Ähnlich wie Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools

Mehr von Matthias Stürmer

Datenvisualisierungen mit der Open Source JavaScript Bibliothek D3.js – und anderen Tools