Installiere die belt CLI-Fähigkeit: npx skills add belt-sh/cli
Datenvisualisierung
Erstelle klare, effektive Datenvisualisierungen über die inference.sh CLI.
Schnellstart
Erfordert inference.sh CLI (belt). Installationsanleitung
belt login
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\nmonths = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\"]\nrevenue = [42, 48, 55, 61, 72, 89]\n\nfig, ax = plt.subplots(figsize=(10, 6))\nax.bar(months, revenue, color=\"#3b82f6\", width=0.6)\nax.set_ylabel(\"Revenue ($K)\")\nax.set_title(\"Monthly Revenue Growth\", fontweight=\"bold\")\nfor i, v in enumerate(revenue):\n ax.text(i, v + 1, f\"${v}K\", ha=\"center\", fontweight=\"bold\")\nplt.tight_layout()\nplt.savefig(\"revenue.png\", dpi=150)\nprint(\"Saved\")"
}'
Leitfaden zur Diagrammauswahl
Welches Diagramm für welche Daten?
| Datenbeziehung | Bestes Diagramm | Niemals verwenden |
|---|
| Veränderung über die Zeit | Liniendiagramm | Kreisdiagramm |
| Kategorien vergleichen | Balkendiagramm (horizontal bei vielen Kategorien) | Liniendiagramm |
| Teil eines Ganzen | Gestapeltes Balkendiagramm, Treemap | Kreisdiagramm (umstritten, aber: Balken ist immer klarer) |
| Verteilung | Histogramm, Box-Plot | Balkendiagramm |
| Korrelation | Streudiagramm | Balkendiagramm |
| Ranking | Horizontales Balkendiagramm | Vertikales Balken‑, Kreisdiagramm |
| Geografisch | Choroplethenkarte | Balkendiagramm |
| Zusammensetzung über die Zeit | Gestapeltes Flächendiagramm | Mehrere Kreisdiagramme |
| Einzelne Kennzahl | Große Zahl (KPI‑Karte) | Jedes Diagramm (überdimensioniert) |
| Fluss / Prozess | Sankey‑Diagramm | Balkendiagramm |
Das Problem mit Kreisdiagrammen
Kreisdiagramme sind fast immer die falsche Wahl:
❌ Probleme mit Kreisdiagrammen:
- Schwer, ähnlich große Segmente zu vergleichen
- Können nicht mehr als 5–6 Kategorien darstellen
- 3D‑Kreisdiagramme sind immer falsch
- Exakte Werte sind nicht ablesbar
✅ Stattdessen verwenden:
- Horizontales Balkendiagramm (einfacher Vergleich)
- Gestapeltes Balkendiagramm (Teil eines Ganzen)
- Treemap (hierarchische Teile)
- Einfach eine Tabelle (wenn es auf Genauigkeit ankommt)
Gestaltungsregeln
Achsen
| Regel | Warum |
|---|
| Y‑Achse immer bei 0 beginnen (Balkendiagramme) | Verhindert irreführende Darstellung |
| Liniendiagramme KÖNNEN über 0 beginnen | Wenn Veränderung gezeigt wird, nicht absolute Werte |
| Beide Achsen beschriften | Der Leser soll Einheiten nicht erraten müssen |
| Überflüssige Gitterlinien entfernen | Reduziert visuelles Rauschen |
| Horizontale Beschriftungen verwenden | Vertikaler Text ist schwer zu lesen |
| Balkendiagramme nach Wert sortieren | Alphabetische Reihenfolge nur verwenden, wenn es einen Grund gibt |
Farbe
| Prinzip | Anwendung |
|---|
| Maximal 5–7 Farben pro Diagramm | Mehr wird unlesbar |
| Eines hervorheben | Alles andere in Grau, den Fokus farbig |
| Sequentiell für Mengen | Hell → Dunkel für niedrig → hoch |
| Divergierend für positiv/negativ | Rot ← neutral → Blau |
| Kategorial für Gruppen | Unterschiedliche Farbtöne, ähnliche Helligkeit |
| Farbblindsicher | Rot/Grün vermeiden — Formen oder Beschriftungen hinzufügen |
| Konsistente Bedeutung | Wenn Blau = Umsatz, dann überall Blau verwenden |
Gute Farbpaletten
sequential = ["#eff6ff", "#bfdbfe", "#60a5fa", "#2563eb", "#1d4ed8"]
diverging = ["#ef4444", "#f87171", "#d1d5db", "#34d399", "#10b981"]
categorical = ["#3b82f6", "#f59e0b", "#10b981", "#8b5cf6", "#ef4444"]
cb_safe = ["#0077BB", "#33BBEE", "#009988", "#EE7733", "#CC3311"]
Text und Beschriftungen
| Element | Regel |
|---|
| Titel | Sagt die Erkenntnis, nicht den Datentyp. „Umsatz im Q2 verdoppelt“ nicht „Q2 Umsatzdiagramm“ |
| Annotationen | Wichtige Datenpunkte direkt im Diagramm hervorheben |
| Legende | Nach Möglichkeit vermeiden — direkt auf Diagrammlinien/‑balken beschriften |
| Schriftgröße | Mindestens 12px, 14px+ für Präsentationen |
| Zahlenformat | K, M, Mrd. für große Zahlen verwenden (42K nicht 42.000) |
| Datenbeschriftungen | Zu Balken/Punkten hinzufügen, wenn genaue Werte wichtig sind |
Diagrammrezepte
Liniendiagramm (Zeitreihe)
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\nfig, ax = plt.subplots(figsize=(12, 6))\nfig.patch.set_facecolor(\"white\")\n\nmonths = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"]\nthis_year = [120, 135, 148, 162, 178, 195, 210, 228, 245, 268, 290, 320]\nlast_year = [95, 102, 108, 115, 122, 130, 138, 145, 155, 165, 178, 190]\n\nax.plot(months, this_year, color=\"#3b82f6\", linewidth=2.5, marker=\"o\", markersize=6, label=\"2024\")\nax.plot(months, last_year, color=\"#94a3b8\", linewidth=2, linestyle=\"--\", label=\"2023\")\nax.fill_between(range(len(months)), last_year, this_year, alpha=0.1, color=\"#3b82f6\")\n\nax.annotate(\"$320K\", xy=(11, 320), fontsize=14, fontweight=\"bold\", color=\"#3b82f6\")\nax.annotate(\"$190K\", xy=(11, 190), fontsize=12, color=\"#94a3b8\")\n\nax.set_ylabel(\"Revenue ($K)\", fontsize=12)\nax.set_title(\"Revenue grew 68% year-over-year\", fontsize=16, fontweight=\"bold\")\nax.legend(fontsize=12)\nax.spines[\"top\"].set_visible(False)\nax.spines[\"right\"].set_visible(False)\nax.grid(axis=\"y\", alpha=0.3)\nplt.tight_layout()\nplt.savefig(\"line-chart.png\", dpi=150)\nprint(\"Saved\")"
}'
Horizontales Balkendiagramm (Vergleich)
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\nfig, ax = plt.subplots(figsize=(10, 6))\n\ncategories = [\"Email\", \"Social\", \"SEO\", \"Paid Ads\", \"Referral\", \"Direct\"]\nvalues = [12, 18, 35, 22, 8, 5]\ncolors = [\"#94a3b8\"] * len(values)\ncolors[2] = \"#3b82f6\" # Highlight the winner\n\n# Sort by value\nsorted_pairs = sorted(zip(values, categories, colors))\nvalues, categories, colors = zip(*sorted_pairs)\n\nax.barh(categories, values, color=colors, height=0.6)\nfor i, v in enumerate(values):\n ax.text(v + 0.5, i, f\"{v}%\", va=\"center\", fontsize=12, fontweight=\"bold\")\n\nax.set_xlabel(\"% of Total Traffic\", fontsize=12)\nax.set_title(\"SEO drives the most traffic\", fontsize=16, fontweight=\"bold\")\nax.spines[\"top\"].set_visible(False)\nax.spines[\"right\"].set_visible(False)\nplt.tight_layout()\nplt.savefig(\"bar-chart.png\", dpi=150)\nprint(\"Saved\")"
}'
KPI / Große Zahlenkarte
belt app run infsh/html-to-image --input '{
"html": "<div style=\"display:flex;gap:20px;padding:20px;background:white;font-family:system-ui\"><div style=\"background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:24px;width:200px;text-align:center\"><p style=\"color:#64748b;font-size:14px;margin:0\">Monthly Revenue</p><p style=\"font-size:48px;font-weight:900;margin:8px 0;color:#1e293b\">$89K</p><p style=\"color:#22c55e;font-size:14px;margin:0\">↑ 23% vs last month</p></div><div style=\"background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:24px;width:200px;text-align:center\"><p style=\"color:#64748b;font-size:14px;margin:0\">Active Users</p><p style=\"font-size:48px;font-weight:900;margin:8px 0;color:#1e293b\">12.4K</p><p style=\"color:#22c55e;font-size:14px;margin:0\">↑ 8% vs last month</p></div><div style=\"background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:24px;width:200px;text-align:center\"><p style=\"color:#64748b;font-size:14px;margin:0\">Churn Rate</p><p style=\"font-size:48px;font-weight:900;margin:8px 0;color:#1e293b\">2.1%</p><p style=\"color:#ef4444;font-size:14px;margin:0\">↑ 0.3% vs last month</p></div></div>"
}'
Heatmap
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport numpy as np\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\nfig, ax = plt.subplots(figsize=(10, 6))\n\ndays = [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"]\nhours = [\"9AM\", \"10AM\", \"11AM\", \"12PM\", \"1PM\", \"2PM\", \"3PM\", \"4PM\", \"5PM\"]\ndata = np.random.randint(10, 100, size=(len(hours), len(days)))\ndata[2][1] = 95 # Tuesday 11AM peak\ndata[2][3] = 88 # Thursday 11AM\n\nim = ax.imshow(data, cmap=\"Blues\", aspect=\"auto\")\nax.set_xticks(range(len(days)))\nax.set_yticks(range(len(hours)))\nax.set_xticklabels(days, fontsize=12)\nax.set_yticklabels(hours, fontsize=12)\n\nfor i in range(len(hours)):\n for j in range(len(days)):\n color = \"white\" if data[i][j] > 60 else \"black\"\n ax.text(j, i, data[i][j], ha=\"center\", va=\"center\", fontsize=10, color=color)\n\nax.set_title(\"Website Traffic by Day & Hour\", fontsize=16, fontweight=\"bold\")\nplt.colorbar(im, label=\"Visitors\")\nplt.tight_layout()\nplt.savefig(\"heatmap.png\", dpi=150)\nprint(\"Saved\")"
}'
Storytelling mit Daten
Der narrative Bogen
| Schritt | Was zu tun ist | Beispiel |
|---|
| 1. Kontext | Dem Leser das Nötige mitgeben | „Wir verfolgen die Kosten pro Kundenakquise monatlich“ |
| 2. Spannung | Das Problem oder die Veränderung zeigen | „CAC stieg im Q3 um 40 %“ |
| 3. Auflösung | Die Erkenntnis oder Lösung zeigen | „Aber der LTV stieg um 80 %, also haben sich die Unit Economics verbessert“ |
Titel als Erkenntnis
❌ Beschreibende Titel (was das Diagramm zeigt):
"Q3 Umsatz nach Produktlinie"
"Monatlich aktive Nutzer 2024"
"Kundenzufriedenheit Umfrageergebnisse"
✅ Erkenntnisreiche Titel (was das Diagramm bedeutet):
"Enterprise-Produkt treibt 70% des Umsatzwachstums"
"Nutzerwachstum beschleunigte sich nach dem Free-Tier-Launch"
"Support-Antwortzeit ist der #1 Zufriedenheitstreiber"
Annotationstechniken
| Technik | Wann verwenden |
|---|
| Hervorhebungsbeschriftung | Heben Sie einen bestimmten Datenpunkt hervor („Spitze: 320K“) |
| Referenzlinie | Ziel/Benchmark anzeigen („Ziel: 100K“) |
| Schattierte Region | Einen Zeitraum markieren („Produkteinführungsfenster“) |
| Pfeil + Text | Auf eine Trendänderung aufmerksam machen |
| Vorher/Nachher-Linie | Auswirkung eines Ereignisses zeigen |
Diagramme im Dark Mode
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\n# Dark theme\nplt.rcParams.update({\n \"figure.facecolor\": \"#0f172a\",\n \"axes.facecolor\": \"#0f172a\",\n \"axes.edgecolor\": \"#334155\",\n \"axes.labelcolor\": \"white\",\n \"text.color\": \"white\",\n \"xtick.color\": \"white\",\n \"ytick.color\": \"white\",\n \"grid.color\": \"#1e293b\"\n})\n\nfig, ax = plt.subplots(figsize=(12, 6))\nmonths = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\"]\nvalues = [45, 52, 58, 72, 85, 98]\n\nax.plot(months, values, color=\"#818cf8\", linewidth=3, marker=\"o\", markersize=8)\nax.fill_between(range(len(months)), values, alpha=0.15, color=\"#818cf8\")\nax.set_title(\"MRR Growth: On track for $100K\", fontsize=18, fontweight=\"bold\")\nax.set_ylabel(\"MRR ($K)\", fontsize=13)\nax.spines[\"top\"].set_visible(False)\nax.spines[\"right\"].set_visible(False)\nax.grid(axis=\"y\", alpha=0.2)\n\nfor i, v in enumerate(values):\n ax.annotate(f\"${v}K\", (i, v), textcoords=\"offset points\", xytext=(0, 12), ha=\"center\", fontsize=11, fontweight=\"bold\")\n\nplt.tight_layout()\nplt.savefig(\"dark-chart.png\", dpi=150, facecolor=\"#0f172a\")\nprint(\"Saved\")"
}'
Häufige Fehler
| Fehler | Problem | Behebung |
|---|
| Kreisdiagramme | Schwer zu vergleichen, immer irreführend | Balkendiagramme oder Treemaps verwenden |
| Y‑Achse beginnt nicht bei 0 (Balkendiagramme) | Überhöht Unterschiede | Bei Balken bei 0 beginnen, bei Linien ist Abschneiden okay |
| Zu viele Farben | Visuelles Rauschen, verwirrend | Maximal 5–7 Farben, nur hervorheben, was wichtig ist |
| Kein oder allgemeiner Titel | Der Leser kennt die Erkenntnis nicht | Titel = die Kernaussage, nicht der Datentyp |
| 3D‑Diagramme | Verzerrt Daten, wirkt unprofessionell | Immer 2D verwenden |
| Doppelte Y‑Achsen | Irreführend, schwer zu lesen | Zwei separate Diagramme verwenden |
| Alphabetische Sortierung in Balkendiagrammen | Verbirgt die Geschichte | Nach Wert sortieren (größte zuerst) |
| Keine Achsenbeschriftungen | Der Leser kann es nicht interpretieren | Immer mit Einheiten beschriften |
| Chartjunk (dekorative Elemente) | Lenkt von den Daten ab | Alles entfernen, was keine Informationen vermittelt |
| Nur Rot/Grün zur Farbcodierung | Farbenblinde Benutzer können es nicht lesen | Formen, Muster oder farbblindsichere Paletten verwenden |
Verwandte Fähigkeiten
npx skills add inference-sh/skills@pitch-deck-visuals
npx skills add inference-sh/skills@technical-blog-writing
npx skills add inference-sh/skills@competitor-teardown
Alle Apps durchsuchen: belt app list