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 [email protected] www.digitale-nachhaltigkeit.unibe.ch

mailto:[email protected]

http://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

http://5stardata.info/



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






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






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

http://chimera.labs.oreilly.com/books/1230000000345/index.html



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.

https://github.com/mbostock/d3/wiki/Selections



https://github.com/mbostock/d3/wiki/Transitions

https://github.com/mbostock/d3/wiki/Arrays

https://github.com/mbostock/d3/wiki/Requests

https://github.com/mbostock/d3/wiki/Formatting

https://github.com/mbostock/d3/wiki/Localization

https://github.com/mbostock/d3/wiki/Colors

https://github.com/mbostock/d3/wiki/Namespaces

https://github.com/mbostock/d3/wiki/Math

https://github.com/mbostock/d3/wiki/Internals



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

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





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





84

Daten in LibreOffice öffnen



85

Daten kopieren und transponieren



86





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





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 [email protected] www.digitale-nachhaltigkeit.unibe.ch

mailto:[email protected]




Technology

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