Jedes Diagramm. Jede Variante. Live.

Eine Reihe monatlicher Anmeldungen auf einer Kategorienachse.

Zwei Temperaturkurven mit Wertbeschriftungen und Markierungen.

Zwei Jahre täglicher Verkehrsdaten mit x-Zoom, Werkzeugleiste und einer Verlaufsfläche unter der Linie.

Aktienkurs mit Ziellinie, hervorgehobenem Bereich und Hinweisen an Datenpunkten.

Drei gestapelte Diagramme in einer Gruppe teilen Fadenkreuz und Tooltip.

Ein Detaildiagramm wird durch die Auswahl mit dem Brush im Übersichtsdiagramm gesteuert.

Preisstufen, die sich sprunghaft ändern.

Eine Linie, deren Strichfarbe einem Farbverlauf folgt.

Sensormessungen mit Lücken (null), an denen die Linie unterbrochen wird.

Ist-, Plan- und Prognoselinien mit unterschiedlichen Strichmustern.

Eine Linie ergänzt jede Sekunde einen Punkt und verschiebt sich laufend.

50 000 Punkte, gezeichnet mit spitzenerhaltender Dezimierung.

Veröffentlichungsmarkierungen auf einer Linie; beim Überfahren oder Fokussieren einer Markierung wird angezeigt, was ausgeliefert wurde (annotation wcc.tooltip).

Klicken Sie auf ein Jahr, um dessen Monate aufzurufen; über den Breadcrumb oder Backspace geht es zurück.

Wöchentliche Downloads als glatt gefüllte Fläche.

Zwei überlappende, geglättete Flächen.

Ein Flächendiagramm mit datetime-Achse und Bereichsschaltflächen (1M / 6M / 1Y / All).

Der Nettogeldfluss überquert null; die Fläche wird bis zur Nulllinie gefüllt.

Ein kompaktes Aktivitäts-Flächendiagramm mit Übersichtsauswahl, im Stil eines Beitragsrasters für Code-Hosting.

Drei gestapelte Kanäle im Zeitverlauf.

Flächen mit null-Lücken.

Drei Reihen mit Messungen zu unterschiedlichen, unregelmäßigen Zeitpunkten.

Drei Produkte je Quartal als gruppierte Säulen.

Monatliche Konversionsrate mit Beschriftungen über jeder Säule.

Support-Tickets nach Schweregrad, gestapelt mit Gesamtsummen.

Geräteanteile je Monat, auf 100 % normiert.

Lange Kategorienamen werden gedreht, damit sie hineinpassen.

Monatlicher Gewinn und Verlust, nach Vorzeichen eingefärbt.

Klicken Sie auf eine Jahressäule, um die zugehörigen Quartale in ein zweites Diagramm zu laden.

Jede Säule erhält eine eigene Farbe; die Legende ist ausgeblendet.

Schwebende Minimum-Maximum-Säulen der Tagestemperaturen.

Budget- und Ist-Stapel je Quartal nebeneinander.

Ist-Säulen mit einer Zielmarkierung auf jeder Säule.

Monate auf der x-Achse unter Jahresbeschriftungen gruppiert.

Klicken Sie auf eine Region, um ihre Länder zu sehen, und dann auf ein Land, um dessen Städte aufzurufen.

Wochen führen zu Stunden; die Stundenebene ist eine zoombare Zeitreihe.

Beim Drilldown wird die nächste Ebene asynchron geladen; währenddessen zeigt ein Ladebalken den Fortschritt.

Sortierte horizontale Balken.

Zwei Jahre je Team im direkten Vergleich.

Aufgewendete Zeit je Aktivität, nach Person gestapelt.

Umfrageantworten je Frage als Anteile.

Zweiseitige Balken um null mit absoluten Beschriftungen.

Balken wachsen von rechts, die Achse ist umgekehrt.

Kategorienamen stehen innerhalb der Balken, Achsenbeschriftungen sind ausgeblendet.

Gestapelte Balken mit Linien- und Punktmustern gefüllt (druckfreundlich).

Balken mit generierten Texturbildern gefüllt (unsere eigenen SVG-Kacheln).

Horizontale Balken mit Markierungen für Zielwerte.

Je Kategorie zwei gestapelte Gruppen, horizontal angeordnet.

Städte wechseln Monat für Monat ihre Rangfolge, mit Ticker.

Studios ohne Wert für einen Monat scheiden aus dem Rennen aus (nulls 'hide'), statt mit einem Gedankenstrich angezeigt zu werden.

Umsatzsäulen mit einer Margenlinie auf einer zweiten Achse.

Drei Messgrößen mit jeweils farbiger y-Achse.

Zwei Achsen mit unterschiedlichen Skalen, deren Nulllinien zusammenfallen (yaxis wcc.alignZero).

Euro- und US-Dollar-Achsen mit kompakten Währungsbeschriftungen.

Eine Fläche zeigt die Kapazität, eine Linie den Bedarf.

Drei verschiedene Reihenarten in einem Diagramm.

Tägliches Temperaturband vom Tiefst- bis zum Höchstwert.

Konfidenzband mit Medianlinie und gestrichelter Prognose.

Hörstunden nach Genre über zwei Jahre.

Anteil an der Gesamtsumme (0–100 %) statt absoluter Werte.

Zwölf Produktlinien in einem Stream.

Symmetrischer Stream (Silhouette) zu Themen in einem Community-Thread, mit beschrifteten Bändern und einer erläuternden Notiz.

Derselbe Strom mit der Reihenfolge 'inside-out' (Standard), 'inverse' und 'none' (Datenreihenfolge).

Kassenbestand zu Beginn und am Ende mit Zwischensummen.

Eine horizontale Überleitung mit langen Schrittbezeichnungen.

Zwölf monatliche Schritte in Euro sowie eine Gesamtsumme.

Engagementwert je Abteilung für 2024 und 2026.

Ausgangs- und aktuelles Gehalt je Ebene, vertikal angeordnet.

Minimum, Ziel und Istwert je Region.

Projektphasen auf einer Datumsachse.

Mehrere Personen je Zeile, nach Rolle eingefärbt (rangeBarGroupRows).

Geplante und tatsächliche Balken je Aufgabe.

Überlappende Balken mit Beschriftungen der Dauer.

Jeder Balken erhält seine eigene Farbe (fillColor).

Verkaufstrichter vom Besuch bis zum Kauf.

Stufenpyramide mit proportional zu den Werten bemessenen Höhen.

Sanft geformte Trichterstufen mit Konversionsraten.

60 Handelstage einer fiktiven Aktie.

Kerzen oben, Volumenbalken darunter dienen als Auswahlwerkzeug.

Wochenkerzen mit Wochenbeschriftung, ohne Zeitlücken.

Kerzen plus eine Linie für den gleitenden 10-Tage-Mittelwert.

Lieferzeit je Versanddienstleister.

Boxen und Ausreißer, dargestellt als Streudiagrammreihe.

Ladezeit je Seitentyp, horizontal dargestellt.

Boxen mit allen darüber dargestellten Beobachtungen, verteilt durch deterministischen Jitter (boxPlot wcc.jitter).

Horizontale Boxen mit jitternden Beobachtungen (Raincloud-Form).

Quartile werden aus Rohstichproben berechnet; durch erneutes Ziehen einer Stichprobe werden sie aktualisiert.

Zwei Stichproben mit identischer Boxplot-Zusammenfassung, aber unterschiedlicher Verteilung, dargestellt als Boxen und als Einzeldatenpunkte.

Boxen aus Rohbeobachtungen berechnet (data[].points), mit Whiskern 'minmax', 'tukey' (1.5×IQR) und 'percentile' (5–95 %); Ausreißerpunkte zeigen Werte außerhalb des Bereichs.

points.show 'all' zeigt auf horizontalen Boxplots alle Beobachtungen: Kreise im dunkleren Farbton der Datenreihe, Quadrate in einer benutzerdefinierten Farbe und Punkte, deren Farbe den jeweiligen Wert codiert.

Antwortzeit je Dienst mit inneren Boxplots.

Dichteverteilungen mit jeder einzelnen Beobachtung als leicht versetztem Punkt darüber.

Bestellwert je Region, horizontal angeordnet.

Zwei Spitzen bei den Pendelzeiten zeigen sich als zwei Ausbuchtungen.

Punkte werden nach ihrem Wert auf einer Rot–Gelb–Grün-Skala eingefärbt.

Wechseln Sie zwischen Dichteformen und einzelnen Datenpunkten.

Boxplot-Antennen bei 1,5 × IQR, eine Dichteskala für alle Gruppen (normalize 'group'), Punkte in der Reihenfarbe.

Zeit bis zum ersten Ergebnis je Onboarding-Ablauf.

Dichte Stichprobe mit kleinen quadratischen Tropfen.

Verteilung oben, Einzelwerte unten, eine Farbe je Gruppe.

Wechseln Sie zwischen vier Layouts derselben Daten.

1 000 Anfragelatenzen, automatisch in Bins gruppiert.

Zwei überlagerte, normalisierte Histogramme.

Balken zerfallen in einzelne Beobachtungen.

Eine schiefe Stichprobe wird nach jeder Regel in Bins eingeteilt: auto, Freedman–Diaconis, Sturges, Scott, Rice und Quadratwurzel.

normalize 'density': Gruppen unterschiedlicher Größe werden als vergleichbare Flächen dargestellt.

Drei Produktgruppen nach Preis, Bewertung und Absatz.

Blasen mit radialem Farbverlauf für eine kugelartige Wirkung.

Größe im Verhältnis zum Gewicht für drei Gruppen.

Vorfälle im Zeitverlauf nach Schweregrad.

Streupunkte werden mit eigens generierten Symbolbildern dargestellt.

Diskrete Bewertungen werden leicht versetzt, damit sich überlappende Punkte erkennen lassen.

60 000 Punkte auf Canvas mit xy-Zoom.

Bestellungen nach Wochentag und Stunde.

Jede Kennzahlenzeile erhält ihren eigenen Farbverlauf.

Benannte Wertebereiche mit jeweils eigener Farbe, einschließlich negativer Werte.

Eine kontinuierliche Farbskala mit einer Verlaufsleiste in der Legende.

Kreisförmige Zellen mit Wertbeschriftungen.

Sechseckige Zellen in versetzten Reihen.

Klicken Sie auf eine Wochen- oder Tageszelle, um deren Stunden zu sehen.

Auslastung je 15-Minuten-Intervall über einen Tag für mehrere Server, auf einer datetime-x-Achse mit zentrierten Beschriftungen (heatmap wcc.centerTimeLabels).

Ein Jahr täglicher Commits als Beitragskalender.

Eine 60 × 100-Matrix.

Mehrere Bereitschaftsalarme pro Tag zu einer Zelle zusammengefasst: Summe, Maximum, Minimum, Mittelwert und letzter Wert nebeneinander.

Cloud-Ausgaben nach Service.

Zwei Datenreihen als Gruppen angeordnet.

Kacheln nach Veränderung eingefärbt, von Rot bis Grün.

Jede Kachel erhält eine eigene Farbe.

Klicken Sie auf eine Gruppe, um hineinzuzoomen; der Breadcrumb führt zurück.

Sektoren und Unternehmen werden nach Marktkapitalisierung bemessen und entsprechend der Tagesveränderung eingefärbt; geeignet für dunkle Darstellung.

Dieselbe Hierarchie wechselt animiert zwischen Treemap und Sunburst.

Gruppenkopfzeilen zentriert, rechtsbündig oder je Ebene festgelegt; der Zoom-Breadcrumb steht oben rechts.

Ein Forschungsbudget mit drei Ebenen: Gruppenüberschriften beginnen links wie in einer Dokumentgliederung (übergeordnete Elemente und je Ebene); der Zoom-Breadcrumb sitzt oben links, wo der Blick zuerst hinfällt. Klicken Sie auf ein Programm, um hineinzuzoomen.

Die Farbskala steht am Anfang, in der Mitte oder am Ende des Plots.

Budget nach Geschäftsbereich, Team und Einzelposten.

Ringe, die aus Drilldown-Referenzen statt aus verschachtelten Daten aufgebaut sind.

Halbkreisringe für ein kompaktes Diagramm in der Kopfzeile.

Personalbestand nach Organisationsebene; Klicken vergrößert den Ausschnitt.

CPU-Stichproben als nach oben verlaufendes Flammendiagramm.

Schmale Kacheln mit gedrehten Beschriftungen.

Eine aus Drilldown-Referenzen aufgebaute Partition, von links nach rechts angeordnet.

Wurzel links (direction 'left'), Geschwister nach Wert sortiert, Beschriftungen mit rechtsbündigen Werten.

Elternknoten enthalten eigene Summen ('strict' lässt den nicht erklärten Rest leer); kurze Zweige reichen bis zum Rand, Beschriftungen werden nie gedreht.

Personen-Piktogramme, eine Figur = 1 Million Einwohner.

Ein Halbkreis mit 300 Sitzen; die Parteien belegen jeweils zusammenhängende Segmente.

Ein Sonnenblumen-Cluster je Abteilung mit externen Beschriftungen.

Wechseln Sie die Gruppierung; dieselben Markierungen bewegen sich in ihre neuen Cluster.

Jede Stadt ist eine nach Einwohnerzahl skalierte Markierung, angeordnet nach Region.

Spender füllen die Kontur eines Herzens von unten nach oben.

Einheiten sind in der Form eines Globus angeordnet.

Eine dicht angeordnete Menge aus 500 Figuren, die Minderheit in der Mitte.

Kundengruppen ordnen sich aus Clustern neu zu einem Markenbild (unser eigenes Wellenlogo).

Wählen Sie einen Umriss; dieselben Markierungen ordnen sich neu zu dieser Form.

Deals je Stufe als gestapelte Säulen.

Sternsymbole je Bewertungsstufe; ein Stern steht für 10 Bewertungen.

Jedes Ticket ist ein Punkt auf einer echten Zeitachse, je Kanal als Schwarm angeordnet.

Die Speicherkapazität füllt den Umriss einer Batterie.

Ein Bergumriss, gezeichnet aus einfachen Koordinaten mit shapeFrom().

Jeder Umriss aus dem WCC-Formenset, gefüllt mit 120 Markierungen.

Haushalte innerhalb eines Hausumrisses.

Beschäftigte füllen die Silhouette einer Person.

Straßenbäume nach Art füllen die Kontur eines Baums.

Monatliche Produktion als blitzförmiges Einheitsdiagramm.

Wasserverbrauch füllt einen Tropfen.

Sitze nach Kabinenklasse, von der Nase bis zum Heck innerhalb des Flugzeugumrisses.

Nutzlastmasse nach Kunde innerhalb einer Rakete.

Abgewehrte Bedrohungen füllen einen Schild.

Tickets wechseln mit der Einführung der Automatisierung zwischen menschlicher und botgestützter Bearbeitung.

Geschäfte als Haussymbole auf echten x/y-Koordinaten, nach Format eingefärbt.

Besucher füllen ein Ziel von der Mitte nach außen; Konvertierungen stehen im Bullseye.

Mitarbeitende nach Ebene innerhalb einer Pyramidenkontur, Nachwuchskräfte an der Basis.

Ein Waffeldiagramm aus 100 Prüfungen mit Tick-Piktogrammen nur aus Konturlinien (pictogram outline).

Ein kleines Waffeldiagramm je Verbindungstyp (von 100 Haushalten).

Jedes Start-up ist eine nach Finanzierungsvolumen skalierte Blase, gruppiert und nach Phase eingefärbt.

Eine benannte Markierung je Person; beim Überfahren wird angezeigt, um wen es sich handelt.

Spielen Sie die Geschichte eines Rennens ab (Start, Halbzeit, Ziel); die Markierungen ordnen sich je Einzelbild neu, mit Wiedergabesteuerung, Scrubber und Untertiteln.

Dieselbe Gruppe ordnet sich alle paar Sekunden neu: mit schnellen und präzisen Federbewegungen, einer Tween-Animation mit Einblenden sowie Übergängen mit erhaltener Identität.

Ein breites Bus-Symbol wird mit 'contain', 'width' und 'height' eingepasst; ein unbekanntes Symbol wird durch Quadrate ersetzt.

Säulenlayout mit columns.size 'auto': Der höchste Stapel füllt die Höhe aus.

Punktwolken-Spuren werden durch deterministischen Jitter statt als Schwarm auseinandergezogen; Markierungen sind nach Wert mit einer 'area'- oder 'linear'-Skala dimensioniert.

scatter.orientation 'vertical': Jede Spur wird zu einer Säule, die Wertachse verläuft nach oben; Beeswarm und Jitter verteilen die Punkte nebeneinander.

Ein Punkt je Land, nach Kontinent als horizontaler Schwarm angeordnet.

Vertikale Beeswarms je Art mit einer Markierung des Medians.

Punkte werden anhand ihres Werts auf einer kontinuierlichen Skala eingefärbt.

Spiele je Modus, x = Punktzahl, Blasengröße = Spielerzahl.

Die Punkte verteilen sich nur zu einer Seite: side 'left' und 'right' bei Säulen, 'top' und 'bottom' bei Zeilen.

100 Zellen, je eine für ein Prozent der Erzeugung.

Ein kleines Waffeldiagramm je Kennzahl, mit 100 Einwohnern als Grundlage.

Zufriedenheit je Produktbereich, 2025 im Vergleich zu 2026.

Drei Zeiträume mit zwei hervorgehobenen Bereichen.

Anteil des Datenverkehrs nach Kanal.

Donut mit Gesamtsumme im Innenraum.

Abgerundete Enden der Donutsegmente.

Segmente mit parallelen Lücken und abgerundeten Ecken (pie wcc.segmentGap / segmentRadius).

Abstufungen einer Farbe.

Segmente mit Farbverlauf gefüllt.

Musterfüllungen, auch ohne Farbe gut unterscheidbar.

Schaltflächen fügen Segmente hinzu, entfernen sie oder verteilen sie neu.

Jedes Segment ist mit einer unserer kleinen SVG-Musterkacheln gefüllt.

Klicken Sie auf ein Segment, um seine Aufschlüsselung zu sehen; über die Breadcrumb-Navigation geht es zurück.

Ein Ring mit dem Wert im Zentrum.

Vier Ringe mit einer Gesamtsumme.

Ein Schwenkbereich von 270°; die Legende beginnt neben dem Ring.

Farbverlauf entlang des Rings.

Ein gestricheltes Messgerät über 270°.

Halber Ring.

Unser eigenes Symbol in der Mitte des Rings.

Bogenförmiges Messgerät mit Wertebereich von 0 bis 100.

Schwellenwertbänder mit Zwischenräumen.

Benutzerdefinierter Wertebereich mit formatierter Beschriftung in der Mitte.

Haupt- und Nebenstriche mit Beschriftungen.

Zeiger mit farbigen Bändern als Skala.

Der Zeiger folgt einem Live-Wert, ohne bei Aktualisierungen über das Ziel hinauszuschießen.

Halbkreisförmiges Zifferblatt mit Wertebereich unter null.

Zeigermessgeräte mit abgerundeten oder eckigen Bandenden; Haupt- und Nebenstriche liegen innerhalb des Bogens.

Ein Profil über sechs Kompetenzen.

Drei Automodelle im Vergleich.

Abwechselnde polygonale Hintergrundbänder.

Windhäufigkeit nach Richtung.

Abstufungen einer Farbe.

KPI-Kacheln mit Sparklines als Linie, Fläche oder Balken.

Im Zeitstrahl einen Datumsbereich aufziehen; Regions- und Produktdiagramme werden neu gefiltert. Ein Klick auf einen Balken filtert auch die übrigen Diagramme.

Klicken Sie auf eine Region, ein Produkt oder einen Kanal; die anderen Diagramme zeigen nur die passenden Datensätze. Umschalt-Klick fügt der Auswahl weitere hinzu.

Wählen Sie einen Vertriebskanal; alle drei Diagramme zeigen, welcher Anteil jeder Summe über diesen Kanal erzielt wurde, im Vergleich zur ausgeblendeten Gesamtheit.

Live-Datenströme werden jede Sekunde aktualisiert; die Messgeräte folgen.

KPIs, Umsatztrend, Kanalverteilung und Top-Produkte.

Besuche, Quellen, Geräte, Seiten und eine Zeile mit Sparklines.

Ein für den Dunkelmodus gestaltetes Betriebsdashboard.

Ist-Balken im Vergleich zu Zielmarken und qualitativen Wertebereichen.

Dünne Stiele mit runden Köpfen (bar wcc.mark: lollipop).

Stiele mit hohlen Ringen an der Spitze, hier horizontal (bar wcc.mark: ringStem).

Klicken Sie auf zwei Punkte, um die Veränderung zwischen ihnen zu messen.

Klicken Sie ins Diagramm, um Notizen anzupinnen; die letzte Notiz lässt sich entfernen.

Folgen Sie der Geschichte beim Scrollen: Das fixierte Diagramm zoomt und ergänzt pro Schritt Anmerkungen; Punkte dienen der Navigation.

Benannte Ansichten legen den Zoomausschnitt und ausgeblendete Reihen fest; die aktuelle Ansicht wird zu einem Freigabetoken, und ein Link mit diesem Token stellt sie wieder her.

Zoomen Sie, blenden Sie Datenreihen aus oder laden Sie neue Daten und gehen Sie anschließend über Werkzeugleiste, Schaltflächen oder Ctrl/Cmd+Z zurück.

Ein Flächendiagramm je Region auf gemeinsamer y-Skala, synchronisiertes Fadenkreuz, letzter Wert in jeder Kopfzeile.

Aufbereitete Zeilen (department, quarter, spend) werden zu je einem Spaltenpanel pro Abteilung.

Neun Ticker mit unabhängigen Skalen; ein panel()-Hook färbt jedes Feld je nach Veränderung grün oder rot.

Histogramme der Sitzungsdauer je Anmeldekohorte; das Plugin verwendet für jedes Panel dieselben Klassen.

Acht Messgeräte aus einer Definition, mit denselben Bereichen.

Laborwerte über 14 Tage; jedes Panel schattiert seinen eigenen Normalbereich mit gezielt zugeordneten Annotationen.

Klicken Sie auf eine Panel-Kopfzeile, um es zu vergrößern; Esc oder ein erneuter Klick auf die Kopfzeile stellt das Raster wieder her.

Sechs Sensoren mit jeweils eigener Einheit: unabhängige y-Skalen und Formatierungsfunktionen pro Feld.

Die drei Märkte mit dem stärksten und die drei mit dem schwächsten Wachstum, über eine explizite Panel-Reihenfolge.

Zu 100 % gestapelter Geräteanteil je Land, eine gemeinsame Legende für alle Panels.

Heatmaps für Wochentag × Stunde je Büro, mit einer gemeinsamen Farbskala.

Batteriestand je Gerät; panel() färbt ein Panel rot und markiert die Kopfzeile, wenn der Wert am Ende unter 70 % liegt.

Aufgabentypen (Feature, Bug, Chore, Research) je Team als Ringdiagramm-Kacheln mit derselben Farbreihenfolge.

Beim Überfahren einer Säule werden die übrigen abgedunkelt; ein Klick fixiert die Auswahl.

Beim Überfahren der Legende wird eine Ebene des Stapels hervorgehoben.

Überfahren Sie einen Legendeneintrag oder eine Linie; die übrigen treten in den Hintergrund.

Beim Überfahren der Legende wird eine Fläche hervorgehoben.

Jede Stufe zeigt, welcher Anteil der Nutzenden dieser Stufe aus bezahlten Kampagnen stammt.

Überfahren oder klicken Sie ein Segment: Es tritt hervor, die übrigen werden abgedunkelt.

Jeder Ring zeigt den Anteil der Nachtschicht an der Anlagenkennzahl; mit den Schaltflächen wechseln Sie zwischen den Schichten.

Jede Kachel für einen Standort zeigt seinen Online-Anteil innerhalb der ausgeblendeten Gesamtheit; wechseln Sie die Kennzahl über die Schaltflächen.

Prognosepunkte sind gestrichelt und gegenüber Ist-Werten schattiert abgesetzt.

Überfahren Sie einen Balken, um ihn abzudunkeln; die übrigen bleiben unverändert.

Das Drilldown-Plugin für Balken-, Kreis-, Treemap- und Liniendiagramme.

Klicken Sie auf eine Region, um ihre Länder zu sehen, und dann auf ein Land, um dessen Städte aufzurufen.

Wochen führen zu Stunden; die Stundenebene ist eine zoombare Zeitreihe.

Beim Drilldown wird die nächste Ebene asynchron geladen; währenddessen zeigt ein Ladebalken den Fortschritt.

Klicken Sie auf ein Jahr, um dessen Monate aufzurufen; über den Breadcrumb oder Backspace geht es zurück.

Klicken Sie auf ein Segment, um seine Aufschlüsselung zu sehen; über die Breadcrumb-Navigation geht es zurück.

Klicken Sie auf eine Wochen- oder Tageszelle, um deren Stunden zu sehen.

Klicken Sie auf eine Gruppe, um hineinzuzoomen; der Breadcrumb führt zurück.

Ringe, die aus Drilldown-Referenzen statt aus verschachtelten Daten aufgebaut sind.

Eine aus Drilldown-Referenzen aufgebaute Partition, von links nach rechts angeordnet.

Das Link-Plugin: Die Auswahl in einem Diagramm filtert die übrigen.

Im Zeitstrahl einen Datumsbereich aufziehen; Regions- und Produktdiagramme werden neu gefiltert. Ein Klick auf einen Balken filtert auch die übrigen Diagramme.

Klicken Sie auf eine Region, ein Produkt oder einen Kanal; die anderen Diagramme zeigen nur die passenden Datensätze. Umschalt-Klick fügt der Auswahl weitere hinzu.

Drei gestapelte Diagramme in einer Gruppe teilen Fadenkreuz und Tooltip.

Ein Detaildiagramm wird durch die Auswahl mit dem Brush im Übersichtsdiagramm gesteuert.

Das Plugin für Hervorhebungsfilter auf allen unterstützten Diagrammtypen.

Wählen Sie einen Vertriebskanal; alle drei Diagramme zeigen, welcher Anteil jeder Summe über diesen Kanal erzielt wurde, im Vergleich zur ausgeblendeten Gesamtheit.

Beim Überfahren einer Säule werden die übrigen abgedunkelt; ein Klick fixiert die Auswahl.

Beim Überfahren der Legende wird eine Ebene des Stapels hervorgehoben.

Überfahren Sie einen Legendeneintrag oder eine Linie; die übrigen treten in den Hintergrund.

Beim Überfahren der Legende wird eine Fläche hervorgehoben.

Jede Stufe zeigt, welcher Anteil der Nutzenden dieser Stufe aus bezahlten Kampagnen stammt.

Überfahren oder klicken Sie ein Segment: Es tritt hervor, die übrigen werden abgedunkelt.

Jeder Ring zeigt den Anteil der Nachtschicht an der Anlagenkennzahl; mit den Schaltflächen wechseln Sie zwischen den Schichten.

Jede Kachel für einen Standort zeigt seinen Online-Anteil innerhalb der ausgeblendeten Gesamtheit; wechseln Sie die Kennzahl über die Schaltflächen.

Prognosepunkte sind gestrichelt und gegenüber Ist-Werten schattiert abgesetzt.

Überfahren Sie einen Balken, um ihn abzudunkeln; die übrigen bleiben unverändert.

Speichern Sie eine Ansicht, wechseln Sie zwischen Ansichten und teilen Sie eine als Link.

Benannte Ansichten legen den Zoomausschnitt und ausgeblendete Reihen fest; die aktuelle Ansicht wird zu einem Freigabetoken, und ein Link mit diesem Token stellt sie wieder her.

Werkzeugleiste zum Zurückspulen und aufgezeichnete Erzählbilder.

Zoomen Sie, blenden Sie Datenreihen aus oder laden Sie neue Daten und gehen Sie anschließend über Werkzeugleiste, Schaltflächen oder Ctrl/Cmd+Z zurück.

Scrollen Sie innerhalb der Karte: Jeder Textblock führt das Diagramm zu seiner Ansicht.

Folgen Sie der Geschichte beim Scrollen: Das fixierte Diagramm zoomt und ergänzt pro Schritt Anmerkungen; Punkte dienen der Navigation.

Zeitliche Einzelbilder mit Beschriftungen, Wiedergabe und Scrubber.

Spielen Sie die Geschichte eines Rennens ab (Start, Halbzeit, Ziel); die Markierungen ordnen sich je Einzelbild neu, mit Wiedergabesteuerung, Scrubber und Untertiteln.

Städte wechseln Monat für Monat ihre Rangfolge, mit Ticker.

Das Trellis-Plugin: by, Raster aus Zeilen × Spalten, gemeinsame Skalen, Hervorhebung.

Ein Flächendiagramm je Region auf gemeinsamer y-Skala, synchronisiertes Fadenkreuz, letzter Wert in jeder Kopfzeile.

Aufbereitete Zeilen (department, quarter, spend) werden zu je einem Spaltenpanel pro Abteilung.

Neun Ticker mit unabhängigen Skalen; ein panel()-Hook färbt jedes Feld je nach Veränderung grün oder rot.

Histogramme der Sitzungsdauer je Anmeldekohorte; das Plugin verwendet für jedes Panel dieselben Klassen.

Acht Messgeräte aus einer Definition, mit denselben Bereichen.

Laborwerte über 14 Tage; jedes Panel schattiert seinen eigenen Normalbereich mit gezielt zugeordneten Annotationen.

Klicken Sie auf eine Panel-Kopfzeile, um es zu vergrößern; Esc oder ein erneuter Klick auf die Kopfzeile stellt das Raster wieder her.

Sechs Sensoren mit jeweils eigener Einheit: unabhängige y-Skalen und Formatierungsfunktionen pro Feld.

Die drei Märkte mit dem stärksten und die drei mit dem schwächsten Wachstum, über eine explizite Panel-Reihenfolge.

Zu 100 % gestapelter Geräteanteil je Land, eine gemeinsame Legende für alle Panels.

Heatmaps für Wochentag × Stunde je Büro, mit einer gemeinsamen Farbskala.

Batteriestand je Gerät; panel() färbt ein Panel rot und markiert die Kopfzeile, wenn der Wert am Ende unter 70 % liegt.

Aufgabentypen (Feature, Bug, Chore, Research) je Team als Ringdiagramm-Kacheln mit derselben Farbreihenfolge.

SVG und Canvas im direkten Vergleich.

60 000 Punkte auf Canvas mit xy-Zoom.

Eine 60 × 100-Matrix.

Dasselbe Dashboard mit der ausgewählten Voreinstellung und dem gewählten Modus.

Alle Optionen dieses Typs nebeneinander.

Alle Optionen dieses Typs nebeneinander.

Alle Optionen dieses Typs nebeneinander.

Alle Optionen dieses Typs nebeneinander.

Alle Optionen dieses Typs nebeneinander.

Alle Optionen dieses Typs nebeneinander.

Alle Optionen dieses Typs nebeneinander.

Alle Optionen dieses Typs nebeneinander.

Alle Optionen dieses Typs nebeneinander.

Alle Optionen dieses Typs nebeneinander.

Alle Optionen dieses Typs nebeneinander.

Alle Optionen dieses Typs nebeneinander.

Alle Optionen dieses Typs nebeneinander.

Alle Optionen dieses Typs nebeneinander.

Alle Optionen dieses Typs nebeneinander.

Alle Optionen dieses Typs nebeneinander.

Alle Optionen dieses Typs nebeneinander.

Alle Optionen dieses Typs nebeneinander.

Alle Optionen dieses Typs nebeneinander.

Alle Optionen dieses Typs nebeneinander.

Fünf Spuren, eine Zeitachse: Anfragen je 10 Minuten, nach Fehlerrate eingefärbt, mit Deployments und Pipeline-Läufen; Kosten je Cluster; verbleibendes Fehlerbudget (Verfügbarkeit · p95-Latenz); p95-Latenz je Service; Traffic nach Region. Anklicken zum Crossfiltering, Esc hebt die Auswahl auf.

Dieselben Spuren mit einer beschrifteten Fokuslinse um den Vorfall auf eu-k8s-2 nach dem Checkout-Deployment v2.41. Jede Spur hebt ihren Wert zum Vorfall hervor; L oder die Linsenschaltfläche wechselt zu einer linearen Achse.

Anfragen, p95-Latenz und regionaler Datenverkehr mit ×6-Vergrößerung und jeweils 30 Minuten Kontext auf beiden Seiten.

Die Daten der Quint-Zeitleiste auf einem Ring (24-h-Uhr, UTC, 10-Minuten-Slots). Außen: Anfragen je 10 Minuten, Farbe = Fehlerrate, Randband = Vergleich mit einem typischen Tag, ◆ Deployments, ● Pipeline-Läufe, rotes ◆ für den Alarm um 18:40 Uhr. Innen, an den Slots ausgerichtet: Kosten je Cluster (€ / h; von außen nach innen eu-k8s-2, eu-k8s-1, us-k8s-1) und p95-Latenz (ms; Checkout, Payments, Search, ebenfalls von außen nach innen) als benannte Heatmap-Ringe, hellere Farbe = höherer Wert (logarithmische Farbskala, unter dem Ring erläutert; „All 6 rows“ zeigt alle Services und Cluster); danach das verbleibende Fehlerbudget je Service über 30 Tage (Legende in %, Ringbeschriftung: Verfügbarkeit · p95-Latenz) und der Traffic nach Region › Service (M Anfragen in 24 h). Der rote Sektor markiert den Vorfall von 18:40 bis 19:20 Uhr auf allen Ringen: Einen Slot darin mit dem Mauszeiger hervorheben oder fixieren, und Kosten für eu-k8s-2, Checkout-Latenz und EU-Traffic werden gemeinsam hervorgehoben.

Die Herzfrequenz erscheint als Säulen (Median je Stunde), SpO₂ als Schwellenbandzellen (Farbe und Muster), der Blutdruck als systolisch-diastolische Spanne sowie Atemfrequenz und Temperatur als Linien zum tatsächlichen Messzeitpunkt. Stunden ohne Messung sind schraffiert, niemals mit 0 belegt. Jetzt-Zeiger, Alarmfenster und Medikation stammen aus den Aufrufdaten. Die Demo-Schwellenwerte sind erfunden; es gibt keinen Score, und dies ist kein Medizinprodukt.

Ein Praxistag von 07:00–19:00 mit wenigen Messungen: Lücken bleiben sichtbar ("nicht gemessen"); der letzte Wert je Parameter wird samt seinem Alter unter dem Ring angezeigt.

Die Ebene "bands" ergänzt ein einfaches radialColumn um zwei Ringe mit Einheit und Aggregation je Zeitfenster (niedrigste SpO₂, höchste Atemfrequenz), dargestellt in Tooltip, Beschreibung und Tabelle.

api(chart).append(id, points) fügt Messwerte hinzu und zeichnet höchstens einmal pro Sekunde neu. Die Schaltfläche sendet erfundene Werte; ihre Bedeutung legt stets die aufrufende Software fest.

6 Räume (davon 2 mit Geräten), 3 Ärztinnen und Ärzte, 2 Assistenzkräfte, 66 Termine. Eine Route je Person (Farbe + Strichmuster), schraffierte Mittagspause und Schließzeit, aktuelle Zeit als Linie. Konflikte in der Kopfzeile: doppelte Buchung von Person oder Raum (Fehler), Wechselzeit unter 5 Min. und Termine außerhalb der Öffnungszeiten (Warnung). Ziehen oder Enter + Pfeiltasten schlagen Änderungen nur vor; die Daten bleiben unverändert.

Dasselbe Modell mit Spuren: "people" erzeugt eine Spur pro Person. Ein Termin mit zwei Beteiligten (Arzt und Assistenz) erscheint in beiden Spuren.

view: "board" (automatisch unter 560 px): Die Zeit verläuft von oben nach unten, je Raum gibt es eine Spalte.

304 Termine der Woche, Spalten = Tage × Räume; die Konflikte am Montag bleiben markiert.

schedule.flow.fromEvents(): Anmeldung, Wartezimmer, Labor, Untersuchung und Abschluss je pseudonymer Patienten-ID. Wartezeiten werden als Median / P90 zusammengefasst, niemals als Summe oder Mittelwert.

Dieselben Besuche als sankey: Die Breite entspricht der Patientenzahl; der Tooltip zeigt Dauer-Median und P90 je Übergang (sankeyPlugin aus flow.fromEvents()).

schedule.utilization() mit 30-Minuten-Intervallen: belegte / geöffnete Minuten. Geschlossene Intervalle (vor 07:30, Mittagspause 12:30–13:30) sind schraffiert und erhalten einen eigenen Legendeneintrag statt 0 % (plotOptions.heatmap.empty); teilweise geöffnete Intervalle zählen nur ihre geöffneten Minuten.

Tageswerte aus schedule.utilization() mit Tagesintervallen. Am Wochenende ist geschlossen: Die Tage sind schraffiert und haben einen eigenen Legendeneintrag; der Tooltip zeigt „geschlossen“.

Vier Ebenen, aufgeschlüsselt nach Dienst und Zeit. Außen: Anfragen je 10 Min. (Farbe = Fehlerrate, Randband = Vergleich mit einem typischen Tag, ◆ Deployments, ● Pipeline-Läufe). Danach Kosten je Cluster (beschriftet nach Clustertyp), verbleibendes Fehlerbudget je Dienst (Ringbeschriftung: Verfügbarkeit · p95-Latenz) und Traffic Region › Dienst im Kern. Klicken Sie auf einen Dienst, Cluster oder Zeitraum, um ihn anzupinnen; Esc hebt die Auswahl auf. Die Geschichte: ein EU-Spitzenwert um 18:40 auf eu-k8s-2, direkt nach Checkout v2.41.

Ein Ring, vier Ebenen: Bereich › Subsystem › 48 Komponenten › Anomalien, mit Abhängigkeitsbändern im Kern und den letzten sechs Stunden als Heatmap-Ring. Die Geschichte: Das Checkout-Deployment um 18:20 Uhr bringt EU-Gateways, Queues, Redis und Postgres in den roten Bereich; sichtbar wird auch das gefährdete Umsatzvolumen. Eine Ebene mit dem Mauszeiger hervorheben oder anklicken; die übrigen folgen.

Ein Statusraster für Service × Cluster (je Zelle der höchste Schweregrad, mit Symbolen auch ohne Farbe lesbar) ist per Crossfilter mit Diagrammen zu Schweregrad und Ursache sowie einem Ursache › Service › Auswirkung-Fluss verknüpft. Zelle, Schweregrad oder Ursache anklicken: alle übrigen Ansichten, der Fluss und die Zusammenfassung grenzen sich auf passende Signale ein. Esc oder ein Zusammenfassungs-Chip hebt die Auswahl auf.

Sechs Cluster als weiche Hüllen (Makro-Topologie), ihre Dienste als Knoten (Größe = Anfragen/s), Beziehungen als gewichtete Kanten und Anomalieknoten nach Schweregrad eingefärbt, mit S1/S2/S3-Badge in der Beschriftung. Die roten Kanten zeichnen den Ausbreitungspfad des Vorfalls in eu-west-2 nach. Wechseln Sie zur enthaltenen Makroansicht und klicken Sie auf einen Knoten, um Details zu sehen.

Im Zentrum steht eine Aufrufmatrix (Zeile ruft Spalte auf, req/s); darum herum das verbleibende Fehlerbudget je Service und außen die p95-Latenz je Service in 4-Stunden-Fenstern. Jede Ebene ist nach Service codiert. Beim Überfahren einer Zelle werden die beiden Services in jedem Ring sowie der Rückaufruf hervorgehoben; beim Überfahren einer Überschrift die ganze Zeile oder Spalte. Mit den Pfeiltasten bewegen Sie sich durch das Raster. Die Geschichte dahinter: Matching hat abends hohe Last und einen Großteil seines Budgets aufgebraucht.

Ein Statusraster mit zehn Services × sechs Prüfungen. Schweregrad wird durch Farbe und Muster codiert (vollflächig = ok, Punkte = Info, Schraffur = Warnung, Kreuzschraffur = kritisch) und ist dadurch auch ohne Farbunterscheidung lesbar. Darum herum stehen die zuständigen Teams, außen die Alarmminuten je Service über zwei Wochen. Einen Status in der Legende mit dem Mauszeiger hervorheben, um ihn zu finden; anklicken, um die zugehörigen Zellen auszublenden. Eine Prüfung hebt die Service-Tage hervor, an denen sie ausgelöst wurde (bei jedem Service die letzten vier Tage, an denen die Prüfung fehlschlägt).

Die Facettenanordnung setzt eine globale Steuerungsebene ins Zentrum, sechs Regionen bilden Facetten, Cluster und Services liegen auf den äußeren Schalen. Der gestrichelte Pfad zeigt, wie eine Cache-Eviction in Frankfurt bis zur Abrechnung in Virginia gelangte.

Acht Geschäftsbereiche, 640 Dienste: dicht gefüllte Gruppenstaffeln ordnen sich in Reihen, bereichsübergreifender Traffic wird je Bereichspaar zu einem Band gebündelt (Payments – Commerce trägt den größten Anteil), und zwei Ursache-Wirkungs-Ketten bleiben darüber gut lesbar. Überfahren Sie einen Knoten, um seinen Bereich und seine Pfade hervorzuheben.

Kraftgerichtetes Diagramm mit Clustern und gewichteten Kanten; beim Überfahren wird der Fokus hervorgehoben.

Die Quint-Uhr ist um 90° gedreht, sodass der Abend oben liegt: 18:00 Uhr auf 12 Uhr, der Start um 00:00 Uhr auf 3 Uhr (fette Beschriftung, gestrichelte Naht). Jeder Ring – Latenz, Kosten, Fehlerbudget, Traffic und der Vorfallsektor – dreht sich mit den Balken. Verwenden Sie die Schaltflächen oben rechts, [ und ] auf dem fokussierten Diagramm (3-Stunden-Schritte), Home zum Zurücksetzen oder einen Doppelklick auf ein Zeitfenster (Shift+Enter bei fokussiertem Fenster), um es nach oben zu drehen. Die Drehung gehört zum Ansichtsstatus und zum Freigabelink.

Die Team-Zielringe sind vom Monatsring umgeben und so gedreht, dass Tag 16 oben beginnt. Zielbögen, ihre Umläufe und Schatten drehen sich mit dem Tagesring; Ringnamen und Legende bleiben waagerecht. Drehen Sie in Dreitageschritten mit [ und ] oder wählen Sie einen Tag oder ein Ziel: Der Zielbogen richtet sein Ende – den aktuellen Teamstand – auf das Ziel aus.

Sieben Tagessektoren zeigen je eine geglättete Spur pro Cluster (CPU %, die innere Spur liegt vorn). Das graue Band markiert den Normalbereich des Clusters; das schraffierte Band und der gestrichelte Scheitel zeigen die Prognose ab jetzt (So., 14:00). ◆ markiert Werte außerhalb des Normalbereichs, auch am Rand. Außen stehen Anfragen pro Stunde, innen die Kosten je Cluster, den Spuren zugeordnet. Überfahren Sie eine Spur, um die Stunde für alle Cluster zu sehen, oder einen Tag für seine 24 Säulen.

Ein 300°-Ring zeigt die Monate; in jedem Sektor ist der typische Tagesverlauf (00–24 h) von Solar-, Wind- und Netzstrom gestapelt dargestellt (GW). Solar nimmt zum Sommer hin zu, Wind zum Winter; das Netz deckt die abendliche Lücke. Die Sektoren sind über ihre Namen mit den monatlichen Summen außen verknüpft; im Zentrum steht der Jahresmix.

Die inneren Sehnen zeigen Containerfracht zwischen Regionen (Band vom Exporteur zum Importeur); der Außenring stellt die monatlichen Exporte jeder Region dar: 12 Säulen je Region, unter ihrem Sehnenbogen ausgerichtet. Überfahren Sie eine Region, um ihre Verbindungen und zwölf Monate hervorzuheben; eine Verbindung hebt die Monate beider Regionen hervor; ein Monat zeigt seine Region und Verbindungen.

Die inneren Sehnen zeigen Tickets, die diese Woche von einem Team an ein anderes übergeben wurden (Farbverlauf vom Absender zum Empfänger). Die äußeren Säulen zeigen je Agent geschlossene Tickets; das Randband macht die Veränderung gegenüber der Vorwoche sichtbar. Klicken Sie auf ein Team, um es ausgewählt zu lassen; Esc hebt die Auswahl auf.

Drei übereinanderliegende Ebenen, alle an denselben zwölf Diensten ausgerichtet. Innen: ein Chord-Diagramm der dienstübergreifenden Aufrufe (k Anfragen/min). Mitte: Team › Dienst als Sunburst. Außen: monatliche Kosten je Dienst, eingefärbt nach Fehlerrate. Beim Überfahren leuchtet ein Aufruf über alle Ebenen hinweg bei beiden Diensten auf.

So lesen Sie das Diagramm: Winkel = Tageszeit (15 Minuten) · Balkenlänge = Anfragen · Balkenfarbe = Fehlerrate (niedrig türkis → hoch rot) · Außenband = Veränderung gegenüber der Vorwoche (grün aufwärts, rot abwärts) · innen = Region › Service. Über ? öffnen Sie die Lesehilfe.

So lesen Sie das Diagramm: 365 tägliche Umsatzbalken (Länge) · Farbe = Marge, divergierend um das 30-%-Ziel (blau darunter, orange darüber) · Außenband = Vorjahresvergleich · innen = Quartal › Monat, an den Tagen ausgerichtet. Einen Monat mit dem Mauszeiger hervorheben, um seine Tage zu markieren.

So lesen Sie das Diagramm: Balkenlänge = Verbrauch je Stunde · Farbe = Preis im Vergleich zum Tagesdurchschnitt (divergiert bei 0) · vorzeichenbehaftete Mini-Balken am Rand = Veränderung gegenüber gestern (nach außen = mehr, nach innen = weniger) · innen = Energiemix.

Die zusammengehörigen Bedeutungen sind winkelgenau ausgerichtet: Jeder Tagesabschnitt umfasst exakt seine 24 Viertelstunden. Überfahren Sie einen Abschnitt, um seine Säulen und die Klammer am Rand hervorzuheben; eine Säule hebt ihren Tagesabschnitt hervor. Klicken Sie, um die Auswahl beizubehalten; Esc hebt sie auf.

Ein Sunburst aus Quartalen und Monaten, wobei jeder Monat an seinen eigenen Tagen auf dem Tagesring ausgerichtet ist (Monate haben unterschiedliche Längen, daher folgen die inneren Winkel dem Kalender statt den Summen).

Unabhängige Achsen: Der Donut zeigt den Kanal-Mix, der Ring die Auslastung je Stunde. Bei aktivierter Filterinteraktion zeigt ein Klick auf einen Kanal dessen stündliche Auslastung im Ring; ein weiterer Klick oder Esc zeigt wieder alle Kanäle.

Ein Sunburst Region › Land innen, 16 Produkte außen. Eine explizite Zuordnung legt fest, welche Produkte jedes Land verkauft: Fahren Sie über ein Land (oder eine Region), um sie zu sehen, und klicken Sie, um den Ring auf den Umsatz dieses Landes zu filtern.

Eine 24-Stunden-Uhr zeigt Vorfälle; der Innenring steht für die Vorfallsart. Jede Art ist mit den Stunden ihres Auftretens verknüpft (datum links). Überfahren Sie eine Stunde, um die beteiligten Arten zu sehen, oder klicken Sie auf eine Art, um nur ihre Vorfälle anzuzeigen.

Dasselbe Diagramm mit den verschiedenen Verknüpfungsmodi. none: unabhängige Ringe. category: Segmente verknüpfen gleich benannte Monate. angle: Monate innerhalb des jeweiligen Winkelbereichs. map: explizite Zuordnung, hier ein Geschäftsjahr ab April (Q1 → Apr–Jun).

Ein Heatmap-Ring (Montag innen, Sonntag außen, eine Zelle je Stunde) liegt unter den Stundensummen: Die Zellen teilen die Winkel der Spalten, sodass das Überfahren einer Stunde diese für alle Tage hervorhebt und der Tooltip die sieben Tage aufführt. In der Mitte zeigt eine Polargebietsgrafik die Kanalverteilung (Radius = Volumen, unabhängig vom Ring).

Aktivitätsringe für Ziele, einer je Team (beliebig viele; Stärke und Abstände passen sich dem verfügbaren Platz an). Oberhalb von 100 % läuft der Ring über sich selbst; der Abschluss erhält einen weichen Schatten. Außen: täglich erledigte Arbeitspakete. Einen Ring mit dem Mauszeiger hervorheben, um die Tage zu markieren, an denen das Team sein Tagesziel erreicht hat; einen Tag hervorheben, um die entsprechenden Teams zu sehen.

Das Messgerät in der Mitte zeigt die aktuelle Auslastung; der Ring aus Säulen zeigt dieselbe Kennzahl über die letzten 60 Minuten, mit dem neuesten Wert am gestrichelten „now“-Tick. Bei jedem Tick wird das Messgerät animiert und die älteste Minute aus dem Ring entfernt (Simulation; pausiert, solange der Tab verborgen ist).

Der Säulenring mit Spektrumsfüllung und kombinierbaren inneren Ebenen: verschachteltes Ringdiagramm, Sunburst oder drei Ebenen gleichzeitig.

Gestapelte, gruppierte und negative Reihen, ein Messbogen mit Zielwerten und ein Live-Ring aus 360 Balken.

Wohin das Haushaltsbudget fließt: Einnahmequellen in Ausgabenkategorien.

Dieselbe Art von Flussdiagramm verläuft von oben nach unten: Ein Jahresbudget wird auf Teams aufgeteilt.

Ein Materialkreislauf: Recyceltes Material fließt zurück in die Produktion.

Tarifwechsel über drei jährliche Momentaufnahmen; Stufenbeschriftungen oberhalb der Spalten.

Kunden wechseln innerhalb eines Quartals zwischen Tarifen; dargestellt als gerichtetes Chord-Diagramm (Chord-Typ des Premium-Plugins).

Knotenausrichtung: justify, left, right und centre – wechseln Sie die Einstellung über die Schaltflächen.

Dreißig kleine Quellen münden in fünf Gruppen: Knoten und Beschriftungen bleiben voneinander getrennt.

Alle 2,5 s kommen neue Werte hinzu; Knoten und Verbindungen gleiten zu ihrer neuen Größe.

Wechseln Sie zwischen zwei unterschiedlichen Strukturen; gemeinsame Knoten gehen fließend über, neue werden eingeblendet.

Partikel bewegen sich entlang jeder Verbindung; ihre Dichte entspricht dem Fluss.

Quartalsbilder mit integrierten Schaltflächen für Wiedergabe und Pause sowie einem Schieberegler.

Überfahren Sie einen Knoten oder eine Verbindung, um den zugehörigen Pfad nachzuverfolgen. Über die Schaltflächen lässt sich die Hervorhebung auch per Code über die Premium-API steuern.

Ziehen Sie einen Knoten nach oben oder unten; Verbindungen folgen ihm, und die Position bleibt bei Aktualisierungen erhalten. nodeMove meldet den Versatz.

plotOptions.sankey.drilldown: Klicken Sie auf eine Region, um ihre Länder zu öffnen (EMEA → Deutschland führt eine Ebene tiefer; die Daten werden bei Bedarf geladen). Breadcrumb, Escape oder Pfeil nach oben führen zurück.

Zwei Jahre nebeneinander mit denselben Knotenfarben.

Individuelle Farben je Knoten, breitere Knoten, abgerundete Ecken und Formatierung der Beschriftungen.

Farbmodi für Verknüpfungen (gradient, source, target, fixed), Deckkraft und Krümmung.

Dasselbe Diagramm in den hellen und dunklen Designvorlagen.

Knoten, Verknüpfungen und Beschriftungen besitzen stabile Klassen (wcc-node, wcc-link, wcc-label) für CSS-Überschreibungen.

chart.fontFamily sowie Schriftgröße und -stärke der Beschriftungen.

plotOptions.sankey.plugins: Ein registriertes Plugin reserviert eine Zeile und zeichnet Spaltensummen; ein Inline-Plugin ergänzt eine Tooltip-Zeile, ein weiteres reagiert auf Ereignisse. Hooks: reserve, afterRender, event, tooltip, describe, destroy (dieselbe API für alle Premium-Typen).

Gespiegelte Anordnung auf einer dir="rtl"-Seite: Der Fluss verläuft von rechts nach links, Beschriftungen stehen auf der gespiegelten Seite, Zahlen werden arabisch dargestellt.

Ein Energiefluss mit nodeAlign 'left', 'center' und 'right': legt fest, wo sich Knoten ohne weiteren Abfluss anordnen; Beschriftungen stehen außerhalb der Spalten.

Ein Produktlaunch-Plan mit Gruppen, Fortschritt, Abhängigkeiten, einer Heute-Linie und einem Aufgabenraster.

Aufgaben mit Start- und Endzeit als ISO-Zeichenfolgen und kommagetrennten Abhängigkeiten werden unverändert eingelesen.

Aufgaben ohne Dauer (oder mit milestone: true) erscheinen als Rauten und können als Abhängigkeitsziele dienen.

Die geplanten Termine erscheinen als dünner Balken unter jeder Aufgabe, sodass Verzögerungen sichtbar werden.

Die längste Abhängigkeitskette bis zum Launch wird berechnet und hervorgehoben.

Jede Gruppenzeile zeigt über den zugehörigen Aufgaben einen Summenbalken mit dem zusammengefassten Fortschritt; Gruppen lassen sich einklappen.

Aufgaben, die durch einen Feiertagsstillstand unterbrochen werden, sind als durch die Pause verbundene Abschnitte dargestellt (segments: [[start, end], ...]); der Fortschritt füllt die Arbeitszeit, die Dauer zählt nur Arbeitsabschnitte und Ziehen verschiebt alle Abschnitte.

Ein Arbeitskalender (calendar: { workingDays, holidays }): arbeitsfreie Tage sind abgedunkelt und zurückgenommen, Feiertage farblich markiert und benannt. Aufgaben mit Start + Dauer zählen Arbeitstage; die Spalte Duration zählt ebenfalls Arbeitstage. Beim Ziehen bleibt die Länge einer Aufgabe in Arbeitstagen erhalten, während arbeitsfreie Tage übersprungen werden.

plotOptions.gantt.boundary zeichnet Projektbeginn und Frist als beschriftete Linien ein und schattiert den Zeitraum außerhalb dieser Grenzen. Aufgaben, die eine Grenze überschreiten, erhalten eine Warnmarkierung, einen Tooltip-Hinweis und eine Screenreader-Notiz; api().outOfBounds() listet sie auf.

Ende-zu-Anfang-, Anfang-zu-Anfang-, Ende-zu-Ende- und Anfang-zu-Ende-Verknüpfungen mit Verzögerung und Vorlauf (dependsOn: [{ id, type, lag }]); der kritische Pfad folgt je Typ der maßgeblichen Verknüpfung. Eine Verknüpfung, die den Zeitplan verletzt, wird markiert (dependencies.violations).

Pfeilverläufe mit vielen Kreuzungen, einstellbarer Pfeilgröße und Farbe.

dependencies.edit: Einen Balken mit dem Mauszeiger ansteuern und am runden Griff an seinem Ende ziehen, um ihn mit einem anderen Balken zu verknüpfen (Ende-zu-Anfang). Zum Entfernen einen Link anklicken und Delete drücken. Tastatur: Eine Aufgabe fokussieren und L drücken, zu einer anderen Aufgabe wechseln und erneut L drücken (bei einem bereits verknüpften Paar löst ein weiterer Druck die Verknüpfung). Schleifen werden abgewiesen. Ctrl/Cmd+Z macht die Änderung rückgängig. dependencyCreate / dependencyDelete lassen sich abbrechen und schreiben dependsOn in Ihre Daten zurück.

Integrierte Tabellenspalten: Name, Beginn, Ende, Dauer, Fortschritt und verantwortliche Person.

Spalten aus eigenen Aufgabenfeldern mit Überschriften, Breiten und Ausrichtung.

Berechnete Spalten: Für jede Spalte liefert eine value(task)-Funktion einen Wert (der Status ergibt sich aus Fortschritt und Terminen).

Gliederungsnummern (1.1, 1.2, 2.1 …), aus den Gruppen berechnet.

Ein kleiner Fortschrittsring je Aufgabe im Raster.

Klicken Sie zum Auswählen, Ctrl / Shift-Klick für mehrere Elemente; die Auswahl wird gemeldet und kann über die API gesetzt werden.

Die integrierte Bearbeitung verwendet drag.enabled: Ziehen verschiebt eine Aufgabe, Ziehen an einem Ende ändert ihre Länge. Doppelklick (oder F2) benennt sie direkt um, Delete entfernt sie, Insert / Alt+N fügt eine hinzu, Ctrl+Z / Ctrl+Shift+Z macht Änderungen rückgängig bzw. wiederholt sie. Jede Bearbeitung löst ein abbrechbares Ereignis aus (taskChange / taskCreate / taskDelete) sowie historyChange.

drag.draw fügt am Ende jeder Gruppe eine leere Zeile hinzu: Ziehen Sie darüber, um eine neue Aufgabe zu zeichnen (ein gestrichelter Schatten zeigt Daten und Dauer), oder klicken Sie im Raster auf "+ Add task". Das neue Element übernimmt die Datenstruktur seiner Nachbarn und löst ein abbrechbares taskCreate-Ereignis aus; Rückgängig entfernt es.

Springen Sie zu einer beliebigen Aufgabe: Ihre Gruppe wird geöffnet, die Zeitleiste scrollt an die passende Stelle und die Aufgabe wird ausgewählt.

Sortieren nach Start, Ende oder Name; nach zuständiger Person filtern.

Jede Reihe ist eine einklappbare Gruppe; alle Gruppen lassen sich über die API ein- oder ausklappen.

Ereignisse für Überfahren, Auswählen, Ziehen (taskChange kann abgelehnt werden), Gruppieren und Zoomen.

Ein vertikales Fadenkreuz mit Datumsfeld folgt dem Mauszeiger über der Zeitleiste.

Farben je Gruppe (series.color) und je Aufgabe (fillColor).

Beschriftungen neben oder innerhalb des Balkens (automatisch je nach Platz), mit Formatierungsfunktion.

Stabile Klassen (wcc-gantt-bar, wcc-gantt-progress, wcc-gantt-summary …) werden per CSS neu gestaltet.

plotOptions.gantt.annotations: Markierungslinien ({ x, label }), schattierte Datumsbereiche ({ x, x2, label }) und Notizen an einer Aufgabenzeile ({ task, x, label }). Chips in der Kopfzeile überschneiden weder den Heute-Chip noch einander.

Wechseln Sie mit Tab zum Diagramm und verwenden Sie die Pfeiltasten; Screenreader erhalten eine Zusammenfassung und eine Datentabelle.

Integrierte Steuerelemente (today, zoom in / out, fit) sowie App-Schaltflächen, die die api aufrufen (view, fit, zoom).

plotOptions.gantt.persist: { key } speichert Ansicht (Zoom und Scrollposition), eingeklappte Gruppen und optional die Auswahl in localStorage und stellt sie beim nächsten Laden wieder her. Zoomen Sie oder klappen Sie eine Gruppe ein und laden Sie die Seite neu. api().clearSavedState() löscht den gespeicherten Zustand.

Gespiegeltes Layout auf einer dir="rtl"-Seite (Raster rechts, Zeit läuft von rechts nach links, Pfeile und Beschriftungen gespiegelt, arabische Datumsangaben) sowie deutsche Datumsangaben und Kopfzeilen über ein locale.

Ein eintägiges Wartungsfenster mit aktivierter Ziehfunktion und snap: 'hour': Die Balken lassen sich in ganzen Stunden verschieben und in der Länge ändern.

Bei labels.position 'inside' stehen die Namen nach dem Prozentwert im Balken; die Schriftfarbe passt sich der Fortschrittsfüllung oder Tönung an. Ist ein Balken zu schmal für seinen Namen, wird die Beschriftung außen angezeigt. Darunter zum Vergleich der Standardwert 'right'.

Ein Organigramm mit der Wurzel oben.

Dasselbe Diagramm, vom Wurzelknoten aus nach oben wachsend.

Horizontales Layout mit der Wurzel links.

Horizontales Layout mit der Wurzel rechts.

Ändern Sie die Ausrichtung zur Laufzeit; die Knoten bewegen sich an ihre neuen Positionen.

Ein Modulgraph wird auf Kreisen um die Wurzel angeordnet.

Blätter auf dem äußeren Ring (Clusterlayout) in radialer Anordnung.

Karten mit Avatar aus Initialen, Titel und Untertitel.

Nur Punkte und Beschriftungen.

Karten mit mehreren Feldern: Avatar, Name, Rolle · Standort, Badge für direkt unterstellte Personen, Feldzeile (Datenfelder: [{ label, value }]) und Fortschrittsbalken (Daten progress: 0–100). Felder und Fortschritt erscheinen auch im Tooltip; die Karten wachsen passend mit.

Kennzahlen auf jeder Karte: über die Hierarchie summierte Personalzahl, Budget und offene Stellen als Feldzeile, Budgetverbrauch als Fortschrittsbalken. Der Formatter berechnet sie aus dem Knoten und seinen Unterknoten (fields / progress werden von node.formatter zurückgegeben).

Farbe, Badge, Untertitel und anfängliches Zuklappen werden je Knoten in den Daten festgelegt.

Kartengröße je Knoten: node.size(node) nach Ebene (Geschäftsleitung 260 × 84, VPs 220 × 68, Teams 168 × 52) sowie eine Datenüberschreibung (size: { width, height }) für die Platform-Leitung; das Layout hält die Karten entsprechend ihrer eigenen Breite auseinander und richtet sie an ihrer Ebenenlinie aus.

node.autoHeight: Lange Titel und Rollen werden umgebrochen (bis zu node.maxLines), und die Karte wächst passend mit; kurze Karten behalten die Standardhöhe und die Ebenenausrichtung bleibt erhalten.

Klicken Sie auf den Kartenschalter, um das Team auf- oder zuzuklappen; die Ansicht behält die angeklickte Karte an ihrer Position.

Jeder übergeordnete Knoten zeigt beim Umschalter die Zahl seiner direkten Mitarbeitenden.

Beschriftete Rahmen um Abteilungen (data wrapper: { label, color } oder plotOptions.tree.wrappers: [{ id, label }]); Rahmen lassen sich verschachteln (Platform innerhalb von Engineering), schieben Nachbarn auseinander und folgen dem Ein- und Ausklappen.

chart.fontFamily gilt für Titel, Untertitel und Badges.

Verbindungen werden nach Zweig, Tiefe oder einheitlich eingefärbt; zur Auswahl stehen gerade, abgewinkelte oder gebogene Linien.

Überfahren Sie einen Knoten: Seine Berichtslinie bis zur Wurzel und alle darunterliegenden Elemente werden hervorgehoben.

Punktknoten mit Beschriftungen außerhalb der Markierungen (von oben nach unten).

Punktknoten von links nach rechts, Beschriftungen neben den Punkten.

Ein Baum mit 5 000 Knoten, geöffnet auf Ebene 2; klappen Sie einen beliebigen Zweig auf.

Alles einblenden, bis zu einer Ebene einklappen oder einen Knoten über die API umschalten.

Blattkarten unter einem übergeordneten Knoten werden als Spalte statt als breite Reihe angeordnet (stackLeaves).

Eingeklappte Knoten zeigen, wie viele Knoten darunter verborgen sind (+N).

Klicken Sie auf eine Karte, um sie auszuwählen; die api wählt per Code aus und meldet die Auswahl.

Fokussieren Sie eine Person: eingeklappte Vorfahren werden geöffnet, die Karte ausgewählt und ins Sichtfeld verschoben.

Beim Herauszoomen (Ctrl + Mausrad oder über die Steuerelemente) werden die Karten zu vereinfachten Markierungen; beim Hineinzoomen erscheinen wieder die vollständigen Karten.

Knoten mit hasChildren: true laden ihre Kinder beim ersten Aufklappen über plotOptions.tree.lazy.load (ein Promise; hier mit simulierten 600 ms Verzögerung). Während des Ladens erscheint eine Platzhalterkarte mit Spinner; schlägt das Laden fehl (Services schlägt einmal fehl), wird eine Karte zum erneuten Versuch angezeigt. Ereignisse: childrenLoad / childrenLoadError.

Geben Sie einen Namen oder Befehl ein; Enter fokussiert die Person oder führt den Befehl über die api aus.

Werte werden alle 2 s aktualisiert; Badges und Summen folgen, während die Ansicht stehen bleibt.

Gehen Sie die jährlichen Momentaufnahmen der Organisation durch; hinzugefügte und entfernte Teams werden animiert.

theme.mode: dark mit der Seitenfläche (mit ?mode=dark die ganze Seite öffnen).

Gestalten Sie Karten, Titel und Verbindungen über deren Klassen neu (wcc-tnode-card, wcc-tnode-title, wcc-tlink).

Wechseln Sie mit Tab zum Diagramm und durchlaufen Sie die Hierarchie mit den Pfeiltasten.

Gespiegelte Anordnung auf einer Seite mit dir="rtl": Das erste Kind steht rechts, horizontale Bäume wachsen nach links, Avatar und Akzent liegen am rechten Rand, Text ist rechtsbündig; die Tasten ←/→ sind vertauscht.

Kerzen mit Volumen, Zeitraumsauswahl, Navigator, Fadenkreuz und Werteanzeige.

Tägliche Kerzen werden zur Laufzeit zu Wochen oder Monaten zusammengefasst.

Lineare, logarithmische oder prozentuale Veränderung auf der Preisachse.

20 Jahre täglicher Kerzen (etwa 5 200); gezeichnet wird nur der sichtbare Ausschnitt, der Navigator fasst den gesamten Zeitraum zusammen.

5-Minuten-Kerzen: Jede Sekunde aktualisiert ein neuer Tick die letzte Kerze; alle 5 Ticks entsteht eine neue Kerze. Die Ansicht folgt den Daten.

SMA-, EMA- und Bollinger-Overlays sowie RSI- und MACD-Bereiche.

Zwei weitere Tickersymbole, zu Beginn des Ansichtsbereichs auf den Schlusskurs des Hauptwerts normiert.

Zoomen oder verschieben Sie eines der Diagramme; das andere folgt (zoomed-Ereignis + api.setRange).

Optional aktivierbare Zeichenwerkzeuge (drawings.enabled) in einem zurückhaltenden Standardstil: ein Fibonacci-Retracement, bei dem nur der Bereich von 50–61,8 % eingefärbt ist, eine Unterstützungstrendlinie und ein Widerstandsstrahl in der Akzentfarbe des Themes und gedämpften Texttönen. Wählen Sie in der Werkzeugleiste ein Werkzeug, um eigene Elemente hinzuzufügen; Anker rasten an Kerzen ein, Zeichnungen werden als { t, y } gespeichert, zu JSON serialisiert und in localStorage persistiert. Alle vier Werkzeuge mit kräftiger Farbpalette: "All Drawing Tools".

Kennzeichnungen für Gewinne, Dividenden und Aktiensplits unter oder über den Kerzen, jeweils mit Tooltips.

Die Anzeige nennt Eröffnung, Hoch, Tief, Schluss, Veränderung und Volumen (sowie überlagerte Werte) für die Kerze unter dem Mauszeiger.

Integrierte Zeitraum-Schaltflächen sowie eine Seiten-Symbolleiste, die die api steuert (style, zoom, timeframe).

Farben für Aufwärts- und Abwärtsbewegungen, Theme-Voreinstellungen und Dunkelmodus.

Exportieren Sie das Diagramm als PNG / SVG oder die sichtbaren Daten als CSV.

Alle Zeichenwerkzeuge zugleich mit der lebhaften Palette (drawings.palette: 'vivid'): Trendlinie, horizontaler Strahl, Fibonacci-Retracement und Rechteck aus der Werkzeugleiste sowie Einstiegs-, Stop- und Zielmarken über einem Bollinger-Band. Anker rasten an der Kerze ein (Magnet am Eröffnungs-, Hoch-, Tief- oder Schlusskurs der Kerze); eine ausgewählte Zeichnung zeigt Ziehpunkte. Mit Delete wird sie entfernt, mit Alt+Pfeiltasten verschoben. Zeichnungen werden als { t, y } gespeichert und bleiben so beim Zoomen und Wechseln des Zeitraums erhalten; sie lassen sich als JSON serialisieren und mit localStorage (storageKey) dauerhaft speichern.

Verbreitung von Breitband je Land (zur Veranschaulichung), mit Farbskalenlegende.

Stadtgrößen als proportionale Kreise, mit einer Größenskala.

Bürostandorte mit Beschriftungen und Partnerstandorte als Rauten; Markierungen behalten beim Zoomen ihre Größe.

6 000 beispielhafte Sichtungen werden in bildschirmbezogene Sechsecke gruppiert; Größe und Farbe richten sich nach der Anzahl.

Das Choropleth als Punktkarte (Pixelkarte) dargestellt.

Flugaufkommen ab einem Drehkreuz; die Breite folgt dem Wert, Striche zeigen die Richtung.

Eine Weltreise als einzelne Route entlang von Großkreisen (Zwischenstopps, Pfeile und Gesamtdistanz im Tooltip) sowie eine gestrichelte Schifffahrtsroute durch benannte Wegpunkte.

Nur die Karte: Gradnetz, Kugel und Grenzen ohne Daten.

Absolute Zahlen, geteilt durch die Bevölkerung (je eine Million Menschen).

Equal Earth, Mercator, equirektangulare Projektion und ein orthografischer Globus.

registerMap() mit eigenem GeoJSON (einer fiktiven Insel mit vier Bezirken), anschließend über den Namen verwendet.

style: 'tiles' verwandelt die Karte in ein gekacheltes Kartogramm: ein gleich großes Sechseck je Bundesstaat (unser eigenes US-Raster), sodass Rhode Island so viel Platz einnimmt wie Texas. Überfahren, Auswahl, Tastaturbedienung und Zoom funktionieren wie auf der geografischen Karte. Rechts: quadratische Kacheln; darunter: Verkaufsstellen über der echten Karte in Sechsecke einteilen (hexbin).

Zeilen mit ISO-2-, ISO-3- oder englischem Ländernamen werden jeweils denselben Regionen zugeordnet.

Eingebettetes GeoJSON (unser eigenes, fiktiver Campus) mit einer darüberliegenden Blasenebene, ohne Registry.

Lineare, logarithmische, quantisierte, divergierende und explizite Wertebereiche auf denselben Daten.

Benannte Paletten (colorScale.palette): sequenzielle Farbverläufe, Viridis (farbenblindengerecht) und divergierende Farbpaare; reverse kehrt jede davon um. PG.api(c).palettes() listet die Namen auf.

Schraffur-, Kreuz- und Punktfüllungen je Wertebereich (auch in der Legende) sowie automatische Muster je Klasse für eine farbenblindgerechte Lesbarkeit; beim Zoomen bleibt die Musterdichte erhalten.

Besuchte Länder werden mit ihren Flaggen gefüllt (eingebettete SVG-Bilder; zulässig sind nur Bilddaten-URIs, http(s) oder relative URLs).

Theme-Voreinstellungen und dunkler Modus auf derselben Karte.

Per Code auf eine Region zoomen, den Zoomfaktor ändern, zurücksetzen oder den Globus drehen.

Klicken Sie auf ein Land, um es auszuwählen. Das Ereignis meldet die Auswahl, und die API kann sie auch per Code setzen.

plotOptions.map.drilldown: Klicken Sie auf die Vereinigten Staaten, um ihre Bundesstaaten zu öffnen; über den Breadcrumb (oder Escape) kehren Sie zurück. Rechts wird die Ebene bei Bedarf mit load() geladen (600 ms), und das Drilldown-Ereignis wird protokolliert.

Hinweisfelder mit Führungslinien, eine Regionsnotiz mit gestricheltem Umriss und Ozeanbeschriftungen; Karten werden so gespiegelt, dass sie im Plot bleiben, und behalten beim Zoomen ihre Größe.

Wechseln Sie mit Tab zur Karte; Pfeiltasten bewegen zwischen Regionen mit Daten, Enter wählt aus, +/- zoomt.

Exportieren Sie die Karte als PNG / SVG oder die Daten als CSV.

US-Bundesstaaten in der konischen Projektion 'albers' und der zusammengesetzten Projektion 'albersUsa' (Alaska und Hawaii als Einblendungen).

Die sequenziellen Farbverläufe sind unter folgenden Namen verfügbar: blue, green, purple, orange, red und gray (teal, heat und viridis finden sich auf anderen Seiten).

Reisen zwischen Büros: Gruppen nach Größe 'asc' oder 'desc' sortiert, Bänder nach ihrer 'source' oder 'target' eingefärbt.

Cloud-Ausgaben nach Region und Dienst; Spalten werden nach ihrer Summe mit 'desc' oder 'asc' sortiert.

Ein kleiner Abhängigkeitsgraph von Bibliotheken mit nodes.sizeBy 'value', 'degree' und 'none' sowie derselbe Graph festgelegt auf renderer 'svg' und 'canvas'.

24 erfundene Wetterstationen vergleichen den Niederschlag dieser Saison mit dem der letzten. fill.type 'series' weist jeder Saison eine eigene Farbe zu, statt ein Winkelspektrum zu verwenden; categoryLabels.orientation 'radial' richtet jeden Stationsnamen entlang seiner Speiche aus.

Ein Tag mit dem (fiktiven) Stromverbrauch eines Bürogebäudes, nach Last (HVAC, Beleuchtung, Steckdosenlasten) um eine 24-Stunden-Uhr gestapelt; innen zeigt ein Donut den Energiemix. Dasselbe Diagramm mit legend.position 'right' und 'bottom'.

Gestapelte Säulen mit variabler Breite: Die Breite entspricht der Segmentgröße, die Höhe dem Anteil.

Verbindungen zwischen Gruppen rund um einen Kreis.

Technische Laborseite mit allen Optionen des Sankey-Typs nebeneinander.

Technische Laborseite, auf der alle Optionen des Gantt-Typs nebeneinander gezeigt werden.

Technische Laborseite, auf der alle Optionen des Baumdiagrammtyps nebeneinander gezeigt werden.

Technische Laborseite mit allen Optionen des Aktientyps nebeneinander.

Technische Laborseite mit allen Optionen des Kartentyps nebeneinander.