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

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

Agenda

1. Einführung Open Government Data

2. Beispiele von Datenvisualisierungen

3. Technologische Grundlagen

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

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."

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/

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"

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

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

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

Ö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

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

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

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

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

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

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

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

Agenda

D3.js – www.d3js.org

D3: Reingold–Tilford Tree

Quelle: http://bl.ocks.org/mbostock/4339184

D3: Radial Reingold–Tilford Tree

D3: Hierarchical Edge Bundling

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

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

D3: Zoomable Treemaps

Quelle: http://mbostock.github.io/d3/talk/20111018/treemap.html

D3: Obama’s 2012 budget proposal

Quelle: http://www.nytimes.com/packages/html/newsgraphics/2011/0119-budget/

D3: Clustered Force Layout I

D3: Tax Rates of U.S. Companies

Quelle: http://www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html?_r=0

D3: Circle Packing

Quelle: http://bl.ocks.org/mbostock/4063530/

D3: Zoomable Circle Packing

Quelle: http://bl.ocks.org/mbostock/7607535/

D3: Budget 2015 von Brig-Glis

Quelle: http://brig-glis.budget.opendata.ch

D3: Kanton Bern ASP 2014

http://be-asp.budget.opendata.ch

Grafischer Überblick: Detailinformationen

D3: Kanton Bern ASP 2014

Sankey Diagram

Quelle: https://en.wikipedia.org/wiki/Sankey_diagram/

D3: Sankey Diagrams

Quelle: http://bost.ocks.org/mike/sankey/

D3: Finanzausgleich im Kanton Bern

Quelle: http://be-fa.budget.opendata.ch/

D3: Chord Diagram

D3: World of Debt

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

D3: Bilevel Partition

D3: Deutscher Bundeshaushalt 2013

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

Polymaps: Choropleth Map

Quelle: http://polymaps.org/ex/statehood.html

Polymaps: Krankenkassenprämien

Quelle: http://healthinsurance.opendata.ch

Polymaps: Krankenkassenprämien

Quelle: http://www.actmore.ch/comparatif/

https://kfd.piratenfraktion-nrw.de

Parallel Coordinates

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

D3: Parallel Coordinates

Quelle: http://syntagmatic.github.io/parallel-coordinates/

D3: Nutrient Contents

Quelle: http://exposedata.com/parallel/

earth.nullschool.net

Faux-3D Arcs

http://bl.ocks.org/dwtkns/4973620

three.js – www.threejs.org

Periodic Table

http://threejs.org/examples/css3d_periodictable.html

Sprites

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

Ocean Shaders

http://threejs.org/examples/webgl_shaders_ocean.html

Dynamic Terrain

http://threejs.org/examples/webgl_terrain_dynamic.html

Jelly Fish

http://aleksandarrodic.com/p/jellyfish/

piste.io

earth.nullschool.net

Agenda

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

Open Data Apps der Studierenden

Vorlesungs-Website

http://www.iwi.unibe.ch/content/studium/veranstaltungen/resource/open_data_datenmanagement_und_visualisierung/

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

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.

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.

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.

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"; } });

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

Daten von opendata.admin.ch holen

Link: http://opendata.admin.ch/de/dataset/je-d-01-04-02-00-01

ODS Datei mit LibreOffice geöffnet

Export der Daten als UTF-8 CSV-Datei

Daten als CSV in Brackets öffnen

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

Daten bereinigen: Hochkommas löschen

D3.js Code Snippets

Link: https://github.com/mbostock/d3/wiki/Gallery

D3.js Code Snippets

Link: http://christopheviau.com/d3list/gallery.html

D3.js Code Snippets

Link: http://bl.ocks.org/mbostock

D3.js Code Snippets

Link: http://bost.ocks.org/mike/

Es gibt viele D3 Snippets im Internet...

Auswahl einer passenden Visualisierung

Link: http://bl.ocks.org/syntagmatic/3891711

Auswahl einer passenden Visualisierung: D3 Show Reel

Link: http://bl.ocks.org/mbostock/1256572

Code und Datenformat von D3 Show Reel analysieren

Link: http://bl.ocks.org/mbostock/1256572

Daten in LibreOffice öffnen

Daten kopieren und transponieren

Code Snippet in Bracket kopieren

Pfad zu D3.js Bibliothek anpassen

Pfad zu CSV-Daten anpassen

A) Gar keine Darstellung -> Console

Fehler in der Beschriftung der Spalten

B) Fehlerhafte Darstellung

Falsches Datumsformat

Korrektes Datumsformat

Jetzt klappts!

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

Technology

Modern JS in SharePoint

DE ILSH 2016 D3

Marinox® Calcium + Vitamin D3 - medikamente-per-klick.de fileProduktinformation Marinox® Marinox® Calcium + Vitamin D3 NAHRUNGSERGÄNZUNGSMITTEL MIT CALCIUM, VITAMIN D3, MAGNESIUM,

Vitamin D3 HeVert 2000 ie - docmorris.de

Übungen zu Musiktheorie D3 - bvbw-ludwigsburg.de

greetingcards TDD mit SPAs, Selenium, QUnit JS, …educationorganizer.de/Test-driven_Development_mit_Single...1 greetingcards – TDD mit SPAs, Selenium, QUnit JS, JEE6, REST, JPA

Gebrauchsanweisung - Hager & Werken · D2 D2 D2 D2 3 D3 D3 D3 D3 3 D4 D4 D4 D4 4 6 Carat. Carat Die Bedeutung der Metallkeramik nimmt ständig zu. Um den wachsenden Ansprüchen in

VIGANTOL 500 I.E. Vitamin D3 Tabletten

Denz D3 Prospekt

Ext Js On Rails

Ausstattungsliste Neue Modelle Ligier JS 50 - JS 50 - L JS RC · Ausstattungsliste Neue Modelle Ligier JS 50 - JS 50 - L JS RC ab 1.November 2014 Ausführung Motor Farben Preis inKl

Umrichter SINAMICS G120C - JS-Technik GmbH

IBAK JS Robotics | Kanalsanierung mit System

DE 2016 AYA D3

JS-Lager Lieder Heft 2006

Fragen und Antworten zu Bootstrap, weitere Konzeption der ......6. 30.03.2017 Fragen und Antworten zu D3.js, Kurzpräsentationen und Feedbacks zu den möglichen Apps 7. 06.04.2017

D3 Editing Complete ß09

Tutorial D3.js: Bar Chart · Tutorial D3.js: Bar Chart Workshop Webmap 4 Anpassung eines einfachen Beispiels Im Internet gibt es viele, teils sehr ausführliche Tutorials zur Erstellung

RIA - Entwicklung mit Ext JS

Übung Open Data: Skalen und Achsen mit D3.js realisieren · 2020. 2. 7. · Übung Open Data > 07: Skalen und Achsen mit D3.js realisieren Check for Ticks You can customize all aspects