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

Übung Open Data Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App

Termin 5, 23. März 2017 Dr. Matthias Stürmer und Prof. Dr. Thomas Myrach

Forschungsstelle Digitale Nachhaltigkeit Institut für Wirtschaftsinformatik Universität Bern

FS 2017

Übung Open Data > 05: Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App

2

Terminübersicht Open Data Übung

1. 23.02.2017 Einführung: Ablauf, Open Data Speed Dating, Data Coaching, App Demos etc. 2. 02.03.2017 Fragen und Antworten zu HTML & CSS, Informationen zum Ablauf der Übung 3. 09.03.2017 Open Data Speed Dating 4. 16.03.2017 Fragen und Antworten zu JavaScript

Daten der Data Coaches analysieren, Konzept der Anwendung überlegen 5. 23.03.2017 Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data App 6. 30.03.2017 Fragen und Antworten zu D3.js, Kurzpräsentationen und Feedbacks zu den möglichen Apps 7. 06.04.2017 Gastreferat zu Datenvisualisierungen: Benjamin Wiederkehr, Interactive Things

App programmieren 8. 13.04.2017 Gastreferat zu OpenStreetMap: Prof. Stefan Keller, Hochschule Rapperswil

App programmieren 20.04.2017 Osterferien 9. 27.04.2017 Gastreferat zu User Experience: Philipp Murkowsky, Puzzle

Zwischenpräsentationen 10. 04.05.2017 App programmieren 11. 11.05.2017 App programmieren 12. 18.05.2017 App programmieren 25.05.2017 Auffahrt 13. 01.06.2017 Abschlusspräsentationen

FS 2017


3

Agenda

1. Fragen und Antworten zu Bootstrap 2. Nächste Runde: endlich D3.js! 3. Konzeption Open Data App 4. Weitere Informationen

FS 2017


4

Vorwissenstest Bootstrap (JavaScript/HTML)

Ergebnis Wert

Gesamtzahl der Personen, die den Test gestartet haben 5 (18/29)

Gesamtzahl aller beendeten Tests (Benutzer, die maximale Anzahl Passes eingereicht haben.) 4 (15/24)

Mittlere Bearbeitungsdauer aller Tests 00:05:34 (00:13:05/00:04:24)

Gesamtzahl der bestandenen Tests 1 (10/17)

Durchschnittliche Punktezahl der bestandenen Tests 27.00 von 29.00

(25.80 von 31.00/ 10.71 von 13.00)

Mittlere Bearbeitungsdauer aller bestandenen Tests 00:13:47 (00:17:09/00:05:25)

FS 2017


5

Fragen und Antworten zu Bootstrap

> Auch Feedback zu den Videos, Methodik etc. ist willkommen!

FS 2017


6

Agenda

1. Fragen und Antworten zu Bootstrap 2. Nächste Runde: endlich D3.js! 3. Konzeption Open Data App 4. Weitere Informationen

FS 2017


7

D3.js

> JavaScript Bibliothek für interaktive Datenvisualisierungen > Arbeitet mit JavaScript, HTML, CSS und SVG im DOM

FS 2017


8

Scalable Vector Graphics (SVG)

Quelle: https://www.w3schools.com/graphics/svg_intro.asp

https://www.w3schools.com/graphics/svg_intro.asp

FS 2017


9

SVG Beispiel

Quelle: https://bl.ocks.org/emeeks/raw/9d615418c71132129f20

https://bl.ocks.org/emeeks/raw/9d615418c71132129f20

FS 2017


10

Document Object Model (DOM)

Quelle: https://wiki.selfhtml.org/wiki/JavaScript/DOM

https://wiki.selfhtml.org/wiki/JavaScript/DOMhttps://wiki.selfhtml.org/wiki/JavaScript/DOM

FS 2017


11

D3.js Version 4.0 im Juni 2016

Quelle: https://github.com/d3/d3/releases/tag/v4.0.0

https://github.com/d3/d3/releases/tag/v4.0.0https://github.com/d3/d3/releases/tag/v4.0.0

FS 2017


12

Genau achten welche Version verwenden! (besonders bei Snippets vom Internet)

Version 3.x von D3.js

Verschachtelte Funktionsnamen (nested namespace) Beispiel: d3.scale.linear()

Version 4.x von D3.js

FS 2017


13

Application Programming Interface (API) Dokumentation von D3.js Version 3

Quelle: https://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.md

https://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.mdhttps://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.mdhttps://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.mdhttps://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.mdhttps://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.mdhttps://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.mdhttps://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.mdhttps://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.mdhttps://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.mdhttps://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.md

FS 2017


14

Application Programming Interface (API) Dokumentation von D3.js Version 4

Quelle: https://github.com/d3/d3/blob/master/API.md

https://github.com/d3/d3/blob/master/API.md

FS 2017


15

Interactive Data Visualization for the Web

> Autor: Scott Murray

> Verlag: O'Reilly Media

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

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

FS 2017


16

Gratis vollständiges Online-Buch

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

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

FS 2017


17

D3.js in Action

> Autor: Elijah Meeks (Datenvisualisierer bei Netflix)

> Verlag: Manning Publications

> Februar 2015, 352 Seiten, Englisch

> ISBN: 9781617292118

> Auf Manning.com als eBook (PDF) für USD 35.99

> Zweite Auflage in Erarbeitung (Wechsel auf D3.js Version 4)

Quelle: https://www.manning.com/books/d3-js-in-action

https://www.manning.com/books/d3-js-in-actionhttps://www.manning.com/books/d3-js-in-actionhttps://www.manning.com/books/d3-js-in-actionhttps://www.manning.com/books/d3-js-in-actionhttps://www.manning.com/books/d3-js-in-actionhttps://www.manning.com/books/d3-js-in-actionhttps://www.manning.com/books/d3-js-in-actionhttps://www.manning.com/books/d3-js-in-action

FS 2017


18

Debugging

> Was tun wenn nichts dargestellt wird? F12 und Console

FS 2017


19

Debugging

> Was tun wenn nichts dargestellt wird? F12 und Console > Fehlermeldung lesen: «Uncaught SyntaxError: Unexpected token )» > Fehler finden: index.html:23 Zeile 23 (geschweifte Klammer fehlt)

FS 2017


20

Debugging

> Jetzt klappts!

FS 2017


21

Lernvideos zu D3.js

FS 2017


22

Agenda

1. Fragen und Antworten zu JavaScript 2. Nächste Runde: endlich D3.js! 3. Konzeption Open Data App 4. Weitere Informationen

FS 2017


23

Data Coaches und Gruppen

> Hansueli Pestalozzi, BAFU 1. Matthieu Pfenninger und Sandro Andermatt 2. Isabelle Dütsch und Stefanie Meili 3. Rok Rucigaj und Alexander Rieder 4. Sven Kellenberger

> David Oesch und Pasquale Di Donato, swisstopo 5. Syrel Aliaksei

> Christian Trachsel und Rahel Ryf, SBB 6. David Bösiger und Dominik Briner 7. Jan Dietrich 8. Lino Hess und Mario Hess 9. Benedikt Hitz-Gamper 10. Mathias Zuber und Patrick Roten

FS 2017


24


> Daniela Nowak und Joel Fisler, MeteoSchweiz 11. Martina Locher und Mike Suter

> Christian Loosli, Bernmobil 12.Lisa Binkert und Jonas Schneuwly 13.Danilo Bigovic und Delia Meyer 14.Kevin Meichtry und Martin Stadelmann 15.Raoul Grossenbacher und Raphael Bodenmann 16.Piyush Rauch und Anna Roth

> François Delavy, SNF 17. Jonas Schwery und Matthias Busset

> Thomas Lo Russo, Statistisches Amt des Kt. ZH 18. Julien Diep

FS 2017


25


> Patrick Trees, Grosser Rat des Kantons Bern 19. Victor Bankoul und Karl Michael Hundius 20. Thomas Eichenberger und Samuel Wüthrich 21. Simon Preisig

> Tobias Schalit, Bildungsdirektion Kanton Zürich 22.Leandra Kellerhals und Moritz Seiler 23.Carole Steiner und Jasmin Sert

> Michael Erne & Daniel Schwarz, smartvote 24. Bojan Stojkovic und Lia Steiner

> Marco Majoleth, Bundesarchiv 25. Leo Benmenni und Nina Liechti

FS 2017


26

Weitere Datenquellen

> data.worldbank.org 26. Mathias Stocker und Marco Indermühle

> Hydrologischer Atlas der Schweiz 27. Alain Bühlmann

Noch freier Data Coach: > Beat Estermann, Berner Fachhochschule:

Gedächtnisinstitutionen

FS 2017


27

Ein paar Tipps zur App-Entwicklung

Jetzt beginnen: > Selbständig Meeting mit Data Coach vereinbaren > Kontext und Daten kennen lernen, Datenvebindungen verstehen > Fragen stellen, Notizen machen, selber im Internet recherchieren > Immer von den Daten ausgehend sich überlegen, was man aussagen könnte > Inhaltliche Fragestellungen definieren, Zielsetzungen definieren > Skizzen der App machen, Visualisierungs-Varianten analysieren

Später bei der Umsetzung (nach den D3.js Videos): > Data Coach regelmässig kleine Fortschritte zeigen

App auf Sandbox hochladen: https://sandbox.opendata.iwi.unibe.ch/ > Feedback abholen vom Data Coach > Code Snippets recherchieren und ausprobieren > Unterstützung von Programming Coaches anfordern

https://sandbox.opendata.iwi.unibe.ch/

FS 2017


28

Agenda

1. Fragen und Antworten zu JavaScript 2. Nächste Runde: endlich D3.js! 3. Konzeption Open Data App 4. Weitere Informationen

FS 2017


29

Treffen der Data Visualization Group

Mittwoch, 5. April 2017 16:00 Uhr bis 18:00 Uhr http://www.digitale-nachhaltigkeit.unibe.ch/studium/data_visualization_group/05_april_2017/index_ger.html

http://www.digitale-nachhaltigkeit.unibe.ch/studium/data_visualization_group/index_ger.htmlhttp://www.digitale-nachhaltigkeit.unibe.ch/studium/data_visualization_group/05_april_2017/index_ger.html

FS 2017


30

Django Girls in Bern

https://djangogirls.org/bern/

https://djangogirls.org/bern/

FS 2017


31

Opendata.ch Konferenz in Luzern

https://opendata.ch/2017

https://opendata.ch/2017

FS 2017


32

Nacht der Forschung 2017

Samstag, 16. September 2017, mit Open Data Hack Room!

Übung Open Data��Fragen und Antworten zu Bootstrap, weitere Konzeption der Open Data AppTerminübersicht Open Data ÜbungAgendaVorwissenstest Bootstrap (JavaScript/HTML)Fragen und Antworten zu BootstrapAgendaD3.jsScalable Vector Graphics (SVG)SVG BeispielDocument Object Model (DOM)D3.js Version 4.0 im Juni 2016Genau achten welche Version verwenden! (besonders bei Snippets vom Internet)Application Programming Interface (API)�Dokumentation von D3.js Version 3Application Programming Interface (API)�Dokumentation von D3.js Version 4Interactive Data Visualization for the WebGratis vollständiges Online-BuchD3.js in ActionDebuggingDebuggingDebuggingLernvideos zu D3.jsAgendaData Coaches und GruppenData Coaches und GruppenData Coaches und GruppenWeitere DatenquellenEin paar Tipps zur App-EntwicklungAgendaTreffen der Data Visualization GroupDjango Girls in BernOpendata.ch Konferenz in LuzernNacht der Forschung 2017

Documents

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