Plotly Express

Plotly express adalah API Python yang menyusun grafik web interaktif dari satu panggilan fungsi dengan argumen pemetaan. Topik ini menggunakan px.scatter untuk membangun demo interaktif dari dataset nilai ujian, membaca struktur figur yang dihasilkannya, lalu menyimpannya sebagai berkas HTML mandiri yang disematkan di bawah. Setelah membaca topik ini, grafik lengkap dengan legenda, hover bawaan, dan kontrol zoom dapat dihasilkan dari satu fungsi px tanpa penulisan JavaScript.

Satu panggilan fungsi px#

Kosakata gramatika pada plotly express ditulis sebagai argumen fungsi. Fungsi px.scatter menerima tabel data beserta argumen x, y, color, dan hover_data, lalu mengembalikan objek figur berisi daftar trace beserta penataan layoutnya. Kosakata yang sama berlaku pada jenis grafik lain, misalnya px.bar untuk diagram batang dan px.line untuk grafik garis, sehingga kebiasaan membaca satu fungsi langsung berpindah ke fungsi lainnya. Argumen labels mengganti nama kolom menjadi label sumbu dan legenda yang rapi, sedangkan argumen facet_row memecah gambar menjadi panel per kategori tanpa kode tambahan. Pembagian kerjanya berada pada dua sisi, yaitu plotly express digunakan di sisi Python untuk menyusun struktur figur, sedangkan plotly.js merendernya di browser dengan tanda, sumbu, dan panduan yang digambar dari struktur tersebut.

Struktur figur yang dikembalikan berbentuk JSON, dengan daftar trace pada bagian data dan penataan pada bagian layout. Bentuk inilah yang membuat satu panggilan fungsi menghasilkan grafik yang utuh, karena seluruh keputusan pemetaan telah diterjemahkan menjadi struktur yang siap dirender browser. Struktur itu juga dapat dibaca kembali melalui kode, misalnya menghitung banyaknya trace atau memeriksa mode tiap trace, dan cara inilah yang digunakan demo di bawah untuk pemeriksaannya.

Demo scatter dua kelas#

Skrip berikut membuat demo utama topik ini. Dataset nilai_ujian.csv dibaca dengan pandas, kemudian px.scatter memetakan nilai literasi ke sumbu x, nilai matematika ke sumbu y, dan kolom kelas ke warna tanda. Argumen hover_data=["siswa"] membawa nama siswa pada label hover, sehingga identitas tiap titik tersedia tanpa anotasi. Hasilnya disimpan dengan fig.write_html sebagai index.html, dan ringkasan struktur figur dicetak untuk pemeriksaan. Jalankan skrip dari folder topiknya, lalu buka demo yang dihasilkannya pada bagian bawah halaman ini.

import pandas as pd
import plotly.express as px

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

# satu panggilan fungsi px: pemetaan ke sumbu, warna, dan data hover
fig = px.scatter(
    tabel,
    x="nilai_literasi",
    y="nilai_matematika",
    color="kelas",
    hover_data=["siswa"],
    labels={
        "nilai_literasi": "Nilai literasi",
        "nilai_matematika": "Nilai matematika",
        "kelas": "Kelas",
    },
    title="Literasi versus matematika di kelas 7A dan 7B",
)

# simpan sebagai berkas HTML mandiri; plotly.js disematkan di dalamnya
# sehingga berkasnya besar tetapi tetap berjalan tanpa internet
fig.write_html("index.html", include_plotlyjs="inline")

trace = fig.data[0]
print("type trace pertama :", trace.type)
print("mode trace pertama :", trace.mode)
print("jumlah trace       :", len(fig.data))
print("nama trace         :", [t.name for t in fig.data])
print("berkas index.html tersimpan")

type trace pertama : scatter
mode trace pertama : markers
jumlah trace       : 2
nama trace         : ['7A', '7B']
berkas index.html tersimpan

Keluaran memperlihatkan konsekuensi pemetaan color="kelas". Satu argumen warna diterjemahkan menjadi dua trace, satu per kelas, dan masing-masing membawa mode markers beserta nama kelompoknya. Pembacaan mode markers juga mengonfirmasi bahwa geometri yang dipilih adalah titik, bukan garis, sehingga tanda kecil pada demo benar-benar berasal dari argumen pemetaan.

Demo di atas berjalan sepenuhnya di browser. Arahkan kursor ke satu titik untuk membaca nama siswa, gunakan tombol zoom pada bilah alat di kanan atas untuk memperbesar rentang tertentu, dan klik ganda pada gambar untuk kembali ke tampilan awal. Seluruh perilaku itu berasal dari figur yang dikirim skrip, tanpa satu baris JavaScript pun ditulis secara manual.

Berkas HTML mandiri#

Argumen include_plotlyjs="inline" membuat write_html menyematkan pustaka plotly.js di dalam berkas HTML yang dihasilkan. Konsekuensinya, berkas index.html pada demo ini berukuran sekitar 4,7 megabyte, dan demo tetap berjalan tanpa internet karena seluruh pustakanya sudah ada di dalam berkas. Pilihan lainnya adalah include_plotlyjs="cdn", yang menunjuk pustaka pada jaringan sehingga berkasnya kecil tetapi demo tidak berjalan tanpa internet. Untuk demo yang disematkan pada halamannya sendiri, pilihan inline membuat berkasnya mandiri, sedangkan pilihan cdn lebih hemat apabila banyak halaman berbagi pustaka yang sama.

Dari scatter ke jenis grafik lain#

Kosakata argumen yang sama mengganti jenis grafik tanpa mengubah cara berpikirnya. Mengganti px.scatter dengan px.bar menghasilkan diagram batang yang tetap menerima x, y, color, dan hover_data, sedangkan px.line menggambar garis untuk deret berurutan. Menambahkan argumen facet_row="kelas" pada panggilan yang sama memecah gambar menjadi dua panel, satu per kelas, sehingga perbandingan antarkelas berpindah dari saluran warna ke saluran posisi. Argumen labels mengganti judul sumbu dan legenda pada seluruh panduan, karena panduan digambar otomatis dari nama kolom. Aturan kerjanya, mulai dari satu fungsi px yang paling dekat dengan tugas, lalu lengkapi panduannya dengan argumen pemetaan.

Kesalahan umum#

• Menggambar agregat dari tabel mentah. px.bar menggambar satu batang untuk setiap baris tabelnya, sehingga tabel mentah berisi 24 baris menghasilkan 24 batang, bukan rata-rata per kelas. Perbaikannya adalah mengagregasi terlebih dahulu dengan pandas, misalnya melalui groupby, karena plotly express tidak menyediakan lapisan statistik.
• Menganggap objek figur sebagai gambar jadi. Nilai yang dikembalikan fungsi px adalah struktur data yang dirender browser, bukan berkas gambar yang siap disisipkan. Keluaran grafiknya disimpan dengan fig.write_html, dan berkas yang dihasilkan memerlukan browser agar dapat ditampilkan.
• Mengubah grafik tanpa menjalankan ulang skripnya. Berkas HTML adalah potret figur pada saat dibuat, sehingga perubahan kode tidak otomatis mengubah demo yang sudah tersimpan. Setelah kode berubah, skrip dijalankan ulang agar index.html ikut diperbarui.

Ringkasan#

• Fungsi px.scatter, px.bar, dan px.line menyusun grafik dari argumen pemetaan seperti x, y, color, hover_data, labels, dan facet_row, lalu mengembalikan figur berbasis trace.
• Plotly express digunakan di sisi Python untuk menyusun struktur figur, sedangkan plotly.js merendernya di browser.
• Ekspor write_html dengan include_plotlyjs="inline" menghasilkan berkas HTML mandiri sekitar 4,7 megabyte yang berjalan tanpa internet.

Referensi#

• Plotly Express in Python — Plotly — Dokumentasi fungsi px beserta daftar jenis grafik yang disediakannya.
• Plotly Express Arguments in Python — Plotly — Rincian argumen pemetaan yang dapat digunakan pada fungsi px.
• Interactive HTML Export in Python — Plotly — Dokumentasi write_html dan pilihan penyematan plotly.js.