График параллельных координат: анализ многомерных данных

При сравнении многомерных точек данных по многим числовым или категориальным осям одновременно, График параллельных координат является необходимым визуальным инструментом. Вместо отображения координат на перпендикулярных горизонтальных и вертикальных осях, графики параллельных координат располагают все измерения рядом друг с другом в виде параллельных линий. Отдельные данные отображаются в виде непрерывных ломаных линий, пересекающих каждую ось, что позволяет легко выявлять многомерные кластеры, компромиссы, корреляции и выбросы—например, при сравнении моделей автомобилей по мощности, весу, топливной эффективности, цене и рейтингу безопасности.

Механика графиков параллельных координат

В Apache ECharts графики параллельных координат основаны на специальном блоке конфигурации parallelAxis который определяет каждую параллельную шкалу (ее индекс оси, имя измерения и тип данных). Серия графика устанавливает type: 'parallel' и сопоставляет строки массивов значений с каждым соответствующим индексом оси.

1. Основная настройка

Чтобы создать базовый график параллельных координат, определите свои измерения в массиве parallelAxis и передайте соответствующие массивы координат внутри серии data:

option = {
    parallelAxis: [
        { dim: 0, name: 'Цена ($)' },
        { dim: 1, name: 'Рейтинг' },
        { dim: 2, name: 'Вес (кг)' },
        { dim: 3, name: 'Мощность (л.с.)' }
    ],
    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]
            ]
        }
    ]
};

Расширенные структурные методы

Графики параллельных координат можно комбинировать с визуальными градиентами цветов или смешанными категориальными шкалами для оценки сложных компромиссов между различными категориями продуктов.

1. Визуальные градиенты цветов по измерениям

Сопоставьте компонент visualMapс ключевым измерением оси (например, сопоставление цвета линии с рейтингом производительности), чтобы мгновенно выделить лидеров по всем параллельным осям:

option = {
    parallelAxis: [
        { dim: 0, name: 'Ядра CPU' },
        { dim: 1, name: 'Оперативная память (ГБ)' },
        { dim: 2, name: 'Хранилище (ТБ)' },
        { dim: 3, name: 'Ежемесячные расходы ($)', min: 0, max: 200 }
    ],
    visualMap: {
        show: true,
        type: 'continuous',
        min: 0,
        max: 200,
        dimension: 3, // Цвет линий в зависимости от индекса измерения 3 (Ежемесячные расходы)
        inRange: {
            color: ['#91cc75', '#fac858', '#ee6666'] // Зелёный (низкие расходы) до красного (высокие расходы)
        },
        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]
            ]
        }
    ]
};

Тонкая настройка макета и интерактивной фильтрации

Добавление плавных кривых и прозрачности линий предотвращает перегрузку пользовательского интерфейса густыми, пересекающимися потоками данных.

1. Плавные кривые и низкая прозрачность линий

Установите smooth: trueи уменьшите прозрачность линий, чтобы естественным образом сделать видимыми пересечения и кластеры данных с высокой плотностью:

option = {
    parallelAxis: [
        { dim: 0, name: 'Оценка A' },
        { dim: 1, name: 'Оценка B' },
        { dim: 2, name: 'Оценка C' },
        { dim: 3, name: 'Оценка D' },
        { dim: 4, name: 'Оценка E' }
    ],
    parallel: {
        left: '10%',
        right: '10%',
        bottom: '12%',
        top: '12%'
    },
    series: [
        {
            type: 'parallel',
            smooth: true, // Плавные кривые для более чистого визуального восприятия
            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]
            ]
        }
    ]
};

Стратегические лучшие практики

• Располагайте оси продуманно:Размещайте сильно коррелирующие или напрямую сравнимые метрики на соседних осях, чтобы легче было заметить взаимосвязи и пересекающиеся тенденции.
• Используйте меньшую прозрачность при высоком объеме данных: При построении десятков или сотен линий уменьшите lineStyle.opacity до 0.2–0.5 чтобы пересекающиеся тенденции естественным образом создавали более темные, плотные полосы.
• Включите smooth: true для сложных наборов данных: Применение небольшой кривизны к линиям уменьшает резкие визуальные углы, когда линии пересекают несколько параллельных осей подряд.