D3.js und SVG - Datenvisualisierung im Web - Schulung (3 Tage)

Data-Driven-Documents and Scaleable-Vector-Graphics with JavaScripts

Kurzbeschreibung

Die weltweit rasant wachsenden digitalen Datenmengen verlangen nach strukturierten und anschaulichen Darstellungsformen.
Mit standardisierten Webtechnologien wie JavaScript, HTML5, CSS und SVG ist es mögliche fortgeschrittene und individuelle Formate zur Datenvisualisierung zu erzeugen.

In diesem Workshop lernen Sie an Hand praktischer Beispiele wie Datenvisualisierung für Webanwendungen funktioniert.
Am ersten Tag dieses praktisch orientierten Workshops erhalten Sie einen Überblick über D3 relevante HTML, CSS, JavaScript und SVG Konzepte. Eventuelle Defizite in Bezug auf die vier Kerntechnologien werden aufgedeckt, geklärt und Lösungsmöglichkeiten aufgezeigt.
Am zweiten und dritten Tag werden D3 Konzepte wie z. B. Layouts, Scaling oder Transitions behandelt und in praktischen Beispielen angewendet. So werden unter anderem Charts in diversen Formen und Farben erstellt, Landkarten mittels Geo-Daten thematisch aufbereitet und visualisiert. Diverse Möglichkeiten der responsiven Darstellung in Web Seiten runden den Workshop ab.


Voraussetzungen

• JavaScript-Erfahrungen und Kenntnisse in HTML und CSS sind von Vorteil.


    Seminarinhalt

    Einführung
    • Überblick über D3 relevante HTML, CSS, JavaScript und SVG Konzepte verschaffen.
    • Eventuelle Defizite in Bezug auf die vier Kerntechnologien aufdecken, klären und beheben.

    HTML
    • kurzer Überflug über den aktuellen HTML5 Standard
    • BIG THREE (DIV, SVG, CANVAS)
    • Positionierung vs. Strukturierung
    • Semantik Web

    CSS
    • kurzer Überflug über den aktuellen CSS3 Standard
    • Elemente, Klassen, IDs
    • Selectoren
    • SVG Relevante Features (fill, stroke, etc.)
    • Tranformation, Transition & Co.
    • CSS Layout-Frameworks als Beispiel Bootstrap

    JavaScript
    • kurzer Überflug über den aktuellen ECMAScript 6 Standard
    • Datentypen
    • Objekte, Arrays und Funktionen
    • OO Konzepte Vererbung vs. Prototyping
    • Mengen Iteratoren (filter, map, reduce, forEach, etc.)
    • JavaScript Design Patterns
    • JSON und REST

    SVG - Scaleable-Vector-Graphics
    • kurzer Überflug über den aktuellen SVG Standard
    • Grundlegende Elemente (rect, ellipse, polygon, path, etc.)
    • Linien (line, path, etc.)
    • Container (g, defs, etc.)
    • Einbetten von SVG in HTML
    • SVG-Elemente mittels CSS „formatieren“ (fill, stroke, etc.)
    • SVG-Layering
    • SVG vs. Canvas

    Überblick über das D3.js framework verschaffen. Konzepte mittels D3 umsetzen. Wichtige D3 Konzepte wie z. B. Layouts, Scaling oder Transitions verstehen und in Beispielen anwenden.
    • Überflug über wichtige D3.js Konzepte,
    • Beispiele und APIs Datenformat, -qualität und -quellen
    • DataBinding (Selektoren, Enter, Update, Exit ...).
    • Daten visualisieren mittels SVG und / oder Canvas Texte, Labels und Tooltips Skalierung und Achsen i18n (Texte, Zahlen, Datum ..)
    • D3-Layouts (Tree-Layout, Chord-Layout ...)

    Fortgeschrittene Visualisiuerng
    • Fortgeschrittene Visualisierungen wie z.B. Themenkarten und animierte Charts erstellen.
    • Interaktivität integrieren und auf Events (Click, Hover...) reagieren.
    • GEO-Visualisierungen
    • GEO Daten in D3 integrieren
    • Animierte Änderungen (Transitions, Duration, Delay)
    • Interaktivität (Click, Hover...)


    Zielgruppen

    • Big Data-Scientists, die auf Basis großer Datenmengen (BigData) neue Informationen generieren und diese in neuen grafischen Formaten webbasiert darstellen wollen.
    • Datenjournalisten und Onlinejournalisten mit dem Fokus neue kreative Datenvisualisierungsmöglichkeiten zur Publikation zu nutzen.
    • Webentwickler


    Preise und Termine

    offene Schulung
    Eine offene Schulung findet in einem unserer Schulungszentren statt.
    Dauer:3 Tage
    Preis:1.990,00 € zzgl. USt. pro Teilnehmer (2.368,10€ inkl. USt.)
    Seminarstandorte:
    Starttermine:
    (ortsabhängig)


    Unterlagen:zzgl.
    Verpflegung:zzgl.
    Prüfung/Zertifizierung:zzgl.
    Firmenschulung
    Eine Firmenschlung kann sowohl bei Ihnen vor Ort als auch in einem unserer Schulungszentren stattfinden.
    Dauer:3 Tage
    Preis ab:1.590,00 € zzgl. USt. pro Tag (1.892,10€ inkl. USt.)
    Schulungszentren:
    • Hamburg
    • Berlin
    • Frankfurt
    • München
    • Nürnberg
    • Düsseldorf
    • Wien
    • Stuttgart
    • Hannover
    • Köln
    • Dortmund
    Starttermin:individuelle Vereinbarung
    Unterlagen:zzgl.
    Verpflegung:zzgl.
    Prüfung/Zertifizierung:zzgl.

    Software

    D3.js ist ein JavaScript Framework, das ermöglicht Datensätze im Web zu visualisieren. Es können damit sehr leicht SVG Grafiken (Scaleable-Vector-Graphics) erstellt werden und die DOM-Struktur durch Datensätze manipuliert werden. Dafür nutzt D3.js die aktuellen HTML5, CSS3 und SVG Web-Standards. Die DOM-Struktur ist eine vom World Wide Web Konsortium definierte Schnittstelle für den Zugriff auf HTML oder XML Dateien


    Seminarsprache

    Wir bieten unsere Seminare hauptsächlich in deutscher Sprache an – je nach Wunsch aber gerne auch in Englisch oder einer anderen Seminarsprache. Bitte fragen Sie doch einfach bei uns an.