Graphique parallèle : Analyse de données multidimensionnelles

Lors de la comparaison de points de données multivariés sur de nombreuses axes numériques ou catégoriels simultanément, le Graphique des coordonnées parallèles est un outil visuel essentiel. Au lieu de mapper les coordonnées sur des axes horizontaux et verticaux perpendiculaires, les graphiques parallèles disposent toutes les dimensions côte à côte sous forme de lignes parallèles. Les entrées de données individuelles sont représentées par des chemins polylinéiques continus qui croisent chaque axe, ce qui facilite l’identification des regroupements multi-attributs, compromis, corrélations et valeurs aberrantes—par exemple, comparer des modèles de voitures selon la puissance, le poids, l’efficacité énergétique, le prix et la note de sécurité.

Le fonctionnement des graphiques parallèles

Dans Apache ECharts, les graphiques de coordonnées parallèles reposent sur un bloc de configuration dédié parallelAxis qui définit chaque échelle parallèle (son index d’axe, son nom de dimension et son type de données). La série du graphique définit type : 'parallel' et mappe les lignes de tableaux de valeurs à plusieurs éléments à chaque index d’axe correspondant.

1. Configuration de base

Pour construire un graphique parallèle de base, définissez vos dimensions dans le tableau parallelAxis et passez les tableaux de coordonnées correspondants à l’intérieur de votre série data:

option = {
    parallelAxis: [
        { dim: 0, name: 'Prix ($)' },
        { dim: 1, name: 'Note' },
        { dim: 2, name: 'Poids (kg)' },
        { dim: 3, name: 'Puissance (ch)' }
    ],
    series: [
        {
            type: 'parallel',
            lineStyle: {
                width: 2
            },
            data: [
                [1299, 4.5, 1.2, 120],
                [899, 4.0, 1.5, 95],
                [1599, 4.8, 1.1, 150],
                [499, 3.5, 2.0, 80],
                [2100, 4.9, 0.9, 180]
            ]
        }
    ]
};

Techniques structurelles avancées

Les graphiques parallèles peuvent être combinés avec des gradients de couleur visuels ou des échelles catégorielles mixtes pour évaluer des compromis complexes à travers des catégories de produits distinctes.

1. Gradients de couleur de la carte visuelle à travers les dimensions

Associez un composant visualMapavec une dimension d’axe clé (par exemple, mapper la couleur de la ligne aux notes de performance) pour mettre instantanément en évidence les meilleurs performeurs sur tous les axes parallèles :

option = {
    axis: [
        { dim: 0, name: 'Cœurs CPU' },
        { dim: 1, name: 'RAM (Go)' },
        { dim: 2, name: 'Stockage (To)' },
        { dim: 3, name: 'Coût mensuel ($)', min: 0, max: 200 }
    ],
    visualMap: {
        show: true,
        type: 'continue',
        min: 0,
        max: 200,
        dimension: 3, // Colorer les chemins des lignes selon l'indice de dimension 3 (Coût mensuel)
        inRange: {
            color: ['#91cc75', '#fac858', '#ee6666'] // Vert (faible coût) à Rouge (haut coût)
        },
        orient: 'horizontal',
        top: '2%',
        left: 'center'
    },
    parallel: {
        top: '18%',
        bottom: '10%'
    },
    series: [
        {
            type: 'parallel',
            lineStyle: {
                width: 3,
                opacity: 0.8
            },
            data: [
                [4, 8, 0.5, 25],
                [8, 16, 1.0, 50],
                [16, 32, 2.0, 110],
                [32, 64, 4.0, 185],
                [12, 24, 1.5, 80]
            ]
        }
    ]
};

Affinage du layout et du filtrage interactif

Ajouter des courbes douces et une opacité de ligne empêche les fils de données denses et croisés de submerger l’interface utilisateur.

1. Chemins de courbes douces et fils à faible opacité

Définir smooth: true et réduire l’opacité de la ligne pour rendre les superpositions et regroupements de données à haute densité naturellement visibles :

option = {
    axis: [
        { dim: 0, name: 'Score A' },
        { dim: 1, name: 'Score B' },
        { dim: 2, name: 'Score C' },
        { dim: 3, name: 'Score D' },
        { dim: 4, name: 'Score E' }
    ],
    parallel: {
        left: '10%',
        right: '10%',
        bottom: '12%',
        top: '12%'
    },
    series: [
        {
            type: 'parallel',
            smooth: true, // Courbes pour des chemins de lignes plus propres
            lineStyle: {
                color: '#5470c6',
                width: 2,
                opacity: 0.45
            },
            data: [
                [85, 92, 78, 90, 88],
                [70, 65, 80, 72, 75],
                [95, 88, 92, 96, 94],
                [60, 75, 68, 62, 70],
                [88, 90, 85, 89, 91],
                [78, 82, 74, 80, 83]
            ]
        }
    ]
};

Meilleures pratiques stratégiques

• Organisez les axes avec soin :Placez les métriques fortement corrélées ou directement comparables sur des axes adjacents afin que les relations et les tendances croisées soient plus faciles à repérer.
• Utilisez une opacité plus faible pour les volumes élevés de données : Lorsque vous tracez des dizaines ou des centaines de lignes, réduisez lineStyle.opacity à 0.2–0.5 afin que les tendances superposées créent naturellement des bandes sombres et à haute densité.
• Activez smooth: true pour les jeux de données complexes : Appliquer une courbure subtile aux chemins des lignes réduit les angles visuels marqués lorsque les fils traversent plusieurs axes parallèles en succession rapide.