Data Visualization with d3.js and Ember.js

Kaum eine Anwendung kommt heutzutage noch ohne Sammeln von Daten aus. Aber was hilft eine große Menge an Daten, wenn man damit nichts anfangen kann? Benutzer erwarten, dass sie ihre Daten schnell und effizient auswerten können. Mit modernen Webtechnologien ist es möglich, komplexe, benutzerfreundliche und effektive Datenvisualisierungen zu erstellen.

In diesem Workshop werden wir gemeinsam eine Datenvisualisierung erstellen. Wir werden anhand von Ember.js und D3.js zeigen, wie man Visualisierungen erstellen kann, die sich an beliebige Daten & Bildschirmgrößen anpassen. Außerdem werden wir häufige Stolpersteine und Probleme gemeinsam mit möglichen Lösungsansätzen besprechen.


TECHNISCHE ANFORDERUNGEN
Um unnötige Setup-Wartezeiten während des Workshops zu vermeiden, sollten alle Teilnehmer bitte ember-cli auf ihrem Rechner installieren. Eine detaillierte Anleitung ist zu finden unter https://ember-cli.com/user-guide/. Im Wesentlichen sind die nötigen Schritte:
* Node.js installieren (am besten 4.x oder neuer)
* Bower installieren: npm install bower -g
* Ember-cli installieren: npm install ember-cli -g

Danach bitte an einem beliebigen Ort auf dem Rechner ein neues ember-cli-Projekt anlegen: ember new ember-d3-workshop. Dies wird alle nötigen Dependencies herunterladen und das Projekt vorbereiten, damit der Workshop schneller starten kann. Ansonsten wird nur ein JS-fähiger Editor benötigt. Wir verwenden WebStorm: https://www.jetbrains.com/webstorm/, gute kostenloste Alternativen sind Visual Studio Code (nicht zu verwechseln mit Visual Studio): https://code.visualstudio.com/ oder Atom: https://atom.io/


AGENDA
9:00 - 9:30: Vorstellung, Erwartungen, Showcases
9:30 - 10:30 Theoretische Einführung in Datenvisualisierung - Dos & Don'ts
10:30 - 10:45 Kaffeepause
10:45 - 11:00 Workflow-Überblick, Sketches
11:00 - 12:00 Einführung in D3, Prototyping in Codepen
12:00 - 13:00 Mittagspause
13:00 - 14:00 Umsetzung mit Ember.js
14:00 - 15:00 Visualisierungen responsive machen; dynamisch auf Datenänderungen reagieren; Visualisierungen verbessern mit Tracking
15:00 - 15:15 Kaffeepause
15:15 - 16:30 Häufige Probleme & mögliche Lösungen

Vorkenntnisse

* Solide JavaScript-Kenntnisse
* Laptop mit beliebigen Betriebssystem

Lernziele

* Wie können Datenvisualisierungen mit modernen JavaScript-Tools implementiert werden?
* Wie kann man schnell und effektiv Visualisierungs-Prototypen erstellen und testen?
* Wie kann man Visualisierungen so implementieren, dass sie flexibel auf Bildschirmgröße und Datenänderungen reagieren?
* Was für häufige Stolpersteine gibt es bei D3, und wie kann man sie umgehen?