Interaktive DataViz im Web

Slides

📊 Theorie

Interaktive DataViz im Web

🛠️ Praxis

Interaktive DataViz mit Vite, HighCharts und Scrollama

Setup

Node.js & npm

Node.js ist eine Laufzeitumgebung für JavaScript außerhalb des Browsers.

Darauf aufbauend kommt npm, der Standard für Paketverwaltung in JavaScript-Projekten.

Was bedeutet das konkret?

• Node.js führt JavaScript lokal aus (z. B. Dev-Server)
• npm installiert Bibliotheken und verwaltet Abhängigkeiten

👉 Vorteil:

• Keine manuellen Downloads von Libraries
• Versionskontrolle automatisch
• Reproduzierbare Projekte

---

Installation

👉 https://nodejs.org (LTS Version)

node -v
npm -v

---

Projekt mit Vite

Vite ist ein modernes Frontend-Build-Tool.

👉 Offizielle Doku: https://vite.dev/guide/

---

Projekt erstellen

npm create vite@latest
cd mein-projekt
npm run dev

---

Was macht Vite?

• startet lokalen Dev-Server
• nutzt native ES Modules (kein klassisches Bundling im Dev-Modus)
• Hot Module Replacement (HMR)

---

Build Prozess

Beim Produktionsbuild (npm run build) passiert:

• JavaScript wird gebündelt
• Code wird minified
• ungenutzter Code entfernt (Tree Shaking)

---

Bibliotheken

Highcharts

Highcharts ist eine Bibliothek für interaktive Diagramme.

👉 Demo: https://www.highcharts.com/demo/highcharts/bar-chart

---

Installation

npm install highcharts

import Highcharts from 'highcharts'

---

⚠️ Lizenz

• kostenpflichtig für kommerzielle Nutzung
• kostenlos für studentische Projekte 👉 https://www.highcharts.com/education/

---

Scroll Interaktionen

Scrollama

Scrollama ist eine kleine JavaScript-Library für scroll-basierte Interaktionen.
Sie baut auf dem Intersection Observer API auf und wird häufig für Scrollytelling, Step-Animationen und datengetriebene Storys verwendet.

npm install scrollama

import scrollama from 'scrollama'

---

Beispiel

scrollama()
  .setup({
    step: '#chart-container',
    offset: 0.5,
    once: true
  })
  .onStepEnter(() => {
    initChartOne()
  })

Summary

Tool	Zweck
Node.js	Runtime
npm	Packages
Vite	Build Tool
Highcharts	Charts
Scrollama	Scroll Trigger