Kehutanan UNISMUH Logo
CTRL D

Referensi Visualisasi Data

Katalog jenis grafik yang tersedia di platform ini, palet warna beserta hasil pengukurannya, dan daftar kesalahan yang paling sering terjadi. Dibuat untuk dibuka sambil bekerja — tidak perlu mendaftar kursus apa pun.

53 jenis grafik · 15 palet

Besaran & peringkat

Mana yang lebih besar, dan berapa urutannya?

Bar chart

bar · Comparison

Membandingkan jumlah antar kategori. Pilihan default, dan hampir selalu benar.

Hindari Jangan mewarnai tiap batang berbeda kalau kategorinya tidak punya urutan alami — itu memakai kanal warna untuk mengulang apa yang sudah dikatakan panjang batang.
Batas sampai ~20 batang
Warna sequential satu warna
Kolom Bars Size Colour Split into panels
  1. bars ← jenis
  2. size ← dbh_cm (agg: count)
ax.barh(rekap.index, rekap.values, color="#1F6F4A")
ax.set_xlabel("Jumlah pohon")
Sumbu wajib mulai dari nol. Batang yang dipotong membesarkan selisih kecil.

Grouped bar chart

bar_grouped · Comparison

Membandingkan beberapa seri di dalam tiap kategori.

Hindari Lebih dari 4 grup: batangnya jadi terlalu tipis untuk dibandingkan. Pakai small multiples.
Batas 3-4 grup
Warna kategorikal
Kolom Bars Groups Size
  1. bars ← kabupaten
  2. group ← kondisi
  3. size ← count
df.pivot_table(index="kabupaten", columns="kondisi",
               values="dbh_cm", aggfunc="count").plot.bar(ax=ax)
Mata membandingkan batang bersebelahan, bukan antar kelompok. Susun sesuai pertanyaan.

Radar

radar · Comparison

Profil banyak indikator untuk sedikit entitas.

Hindari Hampir selalu. Luas bidangnya berubah kalau urutan sumbunya diubah, jadi bentuknya membawa makna yang tidak ada di data.
Batas 2-3 seri, 5-8 sumbu
Warna kategorikal
Kolom Measurements (beberapa kolom) Groups
  1. indicators ← beberapa kolom angka
  2. groups ← plot_id
# butuh proyeksi polar; pertimbangkan bar berkelompok dulu
Urutan sumbu adalah pilihan analis dan mengubah kesan. Sebutkan urutannya.

Radial bars

radial · Comparison

Batang melingkar. Untuk data yang memang siklis, misalnya bulan.

Hindari Data non-siklis. Panjang busur lebih sulit dibandingkan daripada panjang lurus.
Batas 8-12 batang
Warna sequential satu warna
Kolom Segments Size
  1. bars ← bulan
  2. size ← curah_hujan_mm
ax = fig.add_subplot(projection='polar')
Batang luar terlihat lebih besar pada nilai yang sama. Itu bias radius.

Opposing / bilateral bars

opposing_bars · Comparison

Dua besaran berlawanan arah dari satu sumbu tengah, misalnya tumbuh vs mati.

Hindari Ketika kedua sisi bukan pasangan yang setara.
Batas sampai ~15 baris
Warna diverging
Kolom Axis / Continuum Upward / positive value Downward / negative value
  1. x ← kelas
  2. up_value ← hidup
  3. down_value ← mati
ax.barh(y, kiri * -1); ax.barh(y, kanan)
Kedua lengan wajib berskala sama, kalau tidak perbandingannya bohong.

Sebaran

Bagaimana bentuk datanya -- di mana menumpuk, di mana ekornya?

Histogram

histogram · Distribution

Bentuk sebaran satu variabel angka. Grafik pertama untuk kolom angka apa pun.

Hindari Membandingkan lebih dari dua kelompok — pakai boxplot atau ridgeline.
Batas satu variabel
Warna satu warna
Kolom Measurement Colour
  1. value ← dbh_cm
  2. opsi bins
ax.hist(df["dbh_cm"], bins=25, color="#2f7d55", edgecolor="white")
Lebar kelas adalah pilihan analis dan mengubah bentuknya. Sebutkan yang dipakai.

Box plot

boxplot · Distribution

Membandingkan sebaran banyak kelompok sekaligus.

Hindari Ketika jumlah data tiap kelompok sangat berbeda — kotaknya sama besar apa pun n.
Batas sampai ~12 kelompok
Warna satu warna
Kolom Groups Measurement
  1. groups ← jenis
  2. value ← dbh_cm
ax.boxplot(data, labels=urutan, patch_artist=True)
Selalu cantumkan n. Urutkan menurut median, bukan abjad.

Ridgeline / joyplot

ridgeline · Distribution

Banyak sebaran bertumpuk — enak untuk melihat pergeseran antar kelompok atau tahun.

Hindari Kalau kelompoknya tidak punya urutan alami.
Batas 5-15 baris
Warna sequential satu warna
Kolom Groups Measurement
  1. groups ← tahun
  2. value ← dbh_cm
# offset tiap kurva kde secara vertikal
Tumpang tindih menyembunyikan ekor. Atur tinggi tumpangnya secara sadar.

Empirical CDF

ecdf · Distribution

Sebaran kumulatif. Menjawab “berapa persen di bawah 30 cm?” secara langsung.

Hindari Pembaca yang belum terbiasa — butuh penjelasan sekali.
Batas 2-4 kurva
Warna kategorikal
Kolom Measurement Colour
  1. value ← dbh_cm
  2. groups ← kabupaten
ax.step(np.sort(x), np.arange(1, len(x)+1) / len(x))
Tidak butuh lebar kelas sama sekali — itu keunggulannya atas histogram.

Violin plot

violin · Distribution

Seperti boxplot tapi memperlihatkan bentuknya — berguna kalau sebarannya berpuncak dua.

Hindari Data sedikit; bentuknya jadi mengarang.
Batas sampai ~8 kelompok
Warna satu warna
Kolom Groups Measurement
  1. groups ← jenis
  2. value ← dbh_cm
ax.violinplot(data, showmedians=True)
Lebar violin adalah kerapatan, bukan jumlah. Dua violin sama lebar bisa beda n.

Q-Q normal plot

qq_plot · Distribution

Memeriksa apakah data mendekati normal sebelum memakai uji yang mengasumsikannya.

Hindari Sebagai grafik laporan — ini alat diagnosis.
Batas satu variabel
Warna satu warna
Kolom Measurement Colour
  1. value ← sisaan
import scipy.stats as st; st.probplot(x, plot=ax)
Ekor yang melengkung normal untuk n kecil. Jangan berlebihan menafsir.

Error bar / range

error_bar · Distribution

Dugaan beserta selang kepercayaannya. Bentuk yang benar untuk hasil inventarisasi.

Hindari Tanpa menyebut apa yang digambar palangnya — SD, SE, atau selang 95% berbeda jauh.
Batas sampai ~15 titik
Warna satu warna
Kolom Bars (categories) Measurement
  1. bars ← plot_id
  2. size ← lbds
  3. opsi error
ax.errorbar(x, rata, yerr=1.96 * se, fmt="o", capsize=3)
Sebutkan di keterangan gambar: SD, SE, atau selang berapa persen.

Strip / jitter plot

strip_plot · Distribution

Menampilkan tiap pengamatan. Jujur untuk data sedikit.

Hindari Ribuan titik — menumpuk jadi garis pekat.
Batas sampai ~10 kelompok
Warna satu warna
Kolom Groups Measurement Colour
  1. groups ← kondisi
  2. value ← dbh_cm
ax.scatter(x + jitter, y, s=8, alpha=0.4)
Jitter wajib, kalau tidak titik saling menimpa dan n tidak terbaca.

Structure pyramid

pyramid · Distribution

Struktur dua sisi — piramida umur, atau kelas diameter dua periode.

Hindari Kalau kedua sisi bukan pembanding yang setara.
Batas 8-15 kelas
Warna diverging
Kolom Classes / tiers Left side volume Right side volume
  1. classes ← kelas_diameter
  2. left_value ← 2015
  3. right_value ← 2025
ax.barh(kelas, -kiri); ax.barh(kelas, kanan)
Skala kedua sisi wajib sama.

2D density grid

density_2d · Distribution

Scatter dengan ribuan titik yang sudah menumpuk jadi gumpalan.

Hindari Data sedikit — pakai scatter biasa.
Batas dua variabel
Warna sequential
Kolom X axis Y axis
  1. x ← dbh_cm
  2. y ← tinggi_m
ax.hexbin(x, y, gridsize=30, cmap="Greens")
Skala warna wajib punya legenda; tanpa itu kerapatannya tidak terbaca.

Density plot

density_1d · Distribution

Histogram yang dihaluskan; enak untuk menumpuk beberapa kelompok.

Hindari Data sedikit — penghalusan mengarang bentuk yang tidak ada di 20 titik.
Batas 2-3 kurva
Warna satu warna
Kolom Measurement Colour
  1. value ← dbh_cm
  2. groups ← jenis
df.groupby("jenis")["dbh_cm"].plot.kde(ax=ax)
Bandwidth-nya sama seperti lebar kelas: pilihan, dan wajib disebut.

Categorical jitter / Likert swarm

categorical_jitter · Distribution

Sebaran jawaban skala (Likert) atau kategori berurut, per pengamatan.

Hindari Kategori nominal tanpa urutan.
Batas 5-7 kategori
Warna kategorikal
Kolom Scale / Categories Cohorts / Groups Colour Label (beberapa kolom)
  1. x ← skor
  2. groups ← pertanyaan
# scatter dengan jitter pada sumbu kategori
Skala berurut memakai ramp satu rona, bukan warna kategori.

3D surface / triangulated mesh

surface_3d · Distribution

Permukaan respons dua peubah. Jarang benar-benar dibutuhkan.

Hindari Hampir selalu — heatmap atau kontur membaca lebih tepat di layar datar.
Batas satu permukaan
Warna sequential
Kolom X coordinate Y coordinate Z elevation / height Label (beberapa kolom)
  1. x, y, z ← kolom angka
ax.plot_trisurf(x, y, z, cmap="viridis")
Sudut pandang menyembunyikan sebagian data. Sebutkan sudutnya, atau jangan pakai.

Komposisi

Bagian ini seberapa besar dari keseluruhan?

Stacked bar chart

bar_stacked · Comparison

Total per kategori, sekaligus susunannya.

Hindari Membandingkan lapisan yang di tengah — hanya lapisan paling bawah punya dasar yang sama, sisanya melayang.
Batas 4-5 lapis
Warna kategorikal
Kolom Bars Stack by Size
  1. bars ← plot_id
  2. group ← kelas
  3. size ← count
silang.plot.barh(stacked=True, ax=ax)
Beri jarak 2px antar segmen, bukan garis tepi.

100% stacked bar chart

bar_stacked_100 · Comparison

Membandingkan proporsi ketika totalnya sangat berbeda.

Hindari Ketika totalnya sendiri penting — grafik ini sengaja membuangnya.
Batas 4-5 lapis
Warna kategorikal
Kolom Bars Stack by Size
  1. bars ← kabupaten
  2. group ← kondisi
(silang.div(silang.sum(axis=1), axis=0) * 100).plot.barh(stacked=True, ax=ax)
Selalu cantumkan n per batang; 100% dari 8 pohon bukan 100% dari 800.

Pie chart

pie · Composition

Sekilas bagian terhadap keseluruhan, ketika satu irisan jelas mendominasi.

Hindari Membandingkan irisan yang berdekatan — mata buruk membandingkan sudut.
Batas maksimal 4-5 irisan
Warna kategorikal
Kolom Slices Size
  1. slices ← kondisi
  2. size ← count
ax.pie(nilai, labels=label, autopct="%1.0f%%")
Kalau perlu persentase tertulis di tiap irisan, sebenarnya kamu butuh batang.

Donut chart

donut · Composition

Sama seperti pie, dengan ruang tengah untuk total.

Hindari Sama seperti pie.
Batas maksimal 4-5 irisan
Warna kategorikal
Kolom Slices Size
  1. slices ← kondisi
  2. size ← count
ax.pie(nilai, wedgeprops=dict(width=0.4))
Angka total di tengah sering jadi bagian paling berguna dari grafiknya.

Treemap

treemap · Composition

Bagian terhadap keseluruhan yang bertingkat, ketika ukurannya sangat timpang.

Hindari Membandingkan kotak yang ukurannya mirip — luas sulit dibandingkan mata.
Batas 2 tingkat, ~20 kotak
Warna kategorikal
Kolom Nesting (beberapa kolom) Size
  1. levels ← kabupaten, jenis
  2. size ← lbds
import squarify; squarify.plot(sizes, label=label, ax=ax)
Kotak kecil tidak muat label. Sisanya harus masuk tooltip atau tabel.

Sunburst

sunburst · Composition

Hierarki melingkar. Bagus untuk memperlihatkan kedalaman bertingkat.

Hindari Lebih dari tiga cincin; cincin luar jadi terlalu tipis.
Batas 2-3 cincin
Warna kategorikal
Kolom Nesting (beberapa kolom) Size
  1. levels ← kabupaten, plot_id, jenis
# plotly.express.sunburst
Sama seperti pie: sudut sulit dibandingkan. Pakai untuk struktur, bukan untuk nilai.

Funnel

funnel · Composition

Penyusutan bertahap: plot direncanakan → disurvei → lolos validasi.

Hindari Tahapan yang bukan himpunan bagian satu sama lain.
Batas 4-7 tahap
Warna ordinal satu rona
Kolom Stages Size
  1. stages ← tahapan
  2. size ← jumlah
ax.barh(tahap, jumlah)  # urut menurun, satu rona menggelap
Tahapan itu berurut, jadi warnanya ramp satu rona — bukan warna kategori.

Waffle / 100-square grid

waffle · Composition

Proporsi sebagai jumlah kotak. Lebih mudah dibaca orang awam daripada pie.

Hindari Lebih dari empat kategori; kotaknya jadi berbintik.
Batas 3-4 kategori
Warna kategorikal
Kolom Categories Percentage / Value Label (beberapa kolom)
  1. slices ← kondisi
  2. size ← count
# 10x10 kotak, satu kotak = 1%
100 kotak berarti pembulatan ke 1%. Sebutkan kalau angkanya lebih halus.

Hubungan

Apakah dua besaran bergerak bersama?

Scatter plot

scatter · Relationship

Hubungan dua besaran, dan bentuk hubungannya — bukan cuma koefisiennya.

Hindari Lebih dari 3 kelompok berwarna: tiap dua titik bisa bersebelahan, dan tidak ada palet di sini yang lolos uji all-pairs di atas tiga.
Batas 3 seri
Warna kategorikal (maks 3)
Kolom X axis Y axis Colour Label (beberapa kolom)
  1. x ← dbh_cm
  2. y ← tinggi_m
  3. color ← jenis
ax.scatter(x, y, s=8, alpha=0.35, color="#2f7d55")
Titik padat wajib pakai alpha, atau ganti ke density_2d.

Bubble chart

bubble · Relationship

Scatter dengan besaran ketiga sebagai ukuran titik.

Hindari Ketika ukuran ketiga itu tidak penting — ia menambah beban baca.
Batas 3 seri
Warna kategorikal (maks 3)
Kolom X axis Y axis Bubble size Colour Label (beberapa kolom)
  1. x, y ← angka
  2. size ← angka ketiga
ax.scatter(x, y, s=nilai * 6, alpha=0.5)
Skalakan menurut luas, bukan jari-jari, kalau tidak selisihnya berlipat.

Heatmap

heatmap · Relationship

Nilai pada perpotongan dua kategori. Bagus untuk matriks korelasi.

Hindari Grid yang terlalu besar untuk diberi label.
Batas grid sampai ~20×20
Warna sequential
Kolom Columns Rows Cell value
  1. x ← kabupaten
  2. y ← jenis
  3. size ← mean dbh
ax.imshow(matriks, cmap="Greens"); fig.colorbar(...)
Satu rona untuk besaran; dua rona hanya kalau ada nol yang bermakna.

Connected scatterplot

connected_scatter · Relationship

Dua besaran yang bergerak bersama sepanjang waktu, jejaknya tergambar.

Hindari Lebih dari dua lintasan — jadi benang kusut.
Batas 1-2 lintasan
Warna satu warna
Kolom X axis Y axis Joined in order of Colour Point size Label (beberapa kolom)
  1. x, y ← angka
  2. order ← tahun
ax.plot(x, y, marker="o"); [ax.annotate(t, (xi, yi)) ...]
Beri label titik awal dan akhir, kalau tidak arah waktunya tidak terbaca.

Parallel coordinates

parallel · Relationship

Banyak peubah sekaligus, mencari kelompok yang berperilaku mirip.

Hindari Sebagai grafik laporan — ini alat penjelajahan.
Batas 4-8 sumbu
Warna kategorikal
Kolom Axes (beberapa kolom) Colour lines by
  1. axes ← beberapa kolom angka
  2. color ← kelompok
pd.plotting.parallel_coordinates(df, 'kelompok', ax=ax)
Urutan sumbu mengubah pola yang terlihat. Coba beberapa urutan.

3D scatter plot

scatter_3d · Correlation

Tiga besaran sekaligus, ketika yang dicari adalah gumpalan.

Hindari Hampir selalu — kedalaman tidak terbaca di gambar diam.
Batas 3 seri
Warna kategorikal (maks 3)
Kolom X coordinate Y coordinate Z coordinate Colour Size Label (beberapa kolom)
  1. x, y, z ← kolom angka
ax = fig.add_subplot(projection="3d"); ax.scatter(x, y, z)
Kalau tidak bisa diputar, dua scatter biasa hampir selalu lebih terbaca.

3D response surface with scatter

surface_scatter_3d · Correlation

Permukaan model dengan titik pengamatan di sekitarnya — memeriksa kecocokan.

Hindari Untuk laporan. Ini alat diagnosis.
Batas satu permukaan
Warna sequential
Kolom X predictor Y predictor Z response Label (beberapa kolom)
  1. x, y, z ← kolom angka
ax.plot_trisurf(...); ax.scatter(x, y, z)
Sisaan lebih jujur dibaca dari grafik sisaan dua dimensi.

3D stem / residuals plot

stem_3d · Correlation

Sisaan sebagai batang tegak dari permukaan model.

Hindari Kecuali kamu memang sedang menerangkan bentuk sisaan kepada orang lain.
Batas satu himpunan
Warna diverging
Kolom X coordinate Y coordinate Z residual / value Colour Label (beberapa kolom)
  1. x, y, z ← kolom angka
# garis vertikal dari z_duga ke z_amatan
Warnai menurut tanda sisaan; itu satu-satunya alasan grafik ini ada.

Waktu & perubahan

Apa yang berubah, ke arah mana?

Line chart

line · Change over time

Perubahan sepanjang waktu. Default untuk deret waktu.

Hindari Kategori tanpa urutan — garis menyiratkan kesinambungan yang tidak ada.
Batas 4-5 garis
Warna kategorikal
Kolom X axis Y axis Colour Split into panels
  1. x ← tahun
  2. y ← hutan_ha
  3. series ← kabupaten
ax.plot(sub["tahun"], sub["hutan_ha"], marker="o", label=kab)
Sumbu Y boleh tidak dari nol, tapi katakan begitu di keterangan.

Area chart

area · Change over time

Satu deret waktu ketika besarannya, bukan cuma trennya, yang penting.

Hindari Beberapa area bertumpang tindih tanpa transparansi.
Batas 1 seri (bertumpuk: 3-4)
Warna satu warna
Kolom X axis Y axis Colour
  1. x ← tahun
  2. y ← hutan_ha
ax.fill_between(x, y, alpha=0.3); ax.plot(x, y)
Area menyiratkan penjumlahan. Jangan pakai untuk besaran yang tidak bisa dijumlah.

Calendar heatmap

calendar · Change over time

Pola harian sepanjang tahun — hari hujan, hari kerja lapangan, titik panas.

Hindari Data yang tidak harian.
Batas 1-3 tahun
Warna sequential
Kolom Date Daily value
  1. date ← tanggal
  2. size ← nilai
# grid minggu x hari sebagai imshow
Satu rona menggelap. Ramp pelangi membuat pola musim jadi mengarang.

Stream graph

stream · Change over time

Komposisi yang berubah sepanjang waktu, ketika bentuk keseluruhan yang jadi cerita.

Hindari Membaca nilai per lapis — dasarnya bergerak, jadi tidak terbaca.
Batas 4-6 lapis
Warna kategorikal
Kolom Time Bands Size
  1. x ← tahun
  2. color ← kelas
  3. size ← luas
ax.stackplot(tahun, *lapis, baseline="wiggle")
Cantik dan sulit dibaca. Kalau angkanya penting, pakai batang bertumpuk.

Bar chart race

race · Change over time

Presentasi dan media sosial. Peringkat yang berubah, teranimasi.

Hindari Laporan tertulis dan cetakan — animasinya tidak ada di sana.
Batas 8-12 batang
Warna kategorikal
Kolom Racers Time Size
  1. bars ← kabupaten
  2. time ← tahun
  3. size ← nilai
# animasi; di luar cakupan matplotlib statis
Warna wajib mengikuti entitas, bukan peringkat, kalau tidak batangnya berganti warna.

Bump chart

bump · Change over time

Perubahan peringkat sepanjang waktu, bukan perubahan nilai.

Hindari Ketika selisih nilainya yang penting — peringkat membuang besarannya.
Batas 5-8 entitas
Warna kategorikal
Kolom Time Lines Ranked by
  1. x ← tahun
  2. color ← kabupaten
# garis pada peringkat, sumbu Y dibalik
Peringkat menyembunyikan seberapa dekat. Dua peringkat bisa selisih 0,1%.

Radial line chart

radial_line · Change over time

Data siklis yang memang melingkar: bulan dalam setahun, jam dalam sehari.

Hindari Data yang tidak siklis.
Batas 2-3 seri
Warna kategorikal
Kolom Around the circle Distance from centre Colour Split into panels
  1. angle ← bulan
  2. size ← curah_hujan_mm
ax = fig.add_subplot(projection="polar"); ax.plot(theta, r)
Bulan Desember dan Januari harus bersentuhan, kalau tidak siklusnya putus.

Aliran & perpindahan

Apa berpindah dari mana ke mana?

Sankey / flow

sankey · Flow

Perpindahan bervolume antar keadaan: tutupan 2015 → tutupan 2025.

Hindari Lebih dari selusin simpul — pitanya saling menyilang jadi tak terbaca.
Batas sampai ~12 simpul
Warna kategorikal
Kolom From To Amount
  1. source ← kelas_2015
  2. target ← kelas_2025
  3. size ← luas_ha
# plotly.graph_objects.Sankey
Total masuk wajib sama dengan total keluar, kalau tidak diagramnya berbohong.

Chord / circular flow

chord · Flow

Perpindahan dua arah antar sedikit kelompok.

Hindari Ketika arahnya penting dan pembacanya belum terbiasa.
Batas 6-10 simpul
Warna kategorikal
Kolom From To Amount / Area
  1. source, target ← kategori
  2. size ← nilai
# di luar matplotlib; pakai holoviews atau d3
Indah, dan sering kalah jelas dari matriks transisi yang sama.

Alluvial / multi-stage flow

alluvial · Flow

Sankey dengan lebih dari dua tahap.

Hindari Lebih dari empat tahap.
Batas 3-4 tahap
Warna kategorikal
Kolom Stages (in order) (beberapa kolom) Weight / Area
  1. stages ← kelas_2015, kelas_2020, kelas_2025
# plotly / d3-sankey bertahap
Urutan kategori di tiap tahap mengubah jumlah persilangan. Urutkan sadar.

Directed network flow

network_flow · Flow

Hubungan berarah yang bukan hierarki.

Hindari Ketika tata letaknya acak — posisi simpul akan dibaca sebagai makna.
Batas sampai ~30 simpul
Warna kategorikal
Kolom From node To node Flow volume Node group
  1. source, target ← simpul
  2. category ← jenis simpul
import networkx as nx; nx.draw(G, ax=ax)
Tata letak paksa berubah tiap dijalankan. Kunci seed-nya, atau posisinya bohong.

Transition matrix

transition_matrix · Flow

Perpindahan yang sama dengan Sankey, tapi angkanya terbaca tepat.

Hindari Ketika yang dicari adalah kesan besaran alirannya.
Batas sampai ~12×12
Warna sequential
Kolom Initial class (rows) Final class (columns) Area / Count
  1. source ← kelas_2015
  2. target ← kelas_2025
pd.crosstab(awal, akhir)  # lalu imshow
Diagonal biasanya mendominasi. Pertimbangkan menyembunyikannya.

Waterfall / balance flow

waterfall · Flow

Bagaimana satu angka berubah dari awal ke akhir, langkah demi langkah.

Hindari Ketika langkahnya tidak benar-benar berjumlah ke total.
Batas 5-10 langkah
Warna diverging
Kolom Steps / Factors Change amount
  1. bars ← langkah
  2. size ← perubahan
# batang dengan bottom=kumulatif berjalan
Naik dan turun wajib beda warna, dan totalnya harus benar-benar cocok.

Tree / branching flow

tree · Flow

Hierarki yang sebenarnya: taksonomi, susunan kawasan.

Hindari Data yang bukan hierarki.
Batas 3-4 tingkat
Warna kategorikal
Kolom Levels (beberapa kolom) Volume / Value
  1. levels ← famili, genus, jenis
# networkx atau scipy dendrogram
Kedalaman tidak sama dengan kepentingan. Cabang panjang bukan berarti besar.

Fan chart

origin_fan · Flow

Satu titik asal menyebar ke banyak tujuan.

Hindari Banyak asal sekaligus — jadi jaring.
Batas satu asal
Warna kategorikal
Kolom Destination Change Starting point
  1. origin ← asal
  2. target ← tujuan
  3. value ← jumlah
# busur dari satu titik
Panjang busur bukan jarak. Katakan begitu, atau pakai peta.

Ruang

Di mana letaknya?

Choropleth map

choropleth · Map

Nilai per wilayah administratif, ketika batasnya memang unit analisisnya.

Hindari Jumlah mutlak — wilayah luas akan selalu menang. Pakai nilai per hektar atau persen.
Batas 5-7 kelas
Warna sequential
Kolom Area Value
  1. region ← kabupaten
  2. size ← nilai per ha
gdf.plot(column='nilai', cmap='Greens', legend=True, ax=ax)
Luas wilayah bukan besaran data. Ini kesalahan nomor satu pada peta tematik.

Proportional symbol map

symbol_map · Map

Besaran di satu titik — plot, desa, stasiun. Tidak bias oleh luas wilayah.

Hindari Titik yang sangat berdekatan; lingkarannya saling menimpa.
Batas 3 seri
Warna kategorikal (maks 3)
Kolom Location Value Colour
  1. region ← plot_id
  2. size ← lbds_per_ha
ax.scatter(lon, lat, s=nilai * 6); ax.set_aspect("equal")
Skalakan menurut luas lingkaran, dan jaga aspek peta tetap 1:1.

Satu angka

Kadang jawabannya bukan grafik.

Table

table · Detail

Ketika angka tepatnya yang dibutuhkan, atau ketika kelasnya lebih dari tujuh.

Hindari Ratusan baris tanpa pencarian atau pengurutan.
Batas sampai ~20 baris di layar
Warna tanpa warna data
Kolom Columns (beberapa kolom)
  1. columns ← kolom yang ditampilkan
print(rekap.to_string())
Setiap grafik sebaiknya punya kembaran tabel — itu versi yang bisa dibaca pembaca dengan pembaca layar.

Big number

number · Detail

Ketika jawabannya satu angka. Sering ini bentuk yang benar, dan hampir selalu dilewatkan.

Hindari Ketika pembaca perlu membandingkan — satu angka tidak punya pembanding.
Batas satu nilai
Warna tanpa warna data
Kolom Value Split by
  1. size ← nilai
  2. opsi format
print(f"{nilai:,.1f} m2/ha")
Grafik batang berisi satu batang selalu lebih baik ditulis sebagai angka.

Apakah ini memang grafik?

Langkah yang paling sering dilewati, dan paling murah. Kadang jawaban yang benar bukan grafik sama sekali.

Datanya berupa…PakaiBukan
Satu nilai sekarang, mungkin dengan trennyaAngka besar (stat tile), boleh dengan sparkline kecilGrafik batang berisi satu batang
Beberapa angka utamaDeretan angka besar bersebelahanGrafik batang berkelompok
Satu rasio terhadap batasMeteran dengan jalur skala yang samaPie dengan dua irisan
Lebih dari sekitar tujuh kelas yang semuanya berartiTabel, atau tabel bersama grafikMenambah warna
Angka tepat yang akan dikutip orangTabelGrafik yang nilainya harus ditebak dari sumbu

Tugas pembaca menentukan bentuknya

Putuskan ini sebelum memilih warna. Hampir semua grafik yang buruk memilih warna lebih dulu.

Yang harus dilakukan pembacaBentuk defaultTugas warna
Membandingkan besaran, kecil ke besarbatang; heatmap untuk gridsequential satu rona
Tren sepanjang waktugaris; area untuk satu serisequential atau 1 kategori
Membedakan seri yang berbedabatang berkelompok/bertumpuk, multi-gariskategorikal
Satu seri adalah intinya, sisanya kontekspenekanan: satu diwarnai, sisanya abu-abu1 rona + abu
Di atas / di bawah suatu garis dasarbatang diverging, atau garis vs baselinediverging
Bagian terhadap keseluruhanbatang bertumpuk (mendatar kalau namanya panjang)kategorikal
Skala berurut (Likert, setuju↔tidak)batang bertumpuk diverging, berpusat di netraldiverging
Sebelum → sesudah per itemdumbbell1 rona, 2 tingkat

Berapa seri yang muat

Jangan pernah menyelesaikan “serinya terlalu banyak” dengan menambah warna baru.

SeriPerlakuan
1-3Warna saja sudah nyaman untuk semua orang; beri label langsung.
4Bentuk bersebelahan (tumpukan, batang, garis) masih aman, tapi label langsung jadi wajib. Bentuk all-pairs — scatter, bubble, peta — berhenti di tiga.
5-6Batas lunak; butuh legenda atau small multiples.
7-8Langit-langit. Lewat itu, lipat sisanya jadi “Lainnya” atau pecah jadi beberapa panel.
9+Tidak pernah dengan menambah warna baru. Warna ke-9 tidak bisa dibedakan dari yang sudah ada oleh pembaca dengan buta warna.
Kenapa halaman ini ada

render.js menyimpan tabel PALETTE_META yang menyatakan tiap palet aman atau tidak. Pernyataan itu ditulis tangan, dan audit 2026-08-30 menemukan 6 di antaranya keliru — ke dua arah. Angka di halaman ini hasil pengukuran, bukan pernyataan.

Ambang yang dipakai: ΔE OKLab ×100, protanopia dan deuteranopia disimulasikan (Machado-Oliveira-Fernandes 2009, severity 1,0). Pasangan bersebelahan ≥ 8; pita 6-8 hanya sah dengan label langsung; lantai penglihatan normal ≥ 15 dan itu gerbang keras.

Pilih menurut tugas warnanya

TugasPaletCatatan
Identitas (kategori)defaultDengan label langsung pada tiap seri. Batasi 5 seri; untuk scatter dan peta, 3.
Besaran (sequential)monoSatu rona, terang ke gelap. Ambil 6 langkah, bukan 8.
Besaran, data kontinuviridisKetika grafiknya akan dicetak hitam-putih atau dibaca dari proyektor.
Kutub (diverging)earthDua rona berlawanan dengan titik tengah netral. Titik tengah wajib nol.
Konteks yang diredamslateUntuk seri latar di grafik penekanan (emphasis).

Semua palet, terukur

tropical Aman render.js: qualitative, tidak safe — tidak cocok

Ditandai tidak aman di render.js, padahal terukur paling terpisah dari semua palet kualitatif di sini. Kelemahannya bukan keterbacaan melainkan kontras: tiga warnanya terlalu terang di atas latar putih, jadi butuh garis tepi atau label.

8 warna Lolos gerbang ΔE 8 dan lantai penglihatan normal. buta warna ΔE 11.3 (protan) normal ΔE 22.6 all-pairs ΔE 0.3
brand Perlu label render.js: qualitative, tidak safe

Palet rumah. Tepat di batas bawah: ΔE 6,1 hanya sah kalau setiap seri diberi label langsung. Tiga warnanya juga di bawah lantai kroma, artinya terbaca abu-abu dan berhenti membedakan apa pun.

10 warna Di pita 6-8: sah hanya kalau tiap seri diberi label langsung. buta warna ΔE 6.1 (protan) normal ΔE 15.9 all-pairs ΔE 2.1
default Perlu label render.js: qualitative, safe — tidak cocok

Okabe-Ito, set warna kategori yang paling banyak dipakai di dunia dan memang aman sebagai himpunan. Yang tidak aman adalah urutannya: slot 3 dan 4 bersebelahan pada ΔE 7,6 untuk deuteranopia. Pakai label langsung, atau batasi 3 seri.

8 warna Di pita 6-8: sah hanya kalau tiap seri diberi label langsung. buta warna ΔE 7.6 (deutan) normal ΔE 20.0 all-pairs ΔE 1.9
canopy Ramp besaran render.js: sequential, tidak safe

Hijau muda, cocok untuk peta tutupan. Empat langkah teratasnya berjarak ΔL di bawah 0,06 sehingga menyatu; ambil 4 langkah saja.

7 warna Dinilai dari kecerahan, bukan keterpisahan. kecerahan monoton
magma Ramp besaran render.js: sequential, safe

Sama seperti viridis, dengan ujung gelap yang lebih pekat.

10 warna Dinilai dari kecerahan, bukan keterpisahan. kecerahan monoton
mono Ramp besaran render.js: sequential, safe

Satu rona biru, gelap ke terang. Pilihan paling aman untuk besaran. Dua langkah paling terang berjarak ΔL 0,05 -- terlalu dekat untuk dibedakan, jadi pakai 6 langkah, bukan 8.

8 warna Dinilai dari kecerahan, bukan keterpisahan. kecerahan monoton
slate Ramp besaran render.js: sequential, safe

Abu-abu netral. Untuk seri konteks yang sengaja diredam.

7 warna Dinilai dari kecerahan, bukan keterpisahan. kecerahan monoton
viridis Ramp besaran render.js: sequential, safe

Perceptually uniform dan tetap terbaca dalam grayscale -- standar de facto untuk data kontinu. Ia memakai banyak rona secara sengaja, jadi aturan “satu rona” tidak berlaku untuknya.

10 warna Dinilai dari kecerahan, bukan keterpisahan. kecerahan monoton
emerald Label salah render.js: sequential, tidak safe — tidak cocok

Ditandai sequential tapi kecerahannya tidak menaik: 0,38 → 0,85 lalu turun ke 0,26. Sebagai ramp besaran ia membaca terbalik di dua langkah terakhir.

7 warna Mengaku sequential tapi kecerahannya tidak monoton. kecerahan TIDAK monoton
ocean Label salah render.js: sequential, tidak safe — tidak cocok

Sama: kecerahannya naik lalu turun. Bukan ramp.

8 warna Mengaku sequential tapi kecerahannya tidak monoton. kecerahan TIDAK monoton
sunset Label salah render.js: sequential, tidak safe — tidak cocok

Tidak monoton, dan rentang rona 84° -- terlalu lebar untuk ramp satu rona. Praktis ini palet kualitatif yang salah label.

8 warna Mengaku sequential tapi kecerahannya tidak monoton. kecerahan TIDAK monoton
diverging Jangan untuk kategori render.js: diverging, tidak safe

Merah ke hijau dengan titik tengah krem: benar sebagai diverging, dan titik tengahnya memang netral. Untuk kategori, ΔE 10,0 pada penglihatan normal ada di bawah lantai.

7 warna Gagal lantai penglihatan normal -- label tidak menolong. buta warna ΔE 9.8 (deutan) normal ΔE 10.0 all-pairs ΔE 5.1
earth Jangan untuk kategori render.js: diverging, safe — tidak cocok

Ditandai aman, terukur paling buruk kedua. Sebagai palet diverging ia benar -- coklat ke teal dengan titik tengah pucat -- dan di situlah tempatnya. Sebagai kategori ia gagal.

8 warna Gagal lantai penglihatan normal -- label tidak menolong. buta warna ΔE 4.9 (protan) normal ΔE 7.0 all-pairs ΔE 4.9
earthy Jangan untuk kategori render.js: qualitative, tidak safe

Yang paling bermasalah. ΔE 7,5 pada penglihatan normal berarti tidak seorang pun bisa memisahkan dua serinya, dan lima dari delapan warnanya di bawah lantai kroma. Jangan dipakai untuk identitas seri.

8 warna Gagal lantai penglihatan normal -- label tidak menolong. buta warna ΔE 2.9 (protan) normal ΔE 7.5 all-pairs ΔE 0.4
forest Jangan untuk kategori render.js: qualitative, tidak safe

Lolos uji buta warna tapi gagal lantai penglihatan normal: dua hijau termudanya berjarak ΔE 10,5 untuk mata yang sehat sekalipun. Ini sebenarnya dua ramp (hijau dan ungu) yang dipakai sebagai kategori.

8 warna Gagal lantai penglihatan normal -- label tidak menolong. buta warna ΔE 8.8 (protan) normal ΔE 10.5 all-pairs ΔE 8.8

Perbaikan gratis untuk default

Delapan rona Okabe-Ito yang sama, tidak satu pun warnanya diubah — hanya urutannya. Dicari menyeluruh atas seluruh 40.320 kemungkinan urutan.

UrutanΔE buta warnaΔE normalWarna
sekarang 7.6 20.0
usulan 11.0 20.4

Skala kontinu

green
heat
blue
diverging

Enam pemeriksaan

PemeriksaanIsinyaCara
Rona tetap dan berurutDelapan keluarga warna dengan urutan yang tidak berubah. Urutan itulah mekanisme keamanannya.struktural
Pita kecerahanOKLCH L kira-kira 0,43-0,77 pada mode terang; 0,48-0,67 pada mode gelap.terukur
Lantai kromaOKLCH C ≥ 0,10. Di bawah itu sebuah rona terbaca abu-abu dan berhenti menandai identitas.terukur
Keterpisahan buta warnaΔE OKLab ×100 ≥ 8 di bawah simulasi protanopia dan deuteranopia. Pita 6-8 hanya sah dengan label langsung.terukur
Lantai penglihatan normalPasangan terburuk ≥ 15 tanpa simulasi. Ini gerbang keras: label tidak memaafkannya.terukur
Kontras terhadap latar≥ 3:1 untuk marka, kecuali nilainya terbaca dengan cara lain.terukur

Daftar periksa untuk gambar yang sudah jadi. Kalau grafikmu cocok dengan salah satu entri di bawah, ia keliru — dan perbaikannya disebutkan, bukan disiratkan.

Warna & pengkodean

Dua sumbu Y pada satu grafik

Penjajaran kedua skala itu sewenang-wenang, jadi grafiknya mengarang korelasi yang tidak ada di data. Ini kesalahan grafik nomor satu.

Perbaikannya: Dua grafik terpisah, small multiples, atau indekskan keduanya ke basis yang sama (=100 di t0) pada satu sumbu.

Warna berubah ketika data disaring

Pembaca yang sudah belajar “Maros itu biru” jadi tersesat begitu satu kabupaten dihilangkan dan sisanya berganti warna.

Perbaikannya: Warna mengikuti entitas, bukan nomor barisnya. Yang bertahan mempertahankan ronanya.

Ramp nilai pada kategori tanpa urutan

Mewarnai tiap batang makin gelap makin besar, padahal kategorinya tidak berurut. Ini memakai satu-satunya kanal bebas untuk mengulang apa yang sudah dikatakan panjang batang.

Perbaikannya: Satu seri → satu warna untuk semua batang. Kategori berurut → ramp satu rona.

Ramp pelangi untuk besaran

Rona tidak punya urutan bawaan, jadi pembaca tidak tahu mana yang lebih besar tanpa melihat legenda setiap kali.

Perbaikannya: Satu rona, terang ke gelap. Viridis kalau butuh perceptually uniform.

Rona di titik tengah diverging, atau dua kutub yang sama-sama dingin

Titik tengah harus terbaca “tidak ada apa-apa”, dan kedua kutub harus terbaca berlawanan. Biru↔toska gagal keduanya.

Perbaikannya: Dua rona berlawanan panas/dingin, dengan abu-abu netral di tengah.

Menebak keamanan buta warna

“Ini kelihatannya sudah cukup beda” tidak bisa diuji dan biasanya keliru.

Perbaikannya: Jalankan pemeriksa. Target ΔE ≥ 8; 6-8 hanya sah dengan label langsung.

Pemilihan bentuk

Delapan warna kategori padahal ceritanya satu angka

Cara paling umum sebuah grafik meleset dari maksudnya.

Perbaikannya: Penekanan: satu seri berwarna, sisanya abu-abu. Atau tulis saja angkanya.

Pie untuk membandingkan nilai yang berdekatan

Mata manusia buruk membandingkan sudut. Dua irisan 24% dan 27% tampak sama.

Perbaikannya: Batang, atau angkanya langsung. Pie hanya untuk kesan sekilas, maksimal 5 irisan.

Peta choropleth untuk jumlah mutlak

Kabupaten yang luas akan selalu tampak paling besar, karena luasnya sendiri ikut terbaca sebagai besaran.

Perbaikannya: Bagi dengan luas atau jumlah penduduk. Atau pakai peta simbol proporsional.

Marka & kerangka

Angka tertulis di setiap titik data

Nilai di samping tiap titik jadi berantakan dan akhirnya tidak dibaca siapa pun.

Perbaikannya: Label selektif: titik ujung, titik ekstrem, atau seri yang jadi inti cerita.

Garis kisi putus-putus, atau kisi yang tebal

Garis putus-putus terbaca sebagai “proyeksi” atau “ambang”, padahal cuma kisi.

Perbaikannya: Kisi dan sumbu berupa garis rambut menerus, satu tingkat dari warna latar.

Garis tepi mengelilingi tiap marka untuk memisahkannya

Menambah berat visual pada bagian yang bukan data.

Perbaikannya: Jarak 2px berwarna latar antar isian; cincin 2px berwarna latar pada marka bertumpuk.

Label terpotong oleh batang atau segmen yang terlalu kecil

Huruf pertama atau terakhir hilang, dan pembaca tidak sadar ada yang hilang.

Perbaikannya: Beri label di dalam marka hanya kalau muat beserta paddingnya; kalau tidak, pindahkan ke luar ujung batang atau ke tabel.

Keterbacaan & akses

Tooltip sebagai satu-satunya cara membaca nilai

Tidak ada pada cetakan, tidak ada bagi pembaca layar, tidak ada pada tangkapan layar.

Perbaikannya: Tooltip menambah, tidak pernah menjadi gerbang. Setiap nilai juga terbaca dari label atau dari tabel kembarannya.

Grafik tanpa kembaran tabel

Pembaca dengan pembaca layar tidak mendapat apa pun dari SVG tanpa teks.

Perbaikannya: Setiap grafik punya versi tabel. Di kursus ini: cetak df.to_string() di bawah tiap gambar.

Identitas seri hanya dari warna

Sekitar 8% laki-laki tidak bisa memisahkan merah dari hijau.

Perbaikannya: Untuk ≥ 2 seri selalu ada legenda, dan sampai 4 seri juga diberi label langsung.

Theme Customization

Layout:
Vertical
Horizontal
Semi Box
Content Width:
Default
Box
Layout Direction:
LTR
RTL
Layout Mode:
Light
Dark
System
Sidebar Size:
Default
Medium
Icon
Icon hover
Sidebar Color:
Light
Dark