Hover, select, dan brush

Pada grafik interaktif, data dapat menjawab pertanyaan tepat di bawah kursor dan menanggapi kelompok yang dipilih pembaca. Topik ini mengajarkan dua mekanisme plotly untuk keperluan itu, yaitu hovertemplate yang menata teks hover dan seleksi yang mengelompokkan titik melalui box select, lasso, serta brush rentang. Demo yang dibangun di sini memuat kedua mekanisme dalam satu figur scatter dari dataset nilai ujian, dan teks hovernya diperiksa melalui JSON figur.

Teks di bawah kursor#

Hover adalah label yang muncul ketika kursor berada di atas satu tanda. Plotly mengisi label itu secara default dengan nilai x dan y dari trace, sedangkan isinya dapat diatur penuh melalui hovertemplate, yaitu string berisi token yang diganti nilai data pada saat hover terjadi. Token %{x} dan %{y} mewakili nilai kedua sumbu, token %{customdata[i]} mewakili kolom tambahan yang dikirim melalui argumen custom_data, sedangkan tag <extra></extra> mengosongkan kotak sekunder yang biasanya berisi nama trace. Template ditulis satu kali per trace dan berlaku untuk seluruh titik pada trace tersebut, sehingga 24 titik pun hanya membutuhkan satu string.

Susunan kolom pada custom_data menentukan indeks token yang menggunakannya. Kolom pertama menjadi %{customdata[0]}, kolom kedua menjadi %{customdata[1]}, dan seterusnya mengikuti urutan penulisannya. Teks lain di sekitar token ditulis apa adanya, sehingga template dapat membentuk kalimat lengkap dan bukan sekadar pasangan angka.

Demo hover dan seleksi#

Skrip berikut memetakan persentase kehadiran ke sumbu x dan nilai matematika ke sumbu y. Kolom siswa dan kelas dikirim sebagai custom_data, lalu hovertemplate menyusunnya menjadi kalimat yang menyebut nama siswa beserta angkanya. Penataan berikutnya mengaktifkan rangeslider di sumbu x, yaitu pita kecil di bawah sumbu yang rentangnya dapat digeser sebagai brush, serta dragmode select agar seretan kursor di area utama menggambar kotak seleksi. Demo disimpan sebagai index.html, dan hovertemplate yang tertanam pada figur dicetak untuk pemeriksaan.

import pandas as pd
import plotly.express as px

# dataset kanonik jalur, disalin ke folder topik
tabel = pd.read_csv("nilai_ujian.csv")

fig = px.scatter(
    tabel,
    x="hadir_persen",
    y="nilai_matematika",
    color="kelas",
    custom_data=["siswa", "kelas"],
    labels={"hadir_persen": "Kehadiran (%)", "nilai_matematika": "Nilai matematika"},
)

# hovertemplate menata teks di bawah kursor; <extra></extra> mengosongkan
# kotak sekunder, dan customdata membawa nama siswa serta kelasnya
fig.update_traces(
    hovertemplate="%{customdata[0]} (%{customdata[1]}): hadir %{x}%, nilai %{y}<extra></extra>",
    marker=dict(size=11),
)

# rangeslider di sumbu x menyediakan brush rentang, sedangkan dragmode
# select membuat seretan kursor di area utama menggambar kotak seleksi
fig.update_xaxes(rangeslider=dict(visible=True))
fig.update_layout(dragmode="select")

fig.write_html("index.html", include_plotlyjs="inline")
print(fig.to_plotly_json()["data"][0]["hovertemplate"])
print("berkas index.html tersimpan")

%{customdata[0]} (%{customdata[1]}): hadir %{x}%, nilai %{y}<extra></extra>
berkas index.html tersimpan

Keluaran menegaskan bahwa hovertemplate adalah atribut pada trace, bukan teks yang ditulis untuk tiap titik. Satu string dengan token yang sama berlaku untuk seluruh titik, dan penggantian tokennya dikerjakan plotly.js pada saat halamannya dibuka. Pembacaan JSON figur seperti ini juga menjadi cara pemeriksaan yang murah, karena teks yang keliru terlihat pada keluaran sebelum demo dibuka di browser.

Demo di atas menyediakan tiga alat sekaligus. Arahkan kursor ke satu titik untuk membaca nama siswa beserta kehadiran dan nilainya, seret kursor di area utama untuk menggambar kotak seleksi, lalu geser rentang pada pita di bawah sumbu x untuk menyaring titik yang tampil. Tombol lasso pada bilah alat di kanan atas mengganti kotak seleksi dengan garis bebas yang mengelilingi titik-titik secara manual.

Seleksi dan brush#

Seleksi menjawab pertanyaan yang berbeda dari hover. Hover mengenali satu titik, sedangkan seleksi menerima banyak titik sekaligus dan membuat figur menanggapi kelompok itu. Pada plotly.js, seretan dengan dragmode select menggambar kotak seleksi, seretan dengan dragmode lasso menggambar garis bebas, dan kumpulan titik yang tertutup disimpan sebagai data seleksi yang dapat digunakan untuk penataan ulang atau sebagai masukan aplikasi yang lebih besar. Brush adalah alat seleksi berupa rentang, dan rangeslider pada demo di atas adalah bentuknya di sumbu x, yaitu pita yang rentangnya digeser untuk menyaring titik. Ketiganya berbagi satu prinsip, yaitu kelompok yang dipilih menjadi masukan bagi figur, bukan sekadar sorotan warna.

Dua kelompok alat tersebut menjawab dua pertanyaan yang juga berbeda. Pertanyaan “ini titik apa” dijawab hover pada satu tanda, sedangkan pertanyaan “apa yang terjadi pada kelompok yang dipilih” dijawab seleksi dan brush pada kumpulan tanda. Menyandingkan keduanya dalam satu grafik membuat pembaca dapat berpindah dari menemukan satu kasus ke menelusuri pola kelompoknya tanpa keluar dari gambar.

Pengaturan ini membawa satu kelemahan yang jarang disadari. Hover hanya menjawab untuk titik yang tampil, dan titik yang dikecualikan dari rentang, baik karena filter, rentang sumbu, maupun brush yang digeser, tidak pernah menerima kursor, sehingga pertanyaan di bawah kursor tidak pernah menyentuh data yang tidak digambar. Label hover juga menampilkan angka dengan presisi penuh, sedangkan posisi titiknya mengikuti sumbu yang rentangnya ditetapkan pembuat grafik, sehingga angka yang rapi dapat muncul di atas konteks yang terpotong. Karena itu, keputusan tentang apa yang tampil dan apa yang dikirim ke hovertemplate merupakan keputusan kejujuran, bukan sekadar penataan tampilan.

Ringkasan#

• Hovertemplate menata teks hover melalui token seperti %{x}, %{y}, dan %{customdata[i]}, dengan tag <extra></extra> mengatur kotak sekundernya.
• Seleksi melalui box select dan lasso menerima banyak titik sekaligus, sedangkan rangeslider menyediakan brush rentang pada satu sumbu.
• Hover hanya menjawab untuk titik yang tampil, sehingga data yang dikecualikan dari rentang tidak pernah terbaca di bawah kursor.

Referensi#

• Hover Text and Formatting in Python — Plotly — Dokumentasi hovertemplate beserta token teksnya.
• Interactive HTML Export in Python — Plotly — Cara menyimpan figur sebagai HTML mandiri seperti demo topik ini.
• Axes in Python — Plotly — Rujukan rangeslider dan penataan rentang sumbu yang menyertainya.