Gráfico de dispersión: distribución bivariada y agrupamiento de puntos

Al explorar relaciones o correlaciones entre dos variables continuas, el Gráfico de dispersión (o gráfico de dispersión) es la herramienta analítica principal. Al trazar puntos de datos en una cuadrícula bidimensional basada en coordenadas numéricas X e Y, los gráficos de dispersión ayudan a revelar agrupamientos, valores atípicos, tendencias y correlaciones en conjuntos de datos complejos, como el gasto en marketing frente a la generación de leads o la experiencia del empleado frente al salario.

La mecánica de los gráficos de dispersión

A diferencia de los gráficos de columnas o líneas impulsados por categorías, los gráficos de dispersión utilizan ejes de valores numéricos para ambas dimensiones. En Apache ECharts, establecer type: 'scatter' espera datos formateados como arreglos de coordenadas numéricas de dos elementos [x, y] o objetos de datos mapeados a través de xAxis y yAxis configuraciones.

1. Configuración esencial

Para crear un gráfico de dispersión básico, define type: 'value' en ambos ejes y proporciona pares de coordenadas numéricas dentro de tu arreglo de datos de series:

option = {
    tooltip: {
        trigger: 'item',
        formatter: 'X: {c0}rnY: {c1}'
    },
    xAxis: {
        type: 'value',
        name: 'Gasto en publicidad ($k)'
    },
    yAxis: {
        type: 'value',
        name: 'Conversiones'
    },
    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]
            ]
        }
    ]
};

Técnicas estructurales avanzadas

Los gráficos de dispersión pueden incorporar un tamaño dinámico para representar una tercera variable (gráfico de burbujas) o mostrar superposiciones de agrupamientos de múltiples categorías.

1. Tamaño variable de puntos (efecto de burbuja)

Pasa una función personalizada o un mapeo de valores de datos a symbolSize para codificar una tercera métrica cuantitativa en el tamaño del punto:

option = {
    tooltip: {
        trigger: 'item',
        formatter: function (param) {
            return 'Gasto: $' + param.data[0] + 'k
' +
                   'Ingresos: $' + param.data[1] + 'k
' +
                   'ROAS: ' + param.data[2] + 'x';
        }
    },
    xAxis: {
        type: 'value',
        name: 'Gasto'
    },
    yAxis: {
        type: 'value',
        name: 'Ingresos'
    },
    series: [
        {
            name: 'Campañas',
            type: 'scatter',
            symbolSize: function (data) {
                return data[2] * 5; // Escalar el tamaño de la burbuja según la tercera 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
            }
        }
    ]
};

Ajuste fino del diseño y estilo

Controlar la opacidad de los marcadores y agregar líneas de tendencia objetivo evita que los grupos densos se conviertan en manchas visuales sólidas.

1. Marcadores translúcidos y estilo de agrupación

Aplicar trazos de borde y rellenos semitransparentes mantiene visibles los puntos de datos superpuestos dentro de los grupos de alta densidad:

option = {
    grid: {
        left: '10%',
        right: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        scale: true // Escalar automáticamente los límites del eje para ajustarlos al rango de datos
    },
    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]
            ]
        }
    ]
};

Prácticas recomendadas estratégicas

• Habilite scale: true en los ejes numéricos: Establezca scale: true en ambos ejes numéricos para que el gráfico se ajuste automáticamente al rango de datos relevante en lugar de forzar el origen en (0,0).
• Use la transparencia de relleno para superposiciones: Al trazar cientos de puntos, reduzca la opacidad del relleno a aproximadamente 0.4–0.6 para que las zonas de superposición densa aparezcan naturalmente más oscuras.
• Proporcione etiquetas de eje contextuales: Etiquete siempre los ejes X e Y explícitamente con unidades de medida (por ejemplo, «$ en miles» o «Latencia en ms») para que los valores sean inmediatamente claros sin necesidad de revisar las sugerencias.