AI für Datenvisualisierung

MetinC — Fri, 13 Mar 2026 12:37:00 +0000

AI für Datenvisualisierung: Charts, Dashboards und D3.js mit ChatGPT & Claude erstellen. 10 Prompts für interaktive Datenvisualisierungen.

Einleitung

Datenvisualisierung verwandelt Rohdaten in Erkenntnisse. AI hilft bei der Chart-Auswahl, D3.js-Code, und Dashboard-Design. Hier sind 10 Prompts für Datenvisualisierung mit Chart.js, D3.js, Recharts und mehr.

Prompt 1: Chart-Typ wählen

Außerdem gibt es hilfreiche Tools, die dich dabei unterstützen.

Hilf mir den richtigen Chart-Typ zu wählen:

Daten: [z.B. "Monatliche Umsätze nach Produkt-Kategorie, 12 Monate, 5 Kategorien"]
Ziel: [z.B. "Trend zeigen" / "Vergleich" / "Verteilung" / "Zusammensetzung"]
Zielgruppe: [z.B. "Management", "Technisches Team", "Endkunden"]

Empfehle basierend auf der Aufgabe:
1. **Vergleich**: Bar Chart, Grouped Bar, Radar
2. **Trend über Zeit**: Line Chart, Area Chart
3. **Zusammensetzung**: Stacked Bar, Pie/Donut, Treemap
4. **Verteilung**: Histogram, Box Plot, Violin
5. **Korrelation**: Scatter Plot, Bubble Chart
6. **Teil eines Ganzen**: Pie, Donut, Waffle Chart
7. **Hierarchie**: Treemap, Sunburst
8. **Geografie**: Choropleth Map, Bubble Map
9. **Flow**: Sankey Diagram, Funnel
10. **KPI**: Big Number, Sparkline, Gauge

Anti-Patterns:
- Pie Chart mit > 5 Slices
- 3D Charts (verzerren Vergleich)
- Dual Y-Axis (verwirrt oft)

Folglich erhältst du mit diesem Ansatz deutlich bessere Resultate.

Prompt 2: Chart Library Vergleich

Ebenso wichtig ist es, die Best Practices zu kennen.

Vergleiche Chart Libraries für mein Projekt:

Framework: [React / Vue / Vanilla JS]
Anforderungen: [z.B. "20 Charts, interaktiv, responsive, TypeScript"]

Vergleiche:
1. **Recharts**: React-native, deklarativ, gut für Standard-Charts
2. **Chart.js (react-chartjs-2)**: Leichtgewichtig, Canvas-basiert
3. **D3.js**: Maximale Kontrolle, steep Learning Curve
4. **Visx**: D3 + React Low-Level Primitives (Airbnb)
5. **Nivo**: D3-basiert, fertige React-Komponenten
6. **Plotly.js**: Wissenschaftliche Charts, interaktiv
7. **ECharts (Apache)**: Mächtig, große Chart-Auswahl
8. **Victory**: React-native kompatibel
9. **Observable Plot**: Minimalistisch, deklarativ
10. **Tremor**: Dashboard-Komponenten für React

Vergleichstabelle:
| Library | Bundle Size | TypeScript | Learning Curve | Chart Types |
Empfehlung basierend auf meinen Anforderungen.

Tatsächlich lässt sich dieser Code direkt in dein Projekt übernehmen.

Prompt 3: Basic Charts erstellen

Insbesondere für den Einstieg sind die folgenden Informationen hilfreich.

Erstelle folgende Charts:

Library: [z.B. "Recharts + React + TypeScript"]
Daten: 
```json
[DATEN HIER EINFÜGEN]
```

Erstelle:
1. **Line Chart**: Trend über Zeit (mit Tooltip, Grid, Legend)
2. **Bar Chart**: Vergleich zwischen Kategorien
3. **Pie/Donut Chart**: Prozentuale Verteilung
4. **Area Chart**: Stacked Area für Zusammensetzung über Zeit
5. **Scatter Plot**: Korrelation zwischen zwei Variablen
6. **Combo Chart**: Bar + Line in einem Chart

Pro Chart:
7. Responsive Container (100% width)
8. Ansprechendes Farbschema (keine Regenbogen!)
9. Formatierte Achsen (€, %, korrekte Zahlenformate)
10. Loading State und Empty State

TypeScript: Typisierte Daten und Props.
Styling: Tailwind-kompatibel.

Deshalb empfiehlt es sich, den Prompt schrittweise zu verfeinern.

Prompt 4: D3.js Visualisierungen

Allerdings gibt es einige wichtige Unterschiede zu beachten.

Erstelle eine D3.js Visualisierung:

Typ: [z.B. "Force-Directed Graph" / "Treemap" / "Sankey" / "Choropleth"]
Daten:
```json
[DATEN HIER]
```

Implementiere:
1. **SVG Setup**: Responsive SVG mit ViewBox
2. **Scales**: d3.scaleLinear, scaleTime, scaleOrdinal
3. **Axes**: d3.axisBottom, axisLeft mit Formatierung
4. **Data Binding**: enter/update/exit Pattern
5. **Transitions**: Animierte Updates (d3.transition)
6. **Tooltip**: Mouseover mit detaillierten Infos
7. **Zoom/Pan**: d3.zoom für große Visualisierungen
8. **Brush**: Bereich-Auswahl für Filtering
9. **Legend**: Interaktive Legende (click to hide)
10. **React Integration**: useRef + useEffect oder visx

D3 mit React:
- D3 für Berechnungen, React für DOM (empfohlen)
- Oder: D3 komplett mit useRef (traditionell)
- visx: Beste Option für D3 + React

Prompt 5: Interaktive Charts

Deshalb lohnt es sich, dieses Thema genauer zu betrachten.

Mache meine Charts interaktiv:

Library: [z.B. "Recharts"]
Features gewünscht: [z.B. "Filter, Drill-Down, Zeitraum-Auswahl"]

Implementiere:
1. **Tooltip**: Custom Tooltip mit Details, formatiert
2. **Click Handler**: Auf Bar/Slice klicken → Detail-View
3. **Hover Effects**: Highlight, Opacity Änderung
4. **Legend Toggle**: Datenserien ein/ausblenden
5. **Time Range Picker**: Letzte 7/30/90 Tage, Custom Range
6. **Drill-Down**: Klick auf "Q1" zeigt Januar, Februar, März
7. **Cross-Filtering**: Chart A filtern → Chart B aktualisiert sich
8. **Brush/Zoom**: Bereich im Chart auswählen für Detail
9. **Annotation**: Markierungen hinzufügen ("Launch", "Black Friday")
10. **Comparison Mode**: Zeitraum A vs. Zeitraum B

State Management:
- Shared Filter State (React Context oder Zustand)
- URL State für teilbare Filter-Einstellungen
- Debounce für Performance bei vielen Updates

Somit sparst du Zeit und erhältst qualitativ hochwertigeren Output.

Prompt 6: Dashboard Layout

Tatsächlich ist dieser Bereich besonders wichtig für Entwickler.

Designe ein Dashboard Layout:

Typ: [z.B. "Analytics Dashboard" / "Admin Panel" / "Sales Dashboard"]
Charts: [z.B. "6 Charts, 4 KPIs, 1 Tabelle"]

Implementiere:
1. **KPI Row**: Große Zahlen oben (Umsatz, User, Conversion)
2. **Grid Layout**: CSS Grid / react-grid-layout für Responsive
3. **Main Chart**: Hero Chart prominent platziert
4. **Supporting Charts**: 2-3 kleinere Charts
5. **Data Table**: Sortierbare, filterbare Tabelle
6. **Sidebar Filters**: Datepicker, Dropdown, Checkboxes
7. **Dark/Light Mode**: Charts in beiden Themes
8. **Drag & Drop**: Widgets verschieben (react-grid-layout)
9. **Fullscreen Mode**: Einzel-Chart im Vollbild
10. **Print/PDF Layout**: Druckoptimiertes Layout

Dashboard Design Prinzipien:
- Wichtigstes oben links (F-Pattern)
- Konsistente Farben über alle Charts
- Max. 7 Charts pro Seite (Cognitive Load)
- Whitespace für Übersichtlichkeit

Darüber hinaus lässt sich das Beispiel leicht erweitern.

Prompt 7: Echtzeit-Charts

Dabei spielen mehrere Faktoren eine wichtige Rolle.

Implementiere Echtzeit-Charts:

Datenquelle: [z.B. "WebSocket mit 1 Update/Sekunde"]
Chart-Typ: [z.B. "Live Line Chart mit gleitendem Fenster"]

Implementiere:
1. **Streaming Data**: WebSocket/SSE → Chart Update
2. **Rolling Window**: Letzte 60 Datenpunkte anzeigen
3. **Smooth Animation**: requestAnimationFrame für Updates
4. **Buffer**: Daten sammeln, alle 100ms rendern (nicht pro Message)
5. **Pause/Resume**: Live-Stream pausieren (für Analyse)
6. **Sparklines**: Mini-Charts für KPIs (1-Zeilen-Trend)
7. **Gauge/Meter**: Echtzeitwert mit Min/Max Bereich
8. **Heatmap**: Live-Aktivität als Heatmap
9. **Performance**: Canvas statt SVG für > 1.000 Punkte
10. **History Toggle**: Zwischen Live und historischen Daten

Performance-Tipps:
- Canvas-basierte Charts für High-Frequency Updates
- Web Worker für Daten-Verarbeitung
- React: useMemo/useCallback für Render-Optimierung
- Chart.js streaming Plugin oder uPlot für Performance

Weiterhin ist es ratsam, die Ergebnisse immer kritisch zu prüfen.

Prompt 8: Responsive & Accessible Charts

Im Folgenden findest du alle wichtigen Details dazu.

Mache meine Charts responsive und barrierefrei:

Library: [z.B. "Recharts / D3.js"]

Responsive:
1. **Container Query**: Chart passt sich dem Container an
2. **Breakpoints**: Andere Chart-Variante auf Mobile
3. **Legend Position**: Unten auf Mobile, rechts auf Desktop
4. **Touch Support**: Tooltip bei Touch statt Hover
5. **Font Scaling**: Lesbare Labels auf allen Geräten

Accessibility:
6. **ARIA Labels**: role="img", aria-label mit Datenzusammenfassung
7. **Keyboard Navigation**: Tab durch Datenpunkte
8. **Screen Reader**: Alternative Tabelle unter dem Chart
9. **Farben**: Colorblind-safe Palette (keine rot/grün Kombination)
10. **Patterns**: Muster zusätzlich zu Farben (Stripes, Dots)

Colorblind-Safe Paletten:
- IBM Design: ["#648FFF", "#785EF0", "#DC267F", "#FE6100", "#FFB000"]
- Okabe-Ito: Standardpalette für wissenschaftliche Visualisierung
- Custom: Immer mit Simulator testen (Sim Daltonism)

Prompt 9: Daten-Transformation

Dementsprechend solltest du die folgenden Aspekte kennen.

Transformiere meine Rohdaten für die Visualisierung:

Rohdaten:
```json
[DATEN HIER]
```

Ziel-Chart: [z.B. "Stacked Bar Chart, gruppiert nach Monat und Kategorie"]

Transformiere:
1. **Aggregation**: Summe/Durchschnitt pro Zeitraum
2. **Gruppierung**: Daten nach Kategorie gruppieren
3. **Pivot**: Zeilen zu Spalten transformieren
4. **Prozent-Berechnung**: Anteil am Gesamt
5. **Rolling Average**: Gleitender Durchschnitt (7 Tage)
6. **Cumulative Sum**: Kumulierte Werte über Zeit
7. **Normalisierung**: Werte auf 0-100% skalieren
8. **Outlier-Erkennung**: Extreme Werte markieren
9. **Filling**: Fehlende Datenpunkte interpolieren
10. **Formatting**: Dates, Numbers, Currency für Labels

Tools:
- Lodash: _.groupBy, _.sumBy
- D3: d3.rollup, d3.group, d3.bin
- date-fns: Format, Parse, Intervalle

Dementsprechend ist eine manuelle Überprüfung empfehlenswert.

Prompt 10: Export & Reporting

Zusammenfassend lässt sich sagen, dass dies ein zentraler Aspekt ist.

Implementiere Chart-Export und Reporting:

Features: [z.B. "PNG Export, PDF Report, CSV Daten"]

Implementiere:
1. **PNG/SVG Export**: Chart als Bild herunterladen
2. **PDF Report**: Mehrseitige PDFs mit Charts (react-pdf)
3. **CSV/Excel Export**: Zugrundeliegende Daten exportieren
4. **Copy to Clipboard**: Chart als Bild kopieren
5. **Share Link**: Dashboard-State als URL (Filter, Zeitraum)
6. **Scheduled Reports**: Automatisch per E-Mail versenden
7. **Print Stylesheet**: Druckoptimierte Darstellung
8. **Embed Code**: Chart als iFrame/Script einbetten
9. **PowerPoint**: Charts als PPTX (pptxgenjs)
10. **API**: Chart als PDF/PNG per API generieren (Server-Side)

Techniken:
- html2canvas + jsPDF für Client-Side PDF
- Puppeteer/Playwright für Server-Side Screenshots
- @react-pdf/renderer für React-basierte PDFs
- SheetJS für Excel Export

Vor allem die detaillierten Anweisungen sorgen für präzisere Ergebnisse.

FAQ

Recharts oder D3.js?

Grundsätzlich gibt es dabei einige Punkte zu beachten.

Recharts für 90% der Projekte: Standard-Charts (Line, Bar, Pie), schnell implementiert, React-native. D3.js nur für: Custom Visualisierungen (Sankey, Force Graph, Maps), maximale Kontrolle. Nivo als Mittelweg (D3-basiert, React-Komponenten).

SVG oder Canvas für Charts?

Darüber hinaus bietet dieser Abschnitt konkrete Beispiele und Tipps.

SVG für interaktive Charts mit < 1.000 Elementen (Tooltips, Hover, CSS Styling). Canvas für Performance: > 10.000 Datenpunkte, Echtzeit-Updates, Heatmaps. WebGL für extreme Performance (> 100k Punkte). Die meisten Chart-Libraries nutzen SVG.

Kann AI gute Visualisierungen designen?

Dennoch solltest du einige Besonderheiten beachten.

AI kann Chart-Code generieren und den richtigen Chart-Typ empfehlen. Für Design: Beschreibe deine Daten und Ziel, AI empfiehlt Chart-Typ + Farbpalette. Für D3.js besonders hilfreich – AI schreibt den komplexen D3-Code, du fokussierst dich auf die Datenstory.

Verwandte Artikel:

AI für Frontend-Entwicklung
Darüber hinaus AI für WebSocket & Echtzeit
AI für Performance-Optimierung

Zuletzt aktualisiert: März 2026

Der Beitrag AI für Datenvisualisierung erschien zuerst auf MetinCelik.de.

Datenvisualisierung Archive - MetinCelik.de