Membuat Dashboard Interaktif – Pentingnya Visualisasi Data – Sejumlah besar data dihasilkan setiap saat karena aktivitas bisnis di era globalisasi. Perusahaan mengekstraksi informasi yang berguna dari data yang dihasilkan tersebut untuk membuat keputusan bisnis yang penting. Analisis Data Eksplorasi dapat membantu mereka memvisualisasikan situasi pasar saat ini dan memperkirakan kemungkinan tren di masa depan, memahami apa yang dikatakan dan diharapkan pelanggan mereka dari produk, meningkatkan produk dengan mengambil tindakan yang sesuai, dan banyak lagi.
Untuk mencapai hal ini, Visualisasi data adalah solusinya, yaitu membuat representasi data yang menarik secara visual yang menceritakan kisah yang menarik dengan cepat namun cukup sederhana untuk dipahami oleh semua pembaca.
Membuat dashboard interaktif seperti fitur agar bisa berinteraksi dengan bagan melalui fungsi seperti zoom atau arahkan kursor untuk menggali data lebih dalam tentu sangat menarik dan berguna bagi user.
Manfaat Plot Interaktif dan Dashboard menggunakan Bokeh
Contents
Visualisasi data interaktif memungkinkan pengguna untuk secara instan memodifikasi elemen pada plot grafis daripada mengubah kode di latar belakang. Bayangkan kalian dapat berinteraksi dengan plot yang menunjukkan harga produk selama satu dekade. Sekarang, jika ada slider atau menu drop-down untuk memilih harga untuk tahun atau bulan tertentu, maka kalian sebagai pembaca akan memiliki wawasan yang lebih cepat dari grafik dan itu terlalu cepat tanpa mengedit kode. Inilah yang ditawarkan plot interaktif.
Dengan plot interaktif, kita dapat lebih memahami cerita di balik data. Plot ini memungkinkan kita untuk memperbesar variasi yang menarik untuk melihat tren dan variasi serta menemukan korelasi dan hubungan antar variabel. Semua ini membuat proses eksplorasi data lebih bermakna.
Pengenalan Dashboard
Dashboard adalah alat visual yang menceritakan kisah yang terkandung dalam dataset dan memungkinkan pengguna untuk dengan cepat memahami gambaran yang lebih besar. Ini adalah kumpulan plot berbeda yang diikat bersama dalam tata letak gaya kotak seperti yang ditunjukkan di bawah ini dan merupakan bagian dari cerita. Jadi, kita dapat mengatakan bahwa dashboard adalah cara umum untuk menyajikan wawasan berharga di satu tempat.
Library untuk Plot Interaktif
Bagan/plot yang dibuat menggunakan Matplotlib dan Seaborn adalah bagan statis yaitu, pengguna tidak dapat memperbaruinya tanpa memperbarui kode dan menjalankannya kembali. Dengan demikian, pustaka plot interaktif – D3 dan chart.js dapat digunakan, tetapi pengguna harus memiliki pengetahuan JavaScript sebelumnya.
Saat ini, ada dua library Open-Source yang populer untuk membangun visualisasi interaktif – Bokeh dan Plotly. Pada artikel ini, kita akan melakukan tutorial sederhana menggunakan Bokeh.
Bokeh adalah perpustakaan Open-Source untuk visualisasi interaktif yang membuat grafik menggunakan HTML dan JavaScript. Ini adalah alat EDA yang kuat yang juga dapat digunakan untuk membangun dashboard dan aplikasi berbasis web.
Bokeh mendukung grafik garis, diagram lingkaran, diagram batang & diagram batang bertumpuk, histogram, dan plot sebar. Sumber data dikonversi ke file JSON yang menjadi masukan ke BokehJS ( Pustaka JavaScript) dan ini memungkinkan untuk membuat plot & visualisasi interaktif yang didukung browser.
Pustaka Bokeh membutuhkan pemahaman dasar tentang kode JavaScript untuk menulis fungsi khusus untuk memperbarui plot tergantung pada input pengguna. Untuk artikel ramah pemula ini, saya telah menggunakan perpustakaan bernama Pandas-Bokeh yang lebih mudah digunakan untuk pemula dan memungkinkan rendering plot Bokeh yang sama melalui dukungan Back-end untuk Pandas.
Satu baris kode diperlukan untuk setiap plot interaktif. Saya akan mendemonstrasikan fungsionalitas perpustakaan Pandas-Bokeh dan bagaimana kita dapat menggunakannya untuk membangun dasbor sederhana dari kumpulan data.
Membangun dasbor interaktif menggunakan Bokeh
Mari kita mulai dengan menginstal perpustakaan terlebih dahulu menggunakan pip dari PyPI.
pip install pandas_bokeh
Oiya kita akan menggunakan jupyter notebook, oleh sebab itu kalian jalankan saja di command prompt
jupyter-notebook
Selanjutnya, kita mengimpor perpustakaan panda dan numpy. Ingatlah untuk mengimpor ini sebelum perpustakaan pandas_bokeh.
import numpy as np import pandas as pd import pandas_bokeh
Kita juga membutuhkan perintah berikut untuk menampilkan grafik output di notebook
# Embedding plots in Jupyter/Colab Notebook pandas_bokeh.output_notebook()
Untuk menampilkan grafik dalam HTML terpisah, gunakan perintah ini-
# for exporting plots as HTML pandas_bokeh.output_file(filename)
Untuk tutorial pemula ini, kita akan membuat dataset acak sederhana menggunakan pustaka NumPy dan menggunakannya untuk membangun dashboard. Mari kita asumsikan bahwa kumpulan data berisi sampel nilai terukur dari 4 sensor selama periode 12 bulan dan setiap nilai memiliki nomor identifikasi unik & kategori yang terkait dengannya. Artinya ada total 6 fitur yaitu, ‘id’, ‘bulan’, ‘sensor_1’, ‘sensor_2’, ‘sensor_3’, dan ‘kategori’. Untuk mempermudah, kami hanya mempertimbangkan 15 sampel atau baris data.
Untuk menghasilkan dataset ini, kami menggunakan fungsi np.random dari library NumPy sebagai berikut. (Tautan dokumentasi resmi untuk NumPy: https://numpy.org/doc/stable/reference/random/generator.html)
#define the categorical variable
category = ['A','B','C']
#set random seed to make the dataset reproducible
np.random.seed(42)
#create a dataset
df_random = pd.DataFrame({
'id': np.arange(0, 15),
'month':np.random.randint(1, 12, 15),
'sensor_1': np.random.uniform(0, 1,15),
'sensor_2': np.random.uniform(10, 15, 15),
'sensor_3': np.random.randint(0, 20, 15),
'category': np.random.choice(category, 15, p=[0.2, 0.4, 0.4])
})
#set index to id column
df_random=df_random.set_index('id')
kita ketikan, berikut untuk menampilkan data
df_random.head()
month sensor_1 sensor_2 sensor_3 category id 0 7 0.708073 12.280350 14 B 1 4 0.020584 13.925880 6 A 2 11 0.969910 10.998369 11 C 3 8 0.832443 12.571172 7 B 4 5 0.212339 12.962073 14 B
Sekarang kita dapat memplot bagan di dasbor. Untuk tujuan demonstrasi, mari kita plot grafik berikut menggunakan perpustakaan pandas_bokeh-
- Line plot
- Bar chart
- Stacked Bar chart
- Scatter plot
- Pie chart
- Histogram
Kita buat dulu colorsnya
#color palette colors=['#FDE724','#D01C8B','#4DAC26']
Kode yang digunakan untuk membuat dashboard interaktif yaitu
# Plot1 - Line plot p_line = df_random.groupby(['month']).mean().plot_bokeh(kind="line",y="sensor_2",color='#d01c8b',plot_data_points=True,show_figure=False) # Plot2- Barplot p_bar = df_random.groupby(['month']).mean().plot_bokeh(kind="bar",colormap=colors,show_figure=False) # Plot3- stacked bar chart df_sensor=df_random.drop(['month'],axis=1) p_stack=df_sensor.groupby(['category']).mean().plot_bokeh(kind='barh', stacked=True,colormap=colors,show_figure=False) #Plot4- Scatterplot p_scatter = df_random.plot_bokeh(kind="scatter", x="month", y="sensor_2",category="category",colormap=colors,show_figure=False) #Plot5- Pie chart p_pie= df_random.groupby(['category']).mean().plot_bokeh.pie(y='sensor_1',colormap=colors,show_figure=False) #Plot6- Histogram p_hist=df_sensor.plot_bokeh(kind='hist', histogram_type="stacked",bins=10,colormap=colors, show_figure=False)
Kita plotkan kedalam HTML/web
#Make Dashboard with Grid Layout: pandas_bokeh.plot_grid([[p_line, p_bar,p_stack],[p_scatter, p_pie,p_hist]], plot_width=400)
Semua plot ini bersifat interaktif dan memungkinkan kalian untuk menggunakan fungsi hover dan zoom serta kategori filter.
Kesimpulan
Melalui artikel ini, kita melihat cara membuat plot interaktif Bokeh secara langsung di dalam Pandas dan mengatur dasbor sederhana menggunakan perpustakaan Pandas-Bokeh. Pustaka Pandas-Bokeh sangat mudah digunakan untuk pemula dengan pemahaman dasar tentang sintaks plot panda. Pustaka ini pasti dapat membantu membuat visualisasi lebih rapi tanpa perlu mempelajari kode JavaScript tambahan untuk menghasilkan plot interaktif