Encoding warna, ukuran, dan simbol

Idenya

Scatter plot menunjukkan dua variabel: x dan y. Pertanyaan sungguhan sering melibatkan lebih banyak: "apakah produk mahal terjual lebih sedikit, dan apakah itu berbeda per kategori?" Plotly memungkinkanmu menyandikan variabel tambahan di saluran visual:

Setiap saluran tambahan menambah informasi, sekaligus usaha bagi pembaca. Keterampilannya adalah mengetahui saluran mana yang cocok untuk variabel mana, dan kapan harus berhenti.

import pandas as pd
import plotly.express as px

sales = pd.read_csv("sales.csv")
completed = sales[sales["status"] == "completed"]
products = (completed.groupby(["product", "category"], as_index=False)
            .agg(price=("unit_price", "first"), units=("quantity", "sum"), revenue=("revenue", "sum")))
print(products.head())

              product     category   price  units  revenue
0   Arabica Gayo 250g       Coffee   95000      7   665000
1        Bamboo Plant         Home   60000      4   240000
2       Desk Lamp LED  Electronics  245000      6  1470000
3      Desk Organizer   Stationery   89000      3   267000
4  French Press 600ml      Kitchen  185000      2   370000

Warna untuk kategori

Scatter plot harga terhadap unit terjual menampilkan setiap produk sebagai satu titik. Tapi apakah kopi-kopi mengumpul di satu sudut dan elektronik di sudut lain? Mewarnai titik-titiknya berdasarkan kategori menjawabnya sekilas:

fig = px.scatter(products, x="price", y="units", color="category", hover_name="product",
                 title="Price vs units sold, by category")
fig.show()
print(len(fig.data), [t.name for t in fig.data])

5 ['Coffee', 'Home', 'Electronics', 'Stationery', 'Kitchen']

Dengan color= kategoris, Express membuat satu trace per kategori, masing-masing dengan warna dan entri legendanya sendiri. Mengklik entri legenda menyembunyikan atau menampilkan kategori itu, interaktivitas gratis.

Tetapkan warna tertentu untuk kategori tertentu dengan color_discrete_map, supaya "Coffee" selalu cokelat di setiap grafik laporanmu:

palette = {"Coffee": "#8B5E3C", "Kitchen": "#5669FD", "Electronics": "#262B80",
           "Home": "#1FA37A", "Stationery": "#F59E0B"}
fig = px.scatter(products, x="price", y="units", color="category",
                 color_discrete_map=palette, hover_name="product")
fig.show()

Warna untuk angka

Berikan kolom angka, dan warna menjadi gradien dengan color bar:

fig = px.scatter(products, x="price", y="units", color="revenue",
                 color_continuous_scale="Blues", hover_name="product")
fig.show()
print(len(fig.data), fig.layout.coloraxis.colorbar.title.text)

1 revenue

Kali ini satu trace, dengan skala kontinu. Pakai skala sequential (terang ke gelap, seperti Blues, Viridis) untuk besaran yang bergerak dari rendah ke tinggi. Pakai skala diverging (seperti RdBu) hanya untuk nilai yang punya titik tengah bermakna, seperti pertumbuhan di sekitar 0%.

Ukuran untuk besaran

size= menskalakan luas marker berdasarkan angka positif, mengubah scatter menjadi bubble chart:

fig = px.scatter(products, x="price", y="units", size="revenue", color="category",
                 hover_name="product", size_max=40)
fig.show()

size_max mengatur ukuran bubble terbesar dalam piksel. Ukuran adalah saluran yang paling tidak presisi: orang bisa membedakan besar dan kecil, tapi tidak 2,1 jt dan 2,4 jt. Pakai untuk gambaran besaran kasar, dan simpan angka persisnya di hover.

Simbol untuk sedikit kategori

Warna bukan satu-satunya cara membedakan kelompok. Tidak semua orang melihat warna dengan cara yang sama, dan grafik sering dicetak hitam-putih. symbol= memberi setiap kategori bentuk marker sendiri, di sini untuk menampilkan channel website dan aplikasi:

by_channel = (completed.groupby(["product", "channel"], as_index=False)
              .agg(price=("unit_price", "first"), units=("quantity", "sum")))
fig = px.scatter(by_channel, x="price", y="units", symbol="channel", color="channel",
                 hover_name="product")
fig.show()

Simbol cocok untuk dua atau tiga kategori. Lebih dari itu, pembaca tidak bisa membedakan wajik dari segi lima dalam sekilas. Memakai warna dan simbol untuk variabel yang sama (seperti di atas) adalah praktik yang baik: tetap berfungsi untuk pembaca buta warna dan saat dicetak hitam putih.

Sorot, jangan menghias

Warna paling ampuh saat ia menyorot. Untuk menekankan satu kategori, beri warna padanya dan biarkan yang lain abu-abu:

products["highlight"] = products["category"].where(products["category"] == "Electronics", "Other")
fig = px.scatter(products, x="price", y="units", color="highlight",
                 color_discrete_map={"Electronics": "#5669FD", "Other": "#C5CAD6"},
                 hover_name="product", title="Electronics: high price, steady sales")
fig.show()

Judulnya menyatakan temuannya, dan warnanya menunjuk ke sana. Itulah grafik yang berargumen, alih-alih meminta pembaca mencarinya sendiri.

Berapa banyak saluran yang terlalu banyak?

x + y + warna adalah titik ideal untuk sebagian besar grafik. Tambahkan ukuran atau simbol hanya saat variabel tambahan itu menjawab pertanyaan yang sedang diajukan. Kalau sebuah grafik butuh satu paragraf untuk menjelaskan encoding-nya, pecah menjadi dua grafik, atau pakai facet (modul berikutnya).

Mengapa ini penting untuk kode yang bersih

Perlakukan warna seperti konstanta: definisikan dictionary palet sekali (CATEGORY_COLORS), import di mana-mana, dan setiap grafik di laporan tetap konsisten. Nilai hex yang ditulis manual dan tersebar di berbagai notebook akan menyimpang, dan akhirnya "Coffee" cokelat di satu grafik dan biru di grafik berikutnya.

Rangkuman

• color= kategoris membuat satu trace per kategori dengan legenda; color= angka membuat gradien.
• color_discrete_map menetapkan warna kategori; color_continuous_scale memilih gradien (sequential untuk besaran, diverging di sekitar titik tengah).
• size= (dengan size_max) menyandikan besaran kasar; symbol= cocok untuk 2-3 kategori.
• Pasangkan warna dengan simbol demi aksesibilitas.
• Pakai warna untuk menyorot satu hal; buat sisanya abu-abu; nyatakan temuannya di judul.