Grafik Paralel: Analisis Data Multi-Dimensi

Ketika membandingkan titik data multivariat di sepanjang banyak sumbu numerik atau kategorikal secara bersamaan, Grafik Koordinat Paralel adalah alat visual yang penting. Alih-alih memetakan koordinat ke sumbu horizontal dan vertikal yang saling tegak lurus, grafik paralel menempatkan semua dimensi berdampingan sebagai garis-garis sejajar. Masukan data individu digambarkan sebagai jalur polilinier kontinu yang memotong setiap sumbu, sehingga memudahkan identifikasi kelompok dengan banyak atribut, kompromi, korelasi, dan pencilan—seperti membandingkan model mobil berdasarkan tenaga mesin, berat, efisiensi bahan bakar, harga, dan peringkat keselamatan.

Mekanisme Grafik Paralel

Dalam Apache ECharts, grafik koordinat paralel bergantung pada blok konfigurasi khusus parallelAxis yang menentukan setiap skala paralel (indeks sumbu, nama dimensi, dan tipe data). Seri grafik mengatur type: 'parallel' dan memetakan baris-baris array nilai multi-elemen ke setiap indeks sumbu yang sesuai.

1. Pengaturan Dasar

Untuk membuat grafik paralel dasar, tentukan dimensi Anda dalam array parallelAxis dan kirimkan array koordinat yang sesuai di dalam seri Anda data:

option = {
    parallelAxis: [
        { dim: 0, name: 'Harga ($)' },
        { dim: 1, name: 'Peringkat' },
        { dim: 2, name: 'Berat (kg)' },
        { dim: 3, name: 'Tenaga (HP)' }
    ],
    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]
            ]
        }
    ]
};

Teknik Struktural Lanjutan

Grafik paralel dapat digabungkan dengan gradien warna visual atau skala kategorikal campuran untuk mengevaluasi kompromi kompleks di antara kategori produk yang berbeda.

1. Gradien Warna Peta Visual di Seluruh Dimensi

Gabungkan visualMapkomponen dengan dimensi sumbu utama (misalnya, memetakan warna garis ke peringkat kinerja) untuk langsung menyoroti pelaku terbaik di seluruh sumbu paralel:

option = {
    parallelAxis: [
        { dim: 0, name: 'Inti CPU' },
        { dim: 1, name: 'RAM (GB)' },
        { dim: 2, name: 'Penyimpanan (TB)' },
        { dim: 3, name: 'Biaya Bulanan ($)', min: 0, max: 200 }
    ],
    visualMap: {
        show: true,
        type: 'kontinu',
        min: 0,
        max: 200,
        dimension: 3, // Warna jalur garis berdasarkan indeks dimensi 3 (Biaya Bulanan)
        inRange: {
            color: ['#91cc75', '#fac858', '#ee6666'] // Hijau (Biaya Rendah) hingga Merah (Biaya Tinggi)
        },
        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]
            ]
        }
    ]
};

Penyesuaian Layout dan Pemfilteran Interaktif

Menambahkan lengkungan halus dan transparansi garis mencegah benang data yang padat dan saling bersilangan mengganggu antarmuka pengguna.

1. Jalur Lengkungan Halus dan Benang Transparan Rendah

Atur smooth: truedan turunkan transparansi garis agar tumpang tindih dan kelompok data padat terlihat secara alami:

option = {
    parallelAxis: [
        { dim: 0, name: 'Skor A' },
        { dim: 1, name: 'Skor B' },
        { dim: 2, name: 'Skor C' },
        { dim: 3, name: 'Skor D' },
        { dim: 4, name: 'Skor E' }
    ],
    parallel: {
        left: '10%',
        right: '10%',
        bottom: '12%',
        top: '12%'
    },
    series: [
        {
            type: 'parallel',
            smooth: true, // Melengkungkan jalur garis untuk tampilan yang lebih bersih
            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]
            ]
        }
    ]
};

Praktik Terbaik Strategis

• Atur Sumbu Secara Bijak:Tempatkan metrik yang saling berkorelasi kuat atau dapat dibandingkan langsung pada sumbu yang bersebelahan agar hubungan dan tren silang lebih mudah terlihat.
• Gunakan Transparansi Rendah untuk Volume Data Tinggi:Saat menggambar puluhan atau ratusan garis, kurangi lineStyle.opacity menjadi 0.2–0.5sehingga tren yang tumpang tindih membentuk pita padat dengan warna lebih gelap secara alami.
• Aktifkan smooth: true untuk dataset yang kompleks:Menerapkan kelengkungan halus pada jalur garis mengurangi sudut visual tajam saat benang melintasi beberapa sumbu paralel secara berurutan.