Ein JSON-Objekt hinein, ein Live-Diagramm heraus

Sankey-Flüsse

data.links enthält Quelle, Ziel und Wert. Knoten werden aus Verbindungen abgeleitet. Optional liefert data.nodes IDs, Beschriftungen und Eingabereihenfolge. Gewichte sind positiv oder null; doppelte Verbindungen werden summiert. Zyklen und Selbstverbindungen liefern Fehler mit Zeilenpfaden.

{
  "type": "sankey",
  "data": {
    "links": [
      {
        "source": "Income",
        "target": "Budget",
        "value": 120
      },
      {
        "source": "Budget",
        "target": "Spending",
        "value": 100
      }
    ]
  }
}

Die Knotenhöhe verwendet den größeren Wert aus Zu- und Abfluss. Der Tooltip nennt Unterschiede, ohne Verbindungen zu erfinden. Erlaubt sind bis zu 50 Knoten, 100 Verbindungen und acht Stufen. Fasse kleine Flüsse beim Erreichen der Grenze als „Sonstige“ zusammen.

options.flowColor: source (Standard) oder stage. options.flowOrder: minimize (Standard) oder input. options.showValues ist standardmäßig true. Namen bleiben bei verborgenen Werten sichtbar. Auf schmalen Bildschirmen scrollt das Diagramm innerhalb seines Rahmens; darunter steht eine eingeklappte Verbindungstabelle. Sankey-Maker öffnen.

Ridgeline: gruppierte Beobachtungen

Verwende data.groups mit id, label und observations pro Gruppe. Werte dürfen negativ sein; null bedeutet fehlend. Lokal sind bis zu 12 Gruppen und 2.000 Beobachtungen erlaubt. Gehostetes Rendering behält das bestehende Punktelimit des Tarifs.

{
  "type": "ridgeline",
  "data": {
    "groups": [
      {
        "id": "monday",
        "label": "Monday",
        "observations": [
          12,
          15,
          16,
          19,
          24
        ]
      }
    ]
  },
  "options": {
    "bandwidth": 2
  }
}

Die gaußsche Kerndichteschätzung verwendet standardmäßig eine gemeinsame Silverman-Bandbreite aus den Abweichungen innerhalb der Gruppen. Ein positives options.bandwidth überschreibt sie. Der gemeinsame X-Bereich umfasst Datenminimum und -maximum zuzüglich vier Bandbreiten je Seite. Weniger als fünf bekannte Beobachtungen oder konstante Werte werden als Punkte dargestellt. Leere Gruppen zeigen No data. null-Beobachtungen bleiben in der Tabelle und werden aus der Dichte ausgeschlossen.

Die Höhen verwenden dieselbe Dichteskala. options.ridgeScale: "own" skaliert jede Gruppe auf ihr eigenes Maximum; das Diagramm zeigt dazu einen Hinweis. options.sortByMedian: true sortiert nach Median, leere Gruppen zuletzt. Hover, Fixieren und Pfeiltasten zeigen n, Median und die mittleren 50 %. Ridgeline-Maker öffnen.

Boxplot: gruppierte Beobachtungen

Boxplot liest dieselben data.groups wie Ridgeline: id, label und observations pro Gruppe. Lokal sind bis zu 12 Gruppen und 2.000 Beobachtungen erlaubt. Gehostetes Rendering behält das bestehende Punktelimit des Tarifs. null bedeutet fehlend, niemals 0. Eine Gruppe ohne bekannte Werte bleibt sichtbar und zeigt No data.

{
  "type": "boxplot",
  "data": {
    "groups": [
      {
        "id": "p1",
        "label": "Period 1",
        "observations": [
          62,
          68,
          71,
          74,
          75
        ]
      }
    ]
  },
  "options": {
    "whiskers": "tukey"
  }
}

options.whiskers: tukey (Standard) reicht bis zu den äußersten Werten innerhalb des 1,5-Fachen des IQR unterhalb oder oberhalb der Box. Werte außerhalb erscheinen als Ausreißerringe. minmax reicht bis Minimum und Maximum, ohne Ausreißer. options.quartiles: linear (Standard, Excel QUARTILE.INC) oder halves (Median jeder Hälfte wie beim TI-84). Der Median ist bei beiden Verfahren gleich. options.showPoints: true zeigt jeden Wert, false verbirgt die Punkte. Ohne Angabe erscheinen Punkte, solange jede Gruppe höchstens 50 bekannte Werte hat. options.sortByMedian: true sortiert Gruppen nach Median, leere Gruppen zuletzt.

Hover, Fixieren und Pfeiltasten zeigen n, Median, die mittlere Hälfte, Whisker und Ausreißer. Die barrierefreie Tabelle enthält die Fünf-Punkte-Zusammenfassung jeder Gruppe. Boxplot-Maker öffnen.

X-Y-Streudiagramm: Punkte auf zwei Zahlenachsen

xy liest data.points: pro Zeile ein { "x", "y", "label"?, "group"? }, dazu optional die Achsentitel data.xTitle und data.yTitle mit 1–60 Zeichen. X und Y sind endliche Zahlen oder null. null bedeutet fehlend, niemals 0: Der Punkt wird nicht gezeichnet; die Quellenangabe nennt die Anzahl der Punkte ohne Daten. Beschriftungen und Gruppen haben 1–120 Zeichen. Weise entweder jedem Punkt eine Gruppe zu oder keinem. Lokal sind bis zu 2.000 Punkte und 12 Gruppen erlaubt. Gehostetes Rendering behält das bestehende Punktelimit des Tarifs.

{
  "type": "xy",
  "data": {
    "xTitle": "Hours studied",
    "yTitle": "Test score",
    "points": [
      {
        "x": 6.5,
        "y": 91,
        "label": "Maya"
      },
      {
        "x": 2,
        "y": 63,
        "label": "Jack"
      },
      {
        "x": 9,
        "y": 90,
        "label": "Olive"
      }
    ]
  },
  "options": {
    "bestFit": true
  }
}

options.bestFit: true zeichnet für jede Gruppe mit mindestens drei Punkten und zwei unterschiedlichen X-Werten eine Trendlinie nach der Methode der kleinsten Quadrate, mit Gleichung, r und R². Bei einer Gruppe stehen sie in einer Diagrammecke. Bei mehreren Gruppen steht r jeder Linie bei genügend Platz in der Legende und immer im Tooltip der Linie. options.fromZero: true schließt 0 auf beiden Achsen ein. options.format formatiert die Y-Achse und options.xFormat die X-Achse, mit derselben Syntax (percent, currency:XXX oder affix:["before","after"]).

Hover, Fixieren und Pfeiltasten zeigen jeden Punkt und die Vorhersage der Linie für ihn. Die Linie nennt n, ihre Gleichung, r und R². Die barrierefreie Tabelle enthält jeden Punkt und bei eingeschalteter Linie Steigung, Achsenabschnitt, r und R² jeder Gruppe. Streudiagramm-Maker öffnen.

Streamgraph: Schichten eines veränderlichen Flusses

Verwende normale Zeitbeschriftungen und Datenreihen wie bei Linien- oder gestapelten Säulendiagrammen. Streamgraph erlaubt 1–6 Schichten und 2–100 Zeitpunkte. Jeder Wert muss endlich und nicht negativ sein. null ist ein Fehler; verwende für Lücken ein Liniendiagramm.

Die Silhouetten-Basislinie ist die negative Hälfte der jeweiligen Gesamtsumme. Schichten werden in Eingabereihenfolge aufgebaut. Glatte Kurven interpolieren nicht negative Schichtdicken und gemeinsame Grenzen; Werte bleiben an jedem Zeitpunkt exakt. options.curve: "linear" setzt gerade Grenzen. Es gibt keine numerische Y-Achse. Hover und Pfeiltasten zeigen exakte Werte und Anteile pro Zeitpunkt. Schichtnamen erscheinen bei genügend Platz, andernfalls in der Legende.

Legendenschalter sind deaktiviert, da verborgene Schichten irreführende Lücken erzeugen würden. Wertänderungen animieren die Bänder; der Wechsel zu Linie oder gestapelten Säulen blendet über. Streamgraph-Maker öffnen.

Bump Chart: Rangplätze im Zeitverlauf

Verwende data.labels für Zeitpunkte und eine benannte Datenreihe pro Einheit. Setze options.rankMode ausdrücklich: values berechnet Wettbewerbsränge (1, 2, 2, 4); ranks übernimmt positive ganzzahlige Positionen. Der erste Platz steht oben. Eine null-Beobachtung unterbricht die Linie.

Im Wertemodus ordnet rankDirection: "descending" größere Werte zuerst ein (Standard); ascending kleinere zuerst. showRanks ist standardmäßig false; true zeigt Rangplätze an Punkten. Optional begrenzt topN (1–12) die sichtbaren Positionen, ohne beim Verlassen oder Zurückkehren einer Einheit Ränge zu erfinden. Werte müssen endlich und nicht negativ sein. Verwende 1–12 eindeutig benannte Einheiten und 3–24 eindeutig benannte Zeitpunkte mit Namen bis 120 Zeichen. Fehler nennen das Feld und die Korrektur.

{
  "type": "bump",
  "data": {
    "labels": [
      "Jan",
      "Feb",
      "Mar"
    ],
    "series": [
      {
        "name": "Atlas",
        "values": [
          40,
          30,
          45
        ]
      },
      {
        "name": "Birch",
        "values": [
          35,
          42,
          45
        ]
      }
    ]
  },
  "options": {
    "rankMode": "values",
    "rankDirection": "descending"
  }
}

Hover hebt eine Einheit hervor. Links und rechts bewegen sich durch Zeitpunkte, oben und unten durch Rangplätze eines Zeitpunkts. Klicken oder Enter fixiert einen Punkt; Shift ergänzt einen Vergleich. Die barrierefreie Tabelle behält jeden Zeitpunkt, Rang und Ausgangswert. PNG, SVG, Render-API und Live-Einbettungen verwenden dieselbe Szene. Bearbeite Daten im Bump-Chart-Maker. Linien zeigen Wertlücken, ein Steigungsdiagramm eignet sich für zwei Zeitpunkte.

Treemap und Sunburst: Gruppen und Elemente

Treemap und Sunburst lesen data.nodes. Gruppen haben ID und Beschriftung. Elemente nennen ihre Gruppe mit parentId und liefern einen positiven endlichen Wert oder null für fehlende Daten. Gruppensummen werden aus den Elementen berechnet. Erlaubt sind bis zu 6 Gruppen und 36 Elemente auf zwei Ebenen. IDs müssen eindeutig sein. Fehlende Eltern, Zyklen, tiefere Verschachtelung, leere Gruppen sowie Werte von 0 und negative Werte liefern einen Fehler mit Knotenpfad und Korrektur.

{
  "type": "treemap",
  "title": "City budget",
  "data": {
    "nodes": [
      {
        "id": "spaces",
        "label": "Public spaces"
      },
      {
        "id": "parks",
        "parentId": "spaces",
        "label": "Parks",
        "value": 32
      },
      {
        "id": "libraries",
        "parentId": "spaces",
        "label": "Libraries",
        "value": 18
      }
    ]
  },
  "options": {
    "showValues": true,
    "precision": 0,
    "variant": "auto"
  }
}

Öffne eine Gruppe durch Klicken, Tippen oder Enter. All, Escape oder Backspace kehrt zur Gesamtansicht zurück. Dieser Ansichtszustand wird nicht in der Spezifikation gespeichert. Fehlende und unter einem Pixel große Elemente bleiben in Datentabelle und Tastatur-Tooltips erhalten. options.showValues: false verbirgt Kachelwerte; Namen bleiben bei genügend Platz sichtbar. Format, Präzision, Theme und Variante folgen denselben Regeln wie andere Diagramme. Sunburst verwendet dieselben Knoten: Ändere type auf sunburst. Der innere Ring zeigt Gruppen, der äußere Elemente, die Mitte deren Summe. Beschriftungen erscheinen nur bei genügend Platz. Treemap bearbeiten oder Sunburst erstellen.