JavaScript-Grundlagen III
In dieser Einheit lernen Sie, räumliche Daten mit Leaflet.js auf interaktiven Karten darzustellen, GeoJSON-Daten zu verarbeiten und einfache Datenvisualisierungen mit CSS und SVG zu erstellen. Sie bauen ein Dashboard-Layout, das Karte, Tabelle und Filter kombiniert. Beim Agentic Coding lernen Sie, wie man mit CLAUDE.md und durchdachter Projektstruktur komplexe Projekte mit LLM-Unterstützung organisiert.
Lernziele
Nach Abschluss dieser Einheit können Sie:
- Karten-Visualisierung mit Leaflet.js: Sie können eine interaktive Karte mit Leaflet.js erstellen, Tile-Layer einbinden und Marker mit Popups setzen.
-
GeoJSON-Daten auf Karten darstellen: Sie verstehen das GeoJSON-Format
(Feature, FeatureCollection, Geometry, Properties) und können GeoJSON-Daten mit
L.geoJSON()auf einer Leaflet-Karte visualisieren. - Einfache Datenvisualisierung: Sie können Bar Charts mit CSS (proportionale div-Höhen) und SVG (rect-Elemente) erstellen, um Datenverteilungen wie Briefanzahlen pro Jahrzehnt darzustellen.
- Dashboard-Layout aufbauen: Sie können mit CSS Grid ein Multi-Panel-Layout erstellen, das Karte, Tabelle und Filtereingabe kombiniert.
- CLAUDE.md und Projektstruktur für Agentic Coding: Sie wissen, wie man eine CLAUDE.md-Datei anlegt, um einem LLM Projektregeln mitzuteilen, und wie man Dateien und Ordner sinnvoll strukturiert.
- Agentic-Coding-Fokus — CE + RE + RV: Sie können Context Engineering (CE) anwenden, um einem LLM genug Projektkontext zu geben, Requirement Engineering (RE) nutzen, um präzise Anforderungen für Dashboard-Komponenten zu formulieren, und Code Review (RV) durchführen, um generierten Code systematisch zu prüfen.
Überblick: Was erwartet Sie?
Interaktive Karten mit Leaflet.js
Leaflet.js ist die führende Open-Source-Bibliothek für interaktive Karten im Web. Sie lernen, Karten zu erstellen, Tile-Provider einzubinden, Marker mit Popups zu setzen und GeoJSON-Daten zu visualisieren — alles mit DH-relevanten Beispielen aus der Hugo-Schuchardt-Korrespondenz.
GeoJSON verstehen & nutzen
GeoJSON ist das Standardformat für räumliche Daten im Web. Sie lernen die Struktur von Point, LineString und Polygon, arbeiten mit FeatureCollections und verbinden geographische Daten mit Metadaten über Properties.
Datenvisualisierung ohne Bibliothek
Nicht jede Visualisierung braucht eine Bibliothek wie D3.js. Sie lernen, wie man mit purem CSS (proportionale div-Höhen) und einfachem SVG (rect-Elemente) aussagekräftige Bar Charts und Zeitleisten erstellt.
Dashboard-Layout mit CSS Grid
In vielen DH-Projekten müssen Karte, Tabelle und Filterfunktion nebeneinander funktionieren. Sie lernen, wie CSS Grid ein Multi-Panel-Dashboard ermöglicht, das alle Komponenten verbindet.
Agentic Coding: CLAUDE.md & Projektstruktur
Komplexe Projekte brauchen Regeln. Mit einer CLAUDE.md-Datei geben Sie einem LLM Projektkonventionen, Dateistrukturen und Coding-Standards mit. So wird Context Engineering (CE) zur Grundlage für konsistenten, generierten Code.