LawrenceHua/data-illustration

Was macht data-illustration?

Normale Diagrammbibliotheken (Balken, Linien, Radar) sind genau, aber vergesslich. Der gegenteilige Fehler – ein KI-generiertes „Datenvisualisierungs“-Bild – ist wunderschön, kann aber keine Zahl getreu codieren, also ist es Dekoration, die vorgibt, Daten zu sein. Dieses Skill macht beides ehrlich: Die Daten bestimmen die Geometrie eines generierten SVGs (der genaue, reproduzierbare Kern), und jegliches KI-generierte Bildmaterial wird nur als Atmosphäre eingefügt, niemals um einen Wert zu vermitteln.

Wann verwenden

• Jemand möchte Bewertungen/Metriken/Dimensionen visualisieren, aber ein einfaches Balken-/Linien-/Kreisdiagramm wäre langweilig oder wirkte nicht markenkonform.
• Anfragen wie „Mach diese Visualisierung wirklich gestaltet“, „etwas illustrativeres als ein Diagramm“ oder „Generiere eine echte Grafik für das Dashboard, kein Standard-Diagramm“.
• Ziehen Sie dies dem manuellen Codieren eines Einzeldiagramms vor, wenn die Ausgabe bewusst gestaltet und nicht wie eine Standardbibliothek aussehen soll.

Der Genauigkeitsvertrag (nicht verhandelbar)

1. Jede Menge in der Ausgabe wird aus den Eingabewerten berechnet, im Code. Formlänge, Radius, Beschriftungstext, die zentrale Ausgabenzahl – alles programmatisch abgeleitet, niemals geschätzt oder von einem Bildmodell gezeichnet.
2. KI-Bildgenerierung ist nur Dekoration. Wenn Sie eine generierte Hintergrundebene einfügen, beschränken Sie den Prompt auf abstrakte Textur – keine Texte, keine Zahlen, keine Figuren, keine Logos. Wenn Bildgenerierung nicht verfügbar ist, muss die Grafik auch ohne sie vollständig und korrekt sein.
3. Alles ist beschriftet. Jedes codierte Element erhält eine Beschriftung, die Überschriftzahl erhält eine zentrale Ausgabe, und eine einzeilige Legende gibt an, was die Form tatsächlich bedeutet. Eine schöne Grafik, die niemand entschlüsseln kann, ist ein Fehler, kein Erfolg.

Wenn Sie jemals versucht sind, ein Bildmodell „das Diagramm zeichnen“ zu lassen – hören Sie sofort auf. Das bricht den Vertrag und das Ergebnis wird subtil (oder schwerwiegend) falsch sein.

Die Standardform: ein organischer „Bloom“

N Dimensionen/Bewertungen → N Blütenblätter, die von einem Mittelpunkt ausstrahlen. Pro Blütenblatt:

• Länge codiert den Wert (länger = höher), gegen schwache ganzzahlige Führungsringe, sodass es immer noch als Zahl lesbar ist, nicht nur als Stimmung.
• Fülle wird mit dem Wert leicht breiter – höhere Bewertungen wirken visuell „üppiger“.
• Farbe wird dem Wertebereich über eine semantische Rampe zugeordnet (z. B. Grün für hoch, Bernstein für mittel, warmes Rot/Terrakotta für niedrig).
• Eine Spitzenbeschriftung gibt den Dimensionsnamen und die genaue Zahl an.
• Eine zentrale Scheibe zeigt den Durchschnitt, farblich nach seinem eigenen Wert abgestuft, mit einer kurzen Bildunterschrift.
• Eine Legendenzeile gibt die Codierung in einfacher Sprache an („Blütenblattlänge = Bewertung von 5“).

Dies ergibt einen einzigartigen Organismus pro Datensatz – kein generisches Radardiagramm – während jeder Wert noch genau ablesbar ist.

Erstellung

1. Nehmen Sie die Eingabe als einfache {Dimension: Wert}-Karte plus einen Titel und einen Durchschnitt entgegen.
2. Schreiben Sie ein kleines Skript (jede Sprache mit SVG-Ausgabe ist in Ordnung), das die Geometrie jedes Blütenblatts direkt aus den Werten berechnet – Winkel = gleichmäßig verteilt nach Anzahl der Dimensionen, Radius = eine Funktion des Werts, Farbe = eine Nachschlagetabelle gegen Ihre Bereichsschwellen.
3. Rendern Sie Beschriftungen und die Legende als echte SVG-Text-Elemente, nicht in eine Bildebene eingebettet.
4. Optionale Atmosphärenschicht: Generieren Sie ein abstraktes, thematisch passendes Hintergrundbild über die Ihnen verfügbare Bildgenerierungs-API, setzen Sie es in niedriger Deckkraft unter die Illustration und hinter eine Vignette, sodass die Mitte lesbar bleibt. Zwischenspeichern Sie dies – generieren Sie es einmalig zur Build-/Autorzeit, niemals bei jedem Seiten-Rendering (es ist langsam und kostet Geld).
5. Machen Sie die Ausgabe in sich geschlossen (ein einzelnes .svg, mit einem eventuellen Hintergrund als Data-URI eingebettet), sodass kein separates Asset verwaltet werden muss.
6. Wenn die Formen interaktiv sein sollen (Mouseover/Klick, um die Definition, die genaue Bewertung und die Quelle jeder Dimension anzuzeigen), versehen Sie jedes Element mit Datenattributen (data-dimension, data-score, data-definition), die ein kleines Skript auslesen kann, um ein Seitenpanel zu steuern.

Erweiterung der Form

Der Bloom ist die Standardoption, nicht die einzige – wählen Sie die Form, die zur Datenstruktur passt, aber halten Sie den Genauigkeitsvertrag unabhängig von der gewählten Form ein:

• Ridgeline/Kontur für eine Verteilung oder einen über viele Elemente verfolgten Wert.
• Isotype (wiederholte Symbole, das letzte teilweise gefüllt), wenn das Zählen im Vordergrund steht und die Menge als buchstäbliche Quantität gelesen werden soll.
• Konstellation wenn Beziehungen zwischen Elementen wichtiger sind als ihre individuellen Größenordnungen.

Anti-Patterns

• Ein Bildmodell das Diagramm oder die Zahlen rendern zu lassen – die Werte werden falsch oder erfunden sein.
• Eine prächtige Grafik ohne Beschriftungen oder Legende – unentschlüsselbar ist nutzlos, egal wie schön sie aussieht.
• Ein generierter Hintergrund, der laut genug ist, um mit der Lesbarkeit der Datenebene zu konkurrieren – halten Sie ihn bei niedriger Deckkraft und hinter einer Vignette.
• Eine Bildgenerierungs-API bei jedem Seiten-Rendering aufzurufen, anstatt zwischenzuspeichern – langsam und unnötig teuer.

Verwendung

Installation: Kopieren Sie diesen Ordner für den persönlichen Gebrauch nach ~/.claude/skills/data-illustration/ oder innerhalb eines Projekt-Repositorys nach .claude/skills/data-illustration/.

Aufruf:

Verwandle diese 6 Bewertungen in einen data-illustration Bloom statt in ein langweiliges Balkendiagramm – betitle es mit „Q3 Retro“, gib ihm einen zentralen Durchschnitt und füge eine Legende hinzu.

Das Diagramm dieses Dashboards sieht generisch aus. Verwende data-illustration, um es in eine genaue, beschriftete Illustration zu verwandeln – keine KI-gezeichneten Zahlen, alles aus den echten Daten berechnet.