Pandas Interactive Plot dengan hvplot

Plot interaktif adalah salah satu media komunikasi data paling efektif. Berbeda dengan plot statis, plot interaktif dapat lebih kaya informasi sehingga memungkinkan kita mengakses lebih banyak informasi dengan hanya menggunakan satu plot yang sama.

Kode Lima Detik

import pandas as pd
import hvplot.pandas

# Line Plot
sales = pd.read_csv('https://github.com/aansubarkah/basangdata_pandas/raw/master/AW/Sales.SalesOrderHeader.csv', sep='\t', parse_dates=True)
sales = sales.set_index('OrderDate')
sales['SalesOrderID'].hvplot()

# Bar Plot
df = pd.read_excel('https://www.nigrini.com/ForensicAnalytics/Chapter4_Figure4pt4_DataOnly.xlsx')
bins = [-80000, 0, 1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 27000000]
labels = ['<$0', '$0-$1K', '$1K-$2K', '$2K-$3K', '$3K-$4K', '$4K-$5K', '$5K-$6K', '$6K-$7K', '$7K-$8K', '>$8K']
df['bins'] = pd.cut(df['Amount'], bins, labels=labels, include_lowest=True, right=False)
df.groupby(['bins']).count()[['Amount']].hvplot.bar(color='lightblue', xlabel='Dollar Intervals in $ Thousands', ylabel='Count')

Latar Belakang

Bagaimana kita mengkomunikasikan data yang kita miliki sama pentingnya dengan bagaimana kita mengolah data. Seberapa eksotisnya metode yang kita gunakan untuk mengolah data menjadi tidak bernilai jika kita kesulitan mengkomunikasikan hasilnya.

Karena manusia adalah makhluk visual, grafik membantu kita mengkomunikasikan data dengan lebih mudah.

Pada tulisan-tulisan sebelumnya kita telah mengenal grafik sebagai alat visualisasi data. Pada tulisan ini kita akan memperkaya informasi pembaca data kita dengan menggunakan grafik interaktif.


Langkah Kerja

Kita akan mereproduksi grafik statis berupa line plot dan bar plot dari tulisan sebelumnya menggunakan library hvplot.

Instalasi library hvplot

Instalasi dapat langsung dari cell notebook.

!pip install hvplot

Load library

import pandas as pd
import seaborn as sns
import matplotlib.pyplot as plt
import hvplot.pandas

Line Plot

Load Data

sales = pd.read_csv('https://github.com/aansubarkah/basangdata_pandas/raw/master/AW/Sales.SalesOrderHeader.csv', sep='\t', parse_dates=True)
sales = sales.set_index('OrderDate')

Grafik Statis

a4_dims = (11.7, 8.27)
plt.figure(figsize=a4_dims)
sns.set_style("whitegrid")
sales['SalesOrderID'].plot(linewidth=0.5);

Diskusi lebih lanjut mengenai grafik ini dapat dibaca di sini.

Grafik Interaktif

sales['SalesOrderID'].hvplot()

Jika kita mengarahkan kursor ke atas garis biru maka akan ditampilkan nilai SalesOrderID dan tanggalnya.

Di sisi kanan grafik terdapat beberapa menu yang dapat digunakan, misal menu Box Zoom (ikon kaca pembesar) kita gunakan untuk memperbesar area grafik.

Berdasar grafik di atas, kita tahu bahwa angka pada kolom SalesOrderID ternyata tidak lurus-lurus amat. Terdapat tanggal-tanggal dimana penjualan lebih banyak ketimbang hari lainnya. Ditandai dengan adanya garis vertikal yang baru kelihatan saat grafik diperbesar.

Bar Plot

Load Data

df = pd.read_excel('https://www.nigrini.com/ForensicAnalytics/Chapter4_Figure4pt4_DataOnly.xlsx')

bins = [-80000, 0, 1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 27000000]
labels = ['<$0', '$0-$1K', '$1K-$2K', '$2K-$3K', '$3K-$4K', '$4K-$5K', '$5K-$6K', '$6K-$7K', '$7K-$8K', '>$8K']
df['bins'] = pd.cut(df['Amount'], bins, labels=labels, include_lowest=True, right=False)

Grafik Statis

a4_dims = (11.7, 8.27)
plt.figure(figsize=a4_dims)
ax = sns.countplot(x="bins", data=df)
ax.set(xlabel='Dollar Intervals in $ Thousands', ylabel='Count')
ax.get_yaxis().set_major_formatter(plt.FuncFormatter(lambda x, loc: "{:,}".format(int(x))))
plt.show()

Bahasan lebih rinci mengenai grafik ini dapat dibaca pada tulisan sebelumnya.

Grafik Interaktif

df.groupby(['bins']).count()[['Amount']].hvplot.bar(color='lightblue', xlabel='Dollar Intervals in $ Thousands', ylabel='Count')

Menu Wheel Zoom memungkinkan kita melakukan skrol pada tetikus.

Menu Save akan menyimpan grafik yang sedang tampak, sehingga jika kita telah melakukan pembesaran grafik maka gambar yang diunduh adalah grafik yang telah diperbesar tersebut.


Referensi


Cover Image by blickpixel on pixabay

Leave a Reply

Your email address will not be published. Required fields are marked *

Daftarkan Email Anda untuk mendapat pemberitahuan tulisan baru kami.

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

will use the information you provide on this form to be in touch with you and to provide updates and marketing.