Pengantar
Dashboard interaktif adalah salah satu aplikasi data science berupa laman yang menampilkan sekumpulan visualisasi data yang bertujuan untuk menampilkan data sehingga menghasilkan insight yang lebih lengkap. Dalam hal ini, akan dibuat sebuah dashboard interaktif dengan menggunakan Streamlit di Python.
Jika kita ingin membuat sebuah dashboard atau koleksi visualisasi data yang dapat diaplikasikan secara interaktif, maka kita memerlukan tools-tools pembuat dashboard seperti Google Dashboard, R Shiny, Microsoft PowerBI, Tableau, dan lain-lain. Streamlit merupakan salah satu package yang terdapat dalam bahasa pemrograman Python yang memungkinkan penggunanya merepresentasikan dashboard dengan tampilan yang praktis dan minimalis. Beberapa keunggulan Streamlit antara lain:
- Open source
- Tidak membutuhkan proses penginstalan lain/aplikasi tambahan karena pada dasarnya Streamlit mirip dengan package lain yang terdapat pada Python
- Dapat bekerja dengan baik bersama dengan package visualisasi data lainnya pada Python seperti TensorFlow, Keras, PyTorch, Pandas, Numpy, Matplotlib, Seaborn, Altair, Plotly, Bokeh, Vega-Lite, dan lain-lain.
- Dapat membangun aplikasi yang praktis sederhana walaupun berasal dari ratusan/ribuan baris kode Python yang kompleks
- Tampilan minimalis dan tidak membutuhkan prosedur yang rumit dalam membangun aplikasi.
Namun Streamlit juga memiliki kekurangan. Beberapa kekurangan Streamlit yang penulis rasakan selama ini antara lain
- Membutuhkan konfigurasi tambahan ketika menggunakan package lain di Python
- Membutuhkan pengaturan html tertentu jika ingin melakukan kostumisasi tampilan di Streamlit
- Aplikasi berjalan melamban seiring semakin banyak dan kompleksnya diagram yang ditampilkan/diinteraksikan
- Streamlit sangat bergantung pada source code yang dibuat, jika source code memiliki bug atau terdapat error, maka aplikasi tidak akan tampil/berjalan
Membuat Aplikasi Data Science
Berikut merupakan beberapa tutorial untuk membuat aplikasi data science sederhana berupa dashboard interaktif dengan menggunakan Streamlit. Dalam hal ini, kami menggunakan IDE Visual Studio Code dan menggunakan bahasa pemrograman Python. Untuk diagram yang ditampilkan, digunakan package Plotly agar lebih menarik dan interaktif. Package Plotly dan Streamlit dapat di-install melalui terminal dengan code berikut:
pip install plotly
pip install streamlit
Selain Plotly dan Streamlit, digunakan pula package lain seperti Pydataset karena dalam hal ini digunakan dataset Titanic sebagai contoh data yang divisualisasikan. Dalam praktik kali ini, dibuat sebuah file bernama steamlit.py (nama file dan lokasi yang digunakan bebas).
Import Package yang Digunakan
Beberapa package yang akan dipakai dalam aplikasi ini antara lain Plotly dan Pydataset, yang selanjutnya di-import dengan:
import streamlit as st
from pydataset import data
import plotly.express as px
import plotly.graph_objects as go
Menjalankan Aplikasi di Local
Ketika membangun sebuah aplikasi dengan Streamlit, tentu secara periodik kita ingin melihat bagaimana aplikasi kita ditampilkan dan apakah ada bug/error sehingga kita dapat secara langsung memperbaiki error tersebut. Menjalankan aplikasi Streamlit di local/komputer dapat menghemat waktu dan memori yang digunakan, selain proses ini tidak membutuhkan koneksi internet sebagaimana ketika men-deploy aplikasi. Untuk menjalankan aplikasi di local, dapat dengan mengetikkan code berikut tepat di lokasi di mana file kode Streamlit disimpan.
streamlit run <nama file streamlit>.py
Atau dapat dilihat pada gambar berikut:
Membuat Konfigurasi Halaman
Setelah melakukan import package, dilakukan beberapa konfigurasi halaman sesuai dengan kebutuhan aplikasi yang dibuat. Konfigurasi halaman dilakukan dengan menggunakan fungsi st.set_page_config() sebagai berikut:
st.set_page_config(
page_title = "titanic!",
page_icon = "🦈", # emoji ikon untuk ikon tab, bisa dengan "random"
layout = "wide", #centered atau #wide
menu_items = {
'Get Help' : None, #atau string
'Report a bug' : "https://www.google.com",
'About' : "Ini adalah about"
},
initial_sidebar_state = "auto",
)
Adapun beberapa line code di atas mengandung arti sebagai berikut:
page_title: Memberikan nama halaman, konfigurasi ini akan terlihat pada nama tab aplikasi Streamlit yang terdapat di browser kamu.page_icon: Mengatur ikon tab aplikasi Streamlit setelah dilakukan deployment.layout: Mengatur bagaimana halaman aplikasi kamu ditampilkan, bisa denganwide(jika ingin menampilkan halaman dalam format lebat),centered(jika ingin menampilkan halaman dalam format di tengah).menu_items: Mengonfigurasi beberapa menu yang disediakan dalam aplikasi Streamlit, sepertiGet Help(bagaimana aplikasi menyediakan layanan bantuan),Report a bug(bagaimana aplikasi menyediakan link yang mengarahkan pengguna ke laman tertentu untuk melaporkan adanya bug/error, sertaAbout(jika kamu ingin menambahkan keterangan tambahan mengenai aplikasi yang sedang dijalankan). Konfigurasi ini akan ditampilkan berupa menu yang muncul di pojok kanan aplikasi.initial_sidebar_state: Bagaimana sidebar seharusnya ditampilkan.
Membuat Judul dan Caption Judul
Judul dalam halaman aplikasi Streamlit dibuat dengan menggunakan st.title(). Judul diletakkan setelah konfigurasi halaman sebagai berikut:
st.title("Visualisasi Dataset Titanic di Python dengan Streamlit")
Caption merupakan sederet kalimat tambahan yang muncul di bawah sebuah objek dan menjelaskan keberadaan objek tersebut. Dalam hal ini akan dibuat sebuah caption di bawah judul yang menjelaskan halaman yang sedang dibuat. Caption dibuat dengan menggunakan st.caption() sebagai berikut:
st.caption("Ini adalah simulasi pembuatan web dashboard dengan streamlit menggunakan dataset Titanic.")
Sehingga judul dan caption akan muncul dalam format sebagai berikut:
Menambahkan Gambar
Gambar dapat ditambahkan dengan menggunakan st.image() sebagai berikut:
st.image("https://images.pexels.com/photos/843085/pexels-photo-843085.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", width=600)
Gambar dapat diambil dari local atau dari link tertentu sesuai dengan kebutuhan. Dalam hal ini, gambar diambil dari sumber link secara open source yang tersedia di internet yang kemudian ditampilkan dalam bentuk sebagai berikut:
Caption berisi link di atas ditambahkan dengan menggunakan st.caption() dengan format link berupa [Nama Link](Link/URL) sebagai berikut:
st.caption("Ini bukan gambar kapal titanic. [Sumber disini.](https://www.pexels.com/photo/white-ship-during-golden-hour-843085/)")
Namun ada yang kurang bukan? Seharusnya kita meletakkan gambar di tengah dan bukan di tepi. Lalu bagaimana caranya agar gambar di atas terletak di tengah halaman? Maka dari itu, digunakan konfigurasi kolom halaman.
Pengaturan Kolom Halaman
Pengaturan kolom ini mirip ketika kita mengatur halaman pada html, di mana halaman dibagi ke dalam kolom-kolom elemen sehingga tata letak elemen dapat diatur sesuai kemauan kita. Dalam hal ini, untuk membuat gambar sebelumnya menjadi posisi tengah, maka dilakukan pembagian halaman menjadi 3 kolom di mana kolom tengah berisi gambar dan kolom kiri kanan berisi elemen kosong.
Pembagian kolom dilakukan dengan menggunakan st.columns() sebagai berikut:
g1, g2, g3 = st.columns([1,2,1])
with g1:
st.write(" ")
with g3:
st.write(" ")
with g2:
st.image("https://images.pexels.com/photos/843085/pexels-photo-843085.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", width=600)
Sehingga diperoleh hasil sebagai berikut:
Menambahkan Teks
Menambahkan paragraf dalam aplikasi Streamlit dapat dengan tiga cara, yaitu dengan menggunakan st.write(), dengan langsung mengetikkan teksnya, serta dengan menggunakan st.markdown().
Menggunakan st.write() dan secara langsung mengetikkan teks dapat dilakukan ketika kita tidak membutuhkan format tertentu dalam menampilkan teks/paragraf.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
st.write("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit ullamcorper dignissim cras tincidunt lobortis feugiat. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Convallis tellus id interdum velit.")
Code di atas dapat ditampilkan sebagai berikut:
st.write() dan menuliskan teks secara langsung.Menggunakan st.markdown() dilakukan jika kita ingin menambahkan format tertentu ke dalam paragraf seperti rata kanan-kiri (justify), rata kiri, rata kanan, teks miring, dan lain-lain. Kostumisasi format dapat dilakukan dengan menggunakan format tag html.
st.markdown('<div style="text-align:justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut faucibus pulvinar elementum integer enim. Vestibulum lorem sed risus ultricies. Libero nunc consequat interdum varius sit. In est ante in nibh mauris cursus mattis molestie. Mattis aliquam faucibus purus in massa tempor nec feugiat nisl. Eget duis at tellus at urna. Morbi tristique senectus et netus et malesuada fames ac turpis. Mus mauris vitae ultricies leo integer malesuada nunc vel. Dolor magna eget est lorem ipsum dolor.</div>', unsafe_allow_html=True)
st.markdown('<div style="text-align:justify">Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut <i><b>lectus arcu bibendum</b></i> at varius vel pharetra vel turpis nunc eget lorem dolor sed viverra ipsum nunc <b>aliquet bibendum enim</b> facilisis gravida neque convallis a cras semper auctor neque vitae.</div>', unsafe_allow_html=True)
Beberapa tag html yang sering dipakai antara lain <div></div> untuk paragraf biasa, <h1></<h1> hingga <h6></h6> untuk heading-subheading, <i></i> untuk teks miring, <b></b> untuk teks tebal, dan lain-lain. Menggunakan st.markdown() juga harus disertai dengan argumen unsafe_allow_html = True untuk memungkinkan teks yang diketik menggunakan tag html.
Berdasarkan code di atas, paragraf ditampilkan menjadi bentuk berikut:
st.markdown()Menampilkan Data Frame
Data frame atau tabel data merupakan hal yang umum di dalam data science. Jika kamu ingin menampilkan dataset di dalam aplikasi Streamlit kamu, dapat digunakan st.dataframe(). Dalam hal ini karena dataset memiliki amatan yang banyak, sehingga data frame disimpan dalam sebuah expander atau tampilan yang bisa di-minimize atau di-maximize sesuai dengan kebutuhan.
titanic = data('titanic')
st.markdown('<h4 style="text-align:center">Visualisasi Dataset Titanic</h4>', unsafe_allow_html=True)
st.markdown('<h5 style="text-align:justify">Menampilkan Dataset</h5>', unsafe_allow_html=True)
with st.expander('Dataset Titanic', expanded=False):
st.dataframe(titanic)
Data ditampilkan seperti pada GIF berikut:
Menampilkan Baris Kode
Baris kode dapat ditampilkan di aplikasi Streamlit dengan menggunakan st.code() sebagai berikut:
'Dataset di atas ditampilkan dengan code berikut:'
expander = '''with st.expander('Dataset Titanic', expanded=False):
st.dataframe(titanic)'''
st.code(expander, 'python')
Dan kode ditampilkan sebagai berikut:
st.code()Input Widget
Streamlit memiliki berbagai macam input widget yang dapat dipakai sebagai input yang menghasilkan output berupa plot. Beberapa input widget yang dimiliki Streamlit antara lain:
| Nama Widget | Kegunaan | Kode |
| Button | Mirip seperti tombol yang dapat melakukan eksekusi tertentu ketika diklik | st.button() |
| Download Button | Seperti pada widget Button, tetapi mengeksekusi pengunduhan file | st.download_button() |
| Checkbox | Berupa kotak centang yang bisa diaktifkan atau tidak | st.checkbox() |
| Radio | Memungkinkan memilih satu dari beberapa opsi dengan bentuk mirip tombol radio | st.radio() |
| Selectbox | Memilih lebih satu opsi yang disediakan dengan model input berupa dropdown | st.selectbox() |
| Multiselect | Memilih lebih dari satu opsi yang disediakan dengan model input dropdown | st.multiselect() |
| Slider | Memilih angka pada rentang tertentu | st.slider() |
| Select-slider | Memilih beberapa opsi dengan menggeser point pada garis vertikal | st.select_slider() |
| Text input | Memasukkan teks singkat | st.text_input() |
| Number input | Memasukkan angka tertentu dari beberapa opsi yang disediakan berupa dropdown | st.number_input() |
| Text area | Memasukkan lebih dari satu baris teks | st.text_area() |
| Date input | Masukan berupa tanggal | st.date_input() |
| Time input | Masukan berupa jam | st.time_input() |
| File uploader | Memungkinkan dapat mengunggah file | st.file_uploader() |
| Camera input | Memungkinkan user dapat memberikan input berupa gambar yang diambil secara langsung melalui camera | st.camera_input() |
| Color picker | Memasukkan warna melalui pallette warna yang muncul | st.color_picker() |
Dalam hal ini akan ditampilkan sebuah pie chart dengan menggunakan dua widget input, antara lain radio dan select box.
st.selectbox()
p1a, p1b = st.columns([1,3])
with p1a:
st.markdown('<h6 style="text-align:center">Widget input yang digunakan: Select Box</h6>', unsafe_allow_html=True)
sb = st.selectbox('Pilih Variabel:', ['class', 'age', 'sex', 'survived'])
with p1b:
pie = px.pie(titanic, names=sb)
st.plotly_chart(pie)
Dan pie chart dataset titanic akan ditampilkan sebagaimana berikut:
st.selectbox()st.radio()
p2a, p2b = st.columns([1,3])
with p2a:
st.markdown('<h6 style="text-align:center">Widget input yang digunakan: Radio</h6>', unsafe_allow_html=True)
rd = st.radio('Pilih Variabel:', ['class', 'age', 'sex', 'survived'])
with p2b:
pie1 = px.pie(titanic, names=rd)
st.plotly_chart(pie1)
Dengan st.radio(), pie chart ditampilkan sebagai berikut:
st.radio()Terakhir, jika kamu ingin meng-explore lebih banyak lagi seputar widget input yang dimiliki Streamlit beserta contoh-contohnya, kamu dapat mengunjungi laman dokumentasi Streamlit melalui link ini.
Penutup
Nah, itu dia sedikit tutorial bagaimana membangun aplikasi data science sederhana dengan menggunakan Streamlit di Python. Semoga tutorial ini dapat sedikit membantu kamu, ya! Sampai jumpa di artikel-artikel selanjutnya.
Kemudian, untuk kamu yang mengalami kesulitan mengenai instalasi Python, kamu dapat membaca terlebih dahulu artikel ini. Jika kamu mengalami permasalahan lainnya seputar data analytics, kamu dapat menghubungi Exsight melalui link ini juga. Sekian dari saya!
Referensi
