Cara Bangun Dashboard di Jupyter Pakai Solara

Cara Bangun Dashboard di Jupyter Pakai Solara

Halo, Sobat Data!

Selamat datang di bagian pertama dari seri artikel yang bakal ngajarin lo cara bikin dashboard di Jupyter, trus deploy jadi web app yang stand-alone. Yang keren, lo nggak perlu repot-repot belajar framework baru buat nge-deploy ini. Semuanya full Python, nggak ada JavaScript, nggak ada CSS, cuma fokus ke kode Python aja. Sounds good, kan?

 

Kenapa Jupyter?

Kita semua tahu, Jupyter Notebook tuh senjata wajib buat para data scientist, analis, atau siapa pun yang suka main-main sama data. Kombinasi kode, visualisasi, dan narasi dalam satu dokumen bikin Jupyter jadi tool yang serbaguna. Tapi, masalahnya, gimana kalau insight yang kita dapat dari data ini pengennya disampaikan ke orang-orang non-teknis? Nggak mungkin dong mereka harus lihat kode Python yang ribet? Di sinilah dashboard main peran.

Kenalan Dulu Sama Solara

Nah, di artikel ini, kita bakal bahas framework bernama Solara. Framework ini berbasis di atas ipywidgets (itu lho, library buat bikin widget interaktif di Jupyter). Selain gampang dipakai, Solara juga open-source. Jadi, selain lo bisa pake gratis, lo juga bisa ngoprek kalau mau.

Bukan cuma itu, Solara juga fleksibel banget. Lo bisa pake di Jupyter Notebook, Jupyter Lab, atau bahkan deploy aplikasinya pake Solara server. Keunggulan ini bikin Solara jadi solusi ciamik buat bikin dashboard atau aplikasi data interaktif.

Baca Juga

• Cara Menghapus Item Di List Python
• Membuat 3 Jenis Kalkulator Dengan Python

 

Persiapan Awal: Apa Aja yang Perlu Lo Siapin?

Sebelum kita mulai buat dashboard Jupyter di solara, pastikan lo udah instal beberapa library berikut:

pip install pandas matplotlib folium solara

Kalau lo kerja di dalam notebook, tinggal pakai magic command ini:

• %pip install pandas matplotlib folium solara

Udah diinstal? Sip. Sekarang, kita lanjut ke langkah selanjutnya.

 

Langkah 1: Siapin Data yang Mau Dipakai

Di contoh ini, kita bakal pake dataset kejahatan dari San Francisco (SF Crime Dataset). Dataset ini berisi informasi tentang jenis kejahatan dan lokasi di mana kejahatan itu terjadi.

Lo bisa download file CSV-nya manual atau biarin kode di bawah ini yang ngatur:

import pandas as pd
from pathlib import Path
import solara


ROOT = Path(solara.__file__).parent / "website" / "pages" / "docs" / "content" / "04-tutorial"
path = ROOT / Path("SF_crime_sample.csv.gz")
url = "https://raw.githubusercontent.com/widgetti/solara/master/solara/website/pages/docs/content/04-tutorial/SF_crime_sample.csv"


if path.exists():
    df_crime = pd.read_csv(path)
else:
    df_crime = pd.read_csv(url)


df_crime

Hasilnya, dataset kita udah siap buat diolah. Tapi tunggu, kita perlu rapiin dulu kolom Category dan PdDistrict biar formatnya lebih enak dibaca:

df_crime["Category"] = df_crime["Category"].str.title()
df_crime["PdDistrict"] = df_crime["PdDistrict"].str.title()

Nah, data kita sekarang lebih kece dengan format Title Case.

 

Langkah 2: Filter Data Sesuai Kebutuhan

Gue punya analogi buat lo: Bayangin data ini kayak sepiring nasi goreng. Nggak semua bumbu di dalamnya sesuai selera lo, kan? Jadi kita perlu "filter" dulu.

Kita bikin fungsi buat filter data berdasarkan distrik dan kategori kejahatan tertentu:

def crime_filter(df, district_values, category_values):
    df_dist = df.loc[df["PdDistrict"].isin(district_values)]
    df_category = df_dist.loc[df_dist["Category"].isin(category_values)]
    return df_category

Sekarang, coba kita filter data buat kategori kejahatan Vandalism, Assault, dan Robbery di distrik Bayview dan Northern:

dff_crime = crime_filter(df_crime, ["Bayview", "Northern"], ["Vandalism", "Assault", "Robbery"])

 

Langkah 3: Bikin Visualisasi Interaktif

Visualisasi tuh ibarat makeup buat data lo, bro. Tanpa visualisasi, data lo bakal datar kayak jalan tol. Yuk, kita bikin dua bar chart:

import matplotlib.pyplot as plt


def crime_charts(df):
    cat_unique = df["Category"].value_counts().reset_index()
    dist_unique = df["PdDistrict"].value_counts().reset_index()


    fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(20, 10))
    ax1.bar(cat_unique["Category"], cat_unique["count"])
    ax1.set_title("Jumlah Kejahatan Berdasarkan Kategori")
    ax2.bar(dist_unique["PdDistrict"], dist_unique["count"])
    ax2.set_title("Jumlah Kejahatan di Distrik Terpilih")
    plt.show()


crime_charts(dff_crime)

Cakep, kan? Dua grafik ini bakal ngasih lo insight tentang kejahatan di area tertentu.

 

Langkah 4: Tambahin Peta Interaktif

Lo tahu nggak? Nggak ada yang lebih keren daripada peta interaktif buat presentasi data lokasi. Kita bakal pake Folium buat ini:

import folium
import folium.plugins


def crime_map(df):
    latitude = 37.77
    longitude = -122.42
    sanfran_map = folium.Map(location=[latitude, longitude], zoom_start=12)
    incidents = folium.plugins.MarkerCluster().add_to(sanfran_map)


    for lat, lng, label in zip(df.Y, df.X, df.Category):
        folium.Marker(location=[lat, lng], popup=label).add_to(incidents)


    display(sanfran_map)


crime_map(dff_crime.iloc[0:50, :])

Sekarang lo punya peta interaktif yang nunjukin lokasi kejahatan. Seru, kan?

 

Langkah 5: Bikin UI Interaktif Pakai Solara

Lo pasti udah nggak sabar bikin semuanya jadi interaktif. Yuk, kita mulai dengan bikin variabel reaktif:

import solara


districts = solara.reactive(["Bayview", "Northern"])
categories = solara.reactive(["Vandalism", "Assault", "Robbery"])
limit = solara.reactive(50)

Variabel reaktif ini bakal ngasih kita kemampuan buat nge-update UI secara otomatis kalau ada perubahan. Sekarang, kita gabungin semuanya dalam satu komponen:

@solara.component
def View():
    dff = crime_filter(df_crime, districts.value, categories.value)
    row_count = len(dff)
    if row_count > limit.value:
        solara.Warning(f"Menampilkan {limit.value} dari {row_count} kejahatan")
    crime_map(dff.iloc[: limit.value])
    if row_count > 0:
        crime_charts(dff)
    else:
        solara.Warning("Data terlalu difilter, nggak ada yang bisa ditampilkan")

 

Langkah 6: Tambahin Kontrol UI

Lo nggak perlu ribet-ribet ganti variabel lewat kode. Solara punya elemen UI yang super simpel:

@solara.component
def Controls():
    solara.SelectMultiple("District", all_values=[str(k) for k in df_crime["PdDistrict"].unique().tolist()], values=districts)
    solara.SelectMultiple("Category", all_values=[str(k) for k in df_crime["Category"].unique().tolist()], values=categories)
    solara.SliderInt("Jumlah Maksimal Data", value=limit, min=1, max=100)

 

Langkah Terakhir: Gabungkan Semua

@solara.component
def Page():
    with solara.Sidebar():
        Controls()
    View()


Page()

 

Kesimpulan

Selamat! Lo baru aja berhasil bikin dashboard interaktif di Jupyter Notebook pake Solara. Lo nggak cuma bikin visualisasi data yang keren, tapi juga nambahin elemen interaktif yang bikin dashboard lo jadi lebih hidup dan dinamis. Prosesnya simpel, fun, dan full Python.

Di artikel berikutnya, kita bakal ngebahas langkah-langkah buat nge-deploy dashboard ini jadi web app stand-alone, yang bisa diakses siapa aja tanpa perlu repot ngubah kodenya. Lo bakal belajar cara bikin aplikasi yang nggak cuma berguna, tapi juga keliatan profesional.

Tetap semangat, Sobat Data! Jangan lupa eksperimen dengan fitur-fitur lain dari Solara dan nikmati setiap proses belajarnya. Ingat, dunia data science itu luas, dan lo udah bikin langkah besar dengan bikin dashboard interaktif pertama lo.

Sampai jumpa di artikel selanjutnya! Jangan lupa siapin kopi buat eksplor lebih jauh.

Published on March 12, 2025
Last updated on April 21, 2025