Streudiagramm: Bivariate Verteilung und Punktclustering

Beim Untersuchen von Beziehungen oder Korrelationen zwischen zwei kontinuierlichen Variablen ist das Streudiagramm (oder Streudiagramm) das primäre analytische Werkzeug. Durch die Darstellung von Datenpunkten auf einem zweidimensionalen Gitter basierend auf numerischen X- und Y-Koordinaten helfen Streudiagramme dabei, Clustern, Ausreißern, Trends und Korrelationen in komplexen Datensätzen aufzudecken, wie zum Beispiel Werbeaufwand im Verhältnis zur Leadgenerierung oder Mitarbeitererfahrung im Verhältnis zum Gehalt.

Die Funktionsweise von Streudiagrammen

Im Gegensatz zu kategorienbasierten Säulen- oder Liniendiagrammen verwenden Streudiagramme für beide Dimensionen numerische Wertachsen. In Apache ECharts wird durch Einstellen von type: 'scatter' wird erwartet, dass die Daten als zweielementige numerische Koordinaten-Arrays formatiert sind [x, y] oder Datenobjekte, die über numerische xAxis und yAxis Konfigurationen zugeordnet sind.

1. Grundlegende Einrichtung

Um ein einfaches Streudiagramm zu erstellen, definieren Sie type: 'value' auf beiden Achsen und geben Sie numerische Koordinatenpaare innerhalb Ihres Seriendaten-Arrays an:

option = {
    tooltip: {
        trigger: 'item',
        formatter: 'X: {c0}
Y: {c1}'
    },
    xAxis: {
        type: 'value',
        name: 'Werbungsaufwand ($k)'
    },
    yAxis: {
        type: 'value',
        name: 'Konversionen'
    },
    series: [
        {
            type: 'scatter',
            symbolSize: 12,
            data: [
                [10.0, 8.04],
                [8.07, 6.95],
                [13.0, 7.58],
                [9.05, 8.81],
                [11.0, 8.33],
                [14.0, 9.96],
                [6.03, 7.24],
                [12.0, 4.26],
                [7.08, 4.82],
                [5.02, 5.68]
            ]
        }
    ]
};

Erweiterte strukturelle Techniken

Streudiagramme können dynamische Größenanpassung zur Darstellung einer dritten Variablen (Blasendiagramm) oder mehrkategoriale Clusteroberlagen anzeigen.

1. Variable Punktgröße (Blaseneffekt)

Übergeben Sie eine benutzerdefinierte Funktion oder eine Datenwertzuordnung an symbolSizeum eine dritte quantitative Metrik in die Punktgröße zu kodieren:

option = {
    tooltip: {
        trigger: 'item',
        formatter: function (param) {
            return 'Ausgaben: $' + param.data[0] + 'krn' +
                   'Umsatz: $' + param.data[1] + 'krn' +
                   'ROAS: ' + param.data[2] + 'x';
        }
    },
    xAxis: {
        type: 'value',
        name: 'Ausgaben'
    },
    yAxis: {
        type: 'value',
        name: 'Umsatz'
    },
    series: [
        {
            name: 'Kampagnen',
            type: 'scatter',
            symbolSize: function (data) {
                return data[2] * 5; // Größe der Blase anhand der dritten Variablen skalieren
            },
            data: [
                [15, 120, 8.0],
                [25, 180, 7.2],
                [10, 50, 5.0],
                [40, 380, 9.5],
                [30, 210, 7.0]
            ],
            itemStyle: {
                color: '#5470c6',
                opacity: 0.7
            }
        }
    ]
};

Feinabstimmung von Layout und Stil

Die Steuerung der Markeroptik und die Hinzufügung von Ziel-Trendlinien verhindert, dass dichte Cluster zu festen visuellen Flecken werden.

1. Transluzente Marker und Cluster-Stil

Durch Anwendung von Randstrichen und halbtransparenten Füllungen bleiben überlappende Datenpunkte innerhalb von dichtbesetzten Clustern sichtbar:

option = {
    grid: {
        left: '10%',
        right: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        scale: true // Achsenmin/max automatisch skalieren, um Daten dicht zu fassen
    },
    yAxis: {
        type: 'value',
        scale: true
    },
    series: [
        {
            type: 'scatter',
            symbolSize: 16,
            itemStyle: {
                color: 'rgba(84, 112, 198, 0.6)',
                borderColor: '#5470c6',
                borderWidth: 2
            },
            data: [
                [161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0],
                [155.8, 53.6], [170.0, 59.0], [159.1, 47.6], [166.0, 69.8],
                [176.2, 66.8], [160.2, 75.2], [172.5, 55.2], [170.9, 54.2]
            ]
        }
    ]
};

Strategische Best Practices

• Aktivieren Sie scale: true auf numerischen Achsen: Legen Sie scale: true auf beiden numerischen Achsen fest, damit die Darstellung automatisch auf den relevanten Datenbereich zoomt, anstatt den Ursprung bei (0,0).
• Verwenden Sie Füll-Transparenz bei Überlappungen: Beim Darstellen von Hunderten von Punkten reduzieren Sie die Füll-Opazität auf etwa 0,4–0,6, damit dichte Überlappungsbereiche natürlich dunkler erscheinen.
• Stellen Sie kontextbezogene Achsenbeschriftungen bereit: Beschriften Sie X- und Y-Achsen immer explizit mit Messgrößen (z. B. „$ in Tausend“ oder „Latenz in ms“), damit die Werte ohne Überprüfung von Tooltips sofort verständlich sind.