Tanda dan saluran

Setiap grafik, dari yang paling sederhana sampai yang paling rumit, tersusun dari dua lapis kosakata. Lapis pertama adalah tanda (mark), yaitu geometri dasar yang ditaruh pada bidang gambar, dan lapis kedua adalah saluran (channel), yaitu atribut tanda yang menerima pemetaan data. Topik ini membangun kosakata tersebut secara sistematis beserta tabel kecocokannya terhadap jenis data, sehingga grafik apa pun dapat dianalisis menjadi kombinasi tanda dan saluran yang jelas.

Tanda sebagai geometri dasar#

Tanda adalah unit geometri minimal yang mewakili data pada bidang gambar. Empat jenis tanda yang paling umum digunakan adalah titik untuk satu nilai tunggal, garis untuk hubungan antarnilai yang berurutan, area untuk batas wilayah atau besaran yang mengisi ruang, dan teks untuk label atau nilai yang dibaca langsung. Setiap tanda membawa dimensi inheren, yaitu posisi pada dua arah dan ukuran yang menentukan seberapa luas tanda menempati bidang.

Contoh penerapannya mudah ditemukan pada grafik sehari-hari. Diagram pencar (scatter) memuat kumpulan titik, diagram garis memuat titik yang dihubungkan garis, dan diagram batang memuat area berupa persegi panjang yang panjangnya mewakili nilai. Satu grafik dapat menggabungkan beberapa jenis tanda sekaligus, misalnya garis rata-rata yang digambar di atas kumpulan titik pengamatan. Jenis tanda bukan penentu kejelasan, melainkan bahan yang menopang saluran data.

Satu sifat tanda patut diperhatikan, yaitu hubungan antartandanya. Titik yang berdiri sendiri menyatakan nilai yang tidak berhubungan, sedangkan garis yang menghubungkan titik menyatakan kesinambungan antarnilai. Karena itu, menghubungkan titik kategori yang tidak berurutan dapat menimbulkan kesan tren yang tidak ada, meskipun tanda yang digunakan sama dengan grafik garis yang sah.

Saluran sebagai kosakata encoding#

Pemetaan data ke atribut tanda disebut encoding. Saluran yang tersedia pada kebanyakan alat visualisasi mencakup posisi x dan y, panjang, sudut, area, ragam warna (hue), kecerahan, dan bentuk. Jenis data dibedakan menjadi tiga, yaitu kuantitatif untuk angka bersatuan, ordinal untuk kategori berurutan, dan kategorikal untuk kategori tanpa urutan. Tabel berikut merangkum saluran tersebut beserta jenis data yang cocok dan contoh penggunaannya.

Kolom kapasitas pada tabel merangkum lebar pita tiap saluran. Aturan kasar pemilihannya sederhana, yaitu nilai kuantitatif ditempatkan pada saluran posisi atau panjang, data ordinal pada saluran berurutan seperti kecerahan, dan kategori pada ragam warna atau bentuk. Aturan ini menjaga grafik tetap dapat dibaca tanpa pembaca harus menebak urutan atau besaran. Pelanggaran yang paling sering dijumpai adalah memetakan kategori ke saluran berurutan, misalnya bayangan yang makin gelap untuk kategori yang tidak memiliki urutan, sehingga pembaca menemukan pola yang tidak ada.

Data yang sama dalam tiga saluran#

Perbedaan kejelasan antarsaluran paling mudah dirasakan ketika data yang sama digambar tiga kali dengan saluran berbeda. Data contoh yang digunakan adalah nilai ujian siswa kelas 7A dari berkas nilai_ujian.csv yang menyertai topik ini. Perintah berikut menampilkan enam baris pertama berkas tersebut.

# menampilkan header dan lima siswa pertama kelas 7A
head -6 nilai_ujian.csv

siswa,kelas,nilai_matematika,nilai_fisika,nilai_literasi,hadir_persen
Ali,7A,78,74,71,92
Budi,7A,85,83,80,95
Citra,7A,92,90,88,98
Dewi,7A,68,65,79,88
Eka,7A,74,72,70,91

Skrip berikut membaca lima siswa pertama kelas 7A dan menggambar nilai matematika kelima siswa tersebut dalam tiga panel, yaitu sebagai panjang batang, sebagai posisi titik pada sumbu bersama, dan sebagai luas lingkaran. Luas tiap lingkaran dihitung sebanding dengan nilai yang diwakilinya, sehingga jari-jarinya tumbuh mengikuti akar nilai.

import csv

import matplotlib.pyplot as plt

# membaca data contoh dan mengambil lima siswa pertama dari kelas 7A
data = []
with open("nilai_ujian.csv", newline="", encoding="utf-8") as berkas:
    for baris in csv.DictReader(berkas):
        if baris["kelas"] == "7A":
            data.append((baris["siswa"], int(baris["nilai_matematika"])))
data = data[:5]

nama = [d[0] for d in data]
nilai = [d[1] for d in data]

print(f"{'Siswa':10s}{'Nilai':>6s}")
for n, v in data:
    print(f"{n:10s}{v:6d}")

fig, axes = plt.subplots(1, 3, figsize=(7, 3.2))
fig.subplots_adjust(left=0.08, right=0.98, bottom=0.14, top=0.87, wspace=0.24)

# panel 1: nilai disandikan sebagai panjang batang
axes[0].bar(nama, nilai, color="#4477aa")
axes[0].set_title("Panjang", fontsize=10)
axes[0].set_ylabel("Nilai matematika")
axes[0].grid(axis="y", alpha=0.4)
axes[0].set_ylim(0, 100)

# panel 2: nilai disandikan sebagai posisi titik pada sumbu bersama
axes[1].scatter(range(len(nama)), nilai, s=55, color="#4477aa")
axes[1].set_title("Posisi", fontsize=10)
axes[1].grid(axis="y", alpha=0.4)
axes[1].set_xticks(range(len(nama)), nama)
axes[1].set_ylim(0, 100)
axes[1].tick_params(labelleft=False)

# panel 3: nilai disandikan sebagai luas lingkaran
axes[2].scatter(range(len(nama)), [0] * len(nama), s=[v * 3.5 for v in nilai],
                color="#4477aa", alpha=0.85)
axes[2].set_title("Luas", fontsize=10)
axes[2].set_ylim(-1, 1)
axes[2].set_xticks(range(len(nama)), nama)
axes[2].tick_params(labelleft=False)

fig.savefig("tiga-encoding.svg")

Siswa      Nilai
Ali           78
Budi          85
Citra         92
Dewi          68
Eka           74

Skrip menyimpan grafiknya sebagai berkas SVG, dan gambar berikut menampilkan keluarannya.

Pada panel panjang dan posisi, urutan nilai dari Citra yang tertinggi sampai Dewi yang terendah terbaca cepat karena kedua saluran mengacu pada sumbu yang sama. Pada panel luas, lingkaran Citra dan Dewi tampak hampir serupa meskipun selisih nilainya mencapai 24 poin, karena persepsi manusia menilai luas secara kasar. Agar luas sebanding dengan nilai, jari-jari harus tumbuh sebanding dengan akar nilai, $r \propto \sqrt{v}$, sehingga membandingkan dua lingkaran sama dengan membandingkan dua akar secara mental. Kesenjangan antara kedua pola pembacaan itulah yang diukur sebagai efektivitas encoding.

Kesalahan umum#

• Luas untuk nilai yang perlu dibaca presisi. Persepsi luas menilai besaran secara kasar, sehingga perbedaan kecil yang penting dapat hilang sama sekali. Gunakan posisi atau panjang untuk nilai yang akan dibandingkan, dan sisakan luas untuk kesan besaran yang tidak menuntut presisi.
• Kecerahan untuk kategori tanpa urutan. Saluran kecerahan mengundang pembaca menemukan urutan yang tidak ada pada datanya. Kasus ini paling sering muncul pada peta wilayah yang mewarnai kategori administratif dengan intensitas berbeda. Gunakan ragam warna atau bentuk untuk kategori, dan sisakan kecerahan untuk data ordinal.
• Terlalu banyak saluran pada satu tanda. Satu titik yang membawa posisi, warna, bentuk, dan ukuran sekaligus memaksa pembaca memeriksa empat legenda untuk satu kesimpulan. Pemisahan ke beberapa panel biasanya lebih jelas daripada penumpukan saluran.
• Dua kolom pada saluran warna yang bersaing. Dua kolom yang dipetakan ke kecerahan dan ragam warna sekaligus saling menutupi karena keduanya menumpang pada saluran warna. Pisahkan kolom tersebut ke dua panel atau gabungkan kolomnya sebelum digambar.

Ringkasan#

• Tanda adalah geometri dasar grafik berupa titik, garis, area, dan teks, sedangkan saluran adalah atribut tanda yang menerima pemetaan data seperti posisi, panjang, sudut, area, ragam warna, kecerahan, dan bentuk.
• Jenis data menentukan kecocokan saluran, yaitu kuantitatif pada posisi dan panjang, ordinal pada kecerahan, dan kategorikal pada ragam warna serta bentuk.
• Data yang sama yang digambar dengan saluran berbeda menghasilkan kejelasan yang berbeda, dan luas adalah saluran yang paling sering menutupi perbedaan yang penting.

Referensi#

• Pyplot tutorial — Matplotlib — Dokumentasi fungsi bar dan scatter yang digunakan skrip contoh.
• Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods — JSTOR — Eksperimen yang mengukur akurasi tiap saluran dan menjadi dasar kolom kapasitas pada tabel.