Data Visualization with d3.js and Ember.jsKaum 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
Skills
* 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?
// Referenten
//
Francesco Novy
@_fnovy
arbeitet als Frontend-Entwickler bei Cropster. Das Unternehmen mit Standorten in Innsbruck (Österreich) und Sacramento (USA) entwickelt Services und Lösungen für Spezialitäten-Kaffee-Röster, -Verkoster und -Händler. Bei der Kaffeeröstung werden täglich unzählige Datenpunkte gesammelt, die dann sinnvoll aufbereitet werden müssen. Dafür braucht es interaktive & effiziente Datenvisualisierungen, die er mit Ember.js implementiert.
//
Lisa Gringl
@kringal
leitet den Designbereich bei Cropster. Zusätzlich zu Interaction- und User Interface Design ist sie auch in die Implementierung ihrer Designs mit HTML & CSS involviert. Datenvisualisierung und deren Interaktionskonzepte sind ein wichtiger Bestandteil ihrer Arbeit.