Blog-Chart

Blog-Chart – Integrierte SVG-Datenvisualisierung

Erzeugt dunkelmodus-kompatible Inline-SVG-Diagramme für Blogbeiträge. Wird intern von blog-write und blog-rewrite aufgerufen, wenn diagrammwürdige Daten identifiziert werden. Kein eigenständiger, benutzergesteuerter Befehl.

Styling-Quelle der Wahrheit: references/visual-media.md

Eingabeformat

Der Writer oder Researcher übergibt eine Diagrammanfrage:

Diagrammanfrage:
- Typ: horizontaler Balken
- Titel: „KI-Zitierquellen nach Plattform“
- Daten: ChatGPT 43,8 %, Perplexity 6,6 %, Google AI Overviews 2,2 %, Reddit 7,15 %
- Quelle: Ahrefs, Dezember 2025
- Plattform: mdx (oder html)

Diagrammtyp-Auswahl

Wähle basierend auf dem Datenmuster. Vielfalt ist Pflicht – wiederhole niemals einen Typ innerhalb eines Beitrags.

Datenmuster	Bester Diagrammtyp
Vorher/Nachher-Vergleich	Gruppiertes Balkendiagramm
Rangfolge Faktoren / Korrelationen	Lollipop-Diagramm
Anteile am Ganzen / Marktanteile	Donut-Diagramm
Trend über Zeit	Liniendiagramm
Prozentuale Verbesserung	Horizontales Balkendiagramm
Verteilung / Bereich	Flächendiagramm
Mehrdimensionale Bewertung	Radardiagramm

Styling-Regeln (Nicht verhandelbar)

Alle Diagramme müssen sowohl auf dunklem als auch auf hellem Hintergrund funktionieren:

Textelemente:    fill="currentColor"
Gitterlinien:    stroke="currentColor" opacity="0.08"
Achsenlinien:    stroke="currentColor" opacity="0.3"
Hintergrund:     transparent (kein fill auf dem root-SVG)
Untertiteltext:  fill="currentColor" opacity="0.45"
Quellentext:     fill="currentColor" opacity="0.35"
Labeltext:       fill="currentColor" opacity="0.8"

Farbpalette

Farbe	Hex	Verwendungszweck
Orange	#f97316	Primär / höchster Wert
Himmelblau	#38bdf8	Sekundär / Vergleich
Lila	#a78bfa	Tertiär / spezielle Kategorie
Grün	#22c55e	Quartär / positiver Indikator

Für Text in farbigen Elementen: fill="white" mit fontWeight="800".

Standard SVG-Shell (HTML)

<svg
  viewBox="0 0 560 380"
  style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif"
  role="img"
  aria-label="Diagrammbeschreibung mit wichtigem Datenpunkt"
>
  <title>Diagrammtitel</title>
  <desc>Beschreibung für Screenreader mit allen wichtigen Datenpunkten und Quelle</desc>

  <!-- Diagramm-Inhalt -->

  <text x="280" y="372" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.35">
    Quelle: Quellenname (Jahr)
  </text>
</svg>

JSX/MDX-Shell (camelCase-Attribute)

<svg
  viewBox="0 0 560 380"
  style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}}
  role="img"
  aria-label="Diagrammbeschreibung"
>
  <title>Diagrammtitel</title>
  <desc>Beschreibung für Screenreader</desc>

  {/* Diagramm-Inhalt */}

  <text x="280" y="372" textAnchor="middle" fontSize="10" fill="currentColor" opacity="0.35">
    Quelle: Quellenname (Jahr)
  </text>
</svg>

JSX-Attributkonvertierung (Erforderlich für MDX)

HTML	JSX
stroke-width	strokeWidth
stroke-dasharray	strokeDasharray
stroke-linecap	strokeLinecap
text-anchor	textAnchor
font-size	fontSize
font-weight	fontWeight
font-family	fontFamily
class	className
style="..."	style={{...}}

Diagrammtyp-Konstruktion

Horizontales Balkendiagramm

Am besten geeignet für: Prozentuale Verbesserungen, Ein-Metrik-Vergleiche.

1. Diagrammbereich definieren: x=80, y=40, width=440, height=280
2. Balkenhöhe berechnen: chartHeight / dataCount - gap (gap=8)
3. Balkenbreite berechnen: (value / maxValue) * chartWidth
4. Balken positionieren: y = chartY + index * (barHeight + gap)
5. Label links (rechtsbündig bei x=75): Kategoriename
6. Wertelabel am Ende des Balkens: Prozent oder Zahl
7. Quellentext unten mittig

Gruppiertes Balkendiagramm

Am besten geeignet für: Vorher/Nachher, A vs. B Vergleiche.

1. Gruppen entlang der Y-Achse definieren, Balken innerhalb jeder Gruppe
2. 2 Farben (primär + sekundär) für die beiden Serien verwenden
3. Legende oben: farbiges Quadrat + Label für jede Serie
4. Abstand zwischen Gruppen > Abstand innerhalb von Gruppen

Donut-Diagramm

Am besten geeignet für: Anteile am Ganzen, Marktanteile.

1. Mittelpunkt: cx=280, cy=180, äußerer Radius=140, innerer Radius=80
2. Bogensegmente mit kumulativen Winkeln berechnen
3. Jedes Segment: <path d="M... A... L... A... Z" fill="color" />
4. Mitteltext: Summe oder Schlüssellabel
5. Legende unter dem Diagramm mit farbigen Quadraten + Labels + Werten

Liniendiagramm

Am besten geeignet für: Trends über Zeit.

1. X-Achse: Zeiträume, gleichmäßig verteilt
2. Y-Achse: Wertebereich mit 4–5 Gitterlinien
3. Gitterlinien zeichnen: stroke="currentColor" opacity="0.08"
4. Datenpunkte plotten: <circle cx=... cy=... r="4" fill="color" />
5. Verbinden mit: <polyline points="..." fill="none" stroke="color" strokeWidth="2" />
6. Optional: Flächenfüllung unter der Linie mit opacity="0.1"

Lollipop-Diagramm

Am besten geeignet für: Rangfolge Faktoren, Korrelationen.

1. Horizontale Ausrichtung (wie Balkendiagramm, aber mit Kreisen)
2. Dünne Linie von der Achse zum Datenpunkt: stroke="currentColor" opacity="0.15" strokeWidth="1"
3. Kreis am Datenpunkt: r="6" mit Füllfarbe
4. Wertelabel neben dem Kreis
5. Kategorien auf der Y-Achse (linksbündig)

Flächendiagramm

Am besten geeignet für: Verteilung, kumulative Daten.

1. Wie Liniendiagramm, aber mit gefüllter Fläche darunter
2. Flächenfüllung: <path d="M... L... L... Z" fill="color" opacity="0.15" />
3. Linie oben: stroke="color" strokeWidth="2" fill="none"
4. Gitterlinien hinter der Fläche

Radardiagramm

Am besten geeignet für: Mehrdimensionale Bewertung (5–7 Achsen).

1. Mittelpunkt: cx=280, cy=190
2. Konzentrische Polygone für das Gitter zeichnen (3–4 Ebenen)
3. Achsenendpunkte in gleichen Winkeln berechnen
4. Datenpunkte auf jeder Achse proportional zum Wert plotten
5. Datenpunkte mit gefülltem Polygon verbinden: fill="color" opacity="0.2" stroke="color"
6. Jede Achse am äußeren Rand beschriften

Ausgabeformat

Jedes Diagramm in ein <figure>-Element einbetten:

HTML:

<figure>
  <svg viewBox="0 0 560 380" style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif" role="img" aria-label="[Beschreibung]">
    <title>[Diagrammtitel]</title>
    <desc>[Vollständige Beschreibung mit Datenpunkten für Screenreader]</desc>
    <!-- Diagramm-Inhalt -->
    <text x="280" y="372" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.35">
      Quelle: [Quellenname] ([Jahr])
    </text>
  </svg>
</figure>

MDX:

<figure className="chart-container" style={{margin: '2.5rem 0', textAlign: 'center', padding: '1.5rem', borderRadius: '12px'}}>
  <svg viewBox="0 0 560 380" style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}} role="img" aria-label="[Beschreibung]">
    <title>[Diagrammtitel]</title>
    <desc>[Vollständige Beschreibung]</desc>
    {/* Diagramm-Inhalt mit camelCase-Attributen */}
    <text x="280" y="372" textAnchor="middle" fontSize="10" fill="currentColor" opacity="0.35">
      Quelle: [Quellenname] ([Jahr])
    </text>
  </svg>
</figure>

Qualitätscheckliste (Vor Rückgabe überprüfen)

• Keine hartcodierten Textfarben (alle verwenden currentColor)
• Keine weißen/hellen Hintergründe (transparent oder keine)
• Quellenangabe am unteren Rand vorhanden
• role="img" und aria-label auf <svg> vorhanden
• <title> und <desc> innerhalb von <svg> vorhanden
• Diagrammtyp wurde in diesem Beitrag noch nicht verwendet
• Bei MDX: alle Attribute in camelCase (keine Bindestriche in Attributnamen)
• Datenwerte stimmen exakt mit den Quelldaten überein
• Farbpalette verwendet nur genehmigte Farben
• ViewBox ist 0 0 560 380 (Standard) oder begründete Alternative