Graphique en nuage de points : distribution bivariée et regroupement de points

Lorsqu’on explore les relations ou les corrélations entre deux variables continues, le Graphique en nuage de points (ou graphique de dispersion) est l’outil analytique principal. En traçant des points de données sur une grille bidimensionnelle basée sur des coordonnées numériques X et Y, les graphiques en nuage de points permettent de révéler des regroupements, des valeurs aberrantes, des tendances et des corrélations sur des jeux de données complexes, tels que les dépenses marketing par rapport à la génération de leads ou l’expérience des employés par rapport au salaire.

Le fonctionnement des graphiques en nuage de points

Contrairement aux graphiques à colonnes ou à lignes pilotés par des catégories, les graphiques en nuage de points utilisent des axes de valeurs numériques pour les deux dimensions. Dans Apache ECharts, définir type: 'scatter' attend des données formatées sous forme de tableaux de coordonnées numériques à deux éléments [x, y] ou des objets de données mappés sur des axes numériques xAxis et yAxis configurations.

1. Configuration essentielle

Pour créer un graphique en nuage de points basique, définissez type: 'value' sur les deux axes et fournissez des paires de coordonnées numériques dans votre tableau de données de série :

option = {
    tooltip: {
        trigger: 'item',
        formatter: 'X : {c0}
Y : {c1}'
    },
    xAxis: {
        type: 'value',
        name: 'Dépenses publicitaires (en milliers $)'
    },
    yAxis: {
        type: 'value',
        name: 'Conversions'
    },
    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]
            ]
        }
    ]
};

Techniques structurelles avancées

Les graphiques en nuage de points peuvent intégrer un redimensionnement dynamique pour représenter une troisième variable (graphique à bulles) ou afficher des superpositions de regroupements multiculturels.

1. Taille variable des points (effet bulle)

Passez une fonction personnalisée ou un mappage de valeurs de données à symbolSize pour encoder une troisième métrique quantitative dans la taille des points :

option = {
    tooltip: {
        trigger: 'item',
        formatter: function (param) {
            return 'Dépenses : $' + param.data[0] + 'krn' +
                   'Revenus : $' + param.data[1] + 'krn' +
                   'ROAS : ' + param.data[2] + 'x';
        }
    },
    xAxis: {
        type: 'value',
        name: 'Dépenses'
    },
    yAxis: {
        type: 'value',
        name: 'Revenus'
    },
    series: [
        {
            name: 'Campagnes',
            type: 'scatter',
            symbolSize: function (data) {
                return data[2] * 5; // Ajuster la taille des bulles selon la troisième variable
            },
            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
            }
        }
    ]
};

Affinage du layout et du style

Contrôler l’opacité des marqueurs et ajouter des lignes de tendance cibles empêche les groupes denses de se transformer en masses visuelles solides.

1. Marqueurs translucides et style des groupes

Appliquer des contours et des remplissages semi-transparents permet de maintenir les points de données superposés visibles au sein des groupes à forte densité :

option = {
    grid: {
        left: '10%',
        right: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        scale: true // Ajuster automatiquement les min/max de l'axe pour ajuster étroitement aux données
    },
    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]
            ]
        }
    ]
};

Meilleures pratiques stratégiques

• Activer scale : true sur les axes numériques : Définir scale : true sur les deux axes numériques afin que le graphique s’ajuste automatiquement à la plage de données pertinente au lieu de forcer l’origine à (0,0).
• Utiliser la transparence du remplissage pour les superpositions : Lors du tracé de centaines de points, réduisez l’opacité du remplissage à environ 0,4–0,6 afin que les zones de superposition denses apparaissent naturellement plus foncées.
• Fournir des étiquettes d’axes contextuelles : Marquez toujours les axes X et Y explicitement avec les unités de mesure (par exemple, « $ en milliers » ou « Latence en ms ») afin que les valeurs soient immédiatement claires sans avoir à consulter les infobulles.