Dari Plotly ke Dash

Membangun Dasbor dengan Dash dan Plotly

Alex Scriven

Data Scientist

Aplikasi Dash pertama

Aplikasi Dash lengkap:

from dash import Dash, dcc
app = Dash()
app.layout = [dcc.Graph(id='example-graph', figure=bar_fig)]
if __name__ == '__main__':
    app.run(debug=True)

Fungsionalitas Python dimungkinkan
- mis., Interpolasi string print("f{my_variable}")

Impor utama Dash

from dash import Dash, dcc

Dash menginisialisasi aplikasi
dcc berisi komponen UI seperti grafik dan input
- Satu komponen di aplikasi kita
- Lebih banyak komponen sepanjang kursus

Tata letak app

app = Dash()

app.layout = [dcc.Graph(
  id='example-graph',
  figure=bar_fig)]

Buat objek app dengan Dash()
Atur app.layout
- Menggunakan dcc.Graph()
  - figure = Figure Plotly yang dirender
  - id = Penting untuk callback nanti

Menjalankan aplikasi

if __name__ == '__main__':
    app.run(debug=True)

Skrip dijalankan dari command-line
- mis., python my_app.py di command-line
debug untuk umpan balik saat pengujian

Aplikasi kita

Akses via peramban seperti Google Chrome
Saat berjalan, perbarui dan simpan berkas .py untuk melihat pembaruan langsung di peramban

Tangkapan layar terminal setelah aplikasi Dash dijalankan. Teks putih di latar hitam menampilkan detail seperti di skrip.

Aplikasi kita di peramban

GIF bagan batang horizontal: total penjualan pada sumbu-x dan negara pada sumbu-y. Grafik sama seperti pelajaran sebelumnya, namun di peramban Chrome, dan alamat server terlihat di bilah URL. Kursor mengarah ke grafik lalu ke bilah URL untuk menunjukkan server aktif.

Dash di DataCamp

Beberapa perbedaan dari latihan DataCamp lain:
- Baris setup di awal latihan
- Dieksekusi sekaligus (bukan baris per baris)
- Kode (jauh) lebih panjang
Dashboard fungsional penuh (perbesar jendela untuk melihat!)

Tangkapan layar bagian atas latihan kode Dash yang sudah dijalankan, menyorot tombol untuk memperluas keluaran HTML agar aplikasi bisa dilihat layar penuh.

Ayo berlatih!

Membangun Dasbor dengan Dash dan Plotly