Cara Membuat Histogram dengan Plotly

Histogram adalah tampilan grafis populer dari titik data yang diatur ke dalam rentang tertentu. Kita biasanya melihatnya dalam statistik, digunakan untuk menampilkan jumlah variabel tertentu yang muncul dalam suatu rentang. Misalnya, guru matematika Anda dahulu mungkin menggunakan histogram untuk memvisualisasikan jumlah nilai yang diperoleh semua orang di kelas Anda. 

Gambar 1: Contoh histogram yang menampilkan distribusi nilai untuk sebuah kelas. 

[Sumber: Contoh Histogram dengan Matplotlib] 

Batang-batangnya yang khas dengan tinggi bervariasi menyerupai bagan batang, kecuali histogram digunakan untuk memvisualisasikan data kuantitatif, bukan data kategorikal – seperti pada bagan batang. 

Secara umum, data numerik yang divisualisasikan dalam histogram bersifat kontinu, artinya memiliki nilai tak hingga. Mencoba memplot nilai variabel kontinu sering kali tidak praktis. Histogram mengatasi masalah ini dengan mengelompokkan beberapa titik data ke dalam rentang logis (disebut bin) sehingga dapat divisualisasikan. 

Dalam tutorial ini, kita akan membahas cara membuat histogram di Python menggunakan pustaka visualisasi data Plotly. Kita juga akan menyinggung berbagai cara untuk menyesuaikan histogram Plotly Anda dan mengapa visualisasi data itu penting sejak awal. 

Lihat buku kerja DataLab ini untuk mengikuti kode dalam tutorial ini. 

Pentingnya Visualisasi Data dalam Analisis Data

Tidak ada bisnis yang tidak diuntungkan dengan memahami datanya lebih baik. Peran analisis data adalah membantu bisnis mengoptimalkan kinerja dan meningkatkan laba; ilmu ini merentang ke semua bidang tempat data berada karena wawasan umumnya dianggap sebagai keunggulan.   

Visualisasi data adalah representasi grafis yang digunakan analis untuk menyajikan informasi dan data. Tujuannya adalah merangkum data agar disajikan dalam format yang mudah dipahami, menyoroti pelajaran penting dari data bagi pembacanya. 

Dengan kata lain, bisnis menggunakan visualisasi data untuk membantu mengidentifikasi tren data dengan cepat yang jika tanpa bantuan visual akan sulit dilakukan. Representasi grafis memudahkan komunikasi informasi secara universal, cepat, dan efektif. 

Pengenalan Plotly

Plotly adalah pustaka visualisasi data interaktif, open-source, untuk Python dan R yang ditulis dalam JavaScript. Untuk artikel ini, kita akan berfokus pada Plotly Python, yang kadang disebut “plotly.py,” untuk membedakannya dari padanan JavaScript-nya. 

Tip: Ikuti kursus Pengantar visualisasi data dengan Plotly di Python atau Visualisasi data interaktif dengan Plotly di R untuk memahami Plotly.   

Banyak pengguna Plotly sering mengatakan mereka awalnya “terpikat” oleh estetika modern yang memungkinkan pencerita data mengimplementasikannya dengan cukup mudah. Plotly Python memungkinkan pengguna membuat visualisasi web yang menarik dan interaktif yang dapat: 

• ditampilkan di Jupyter notebooks, 
• disimpan sebagai file HTML mandiri, 
• disajikan sebagai bagian dari aplikasi web murni berbasis Python menggunakan Dash.

Daya tarik lain dari Plotly adalah beragamnya jenis bagan yang tersedia. Pustaka ini mendukung lebih dari 40 bagan unik untuk berbagai kasus penggunaan, termasuk statistik, keuangan, geografi, sains, dan bagan 3 dimensi. 

Mengekspor visualisasi yang dibuat dengan Plotly itu mudah karena integrasi mendalam pustaka ini dengan Kaleido – utilitas ekspor gambar. Ada juga dukungan luas untuk konteks non-web, termasuk editor desktop (mis., Spyder, PyCharm, dll.) dan publikasi dokumen statis (mis., mengekspor Jupyter notebook ke format PDF). 

Instalasi plotly.py cukup mudah; dapat dipasang menggunakan pip: 

pip install plotly>=5.11.0, <5.12.0Didukung oleh

Atau menggunakan Conda: 

conda install -c plotly plotly>=5.11.0, <5.12.0Didukung oleh

Catatan: Disarankan untuk memasang pustaka dalam lingkungan virtual agar dependensi untuk proyek yang berbeda tetap terpisah. Anda juga bisa memulai dengan buku kerja DataLab - IDE Data Science Python & R di cloud. 

Menggunakan DataLab

DataLab adalah Integrated Development Environment (IDE) daring yang memungkinkan pengguna menulis kode, menganalisis data secara individual atau kolektif, dan berbagi wawasan data. Dengan kata lain, Anda dapat menganggap DataLab sebagai Google Docs khusus untuk data science; pelajari lebih lanjut cara kerjanya dalam artikel kami tentang Menggunakan DataLab di Kelas.

Untuk tugas ini, kita harus membuat buku kerja dari sebuah dataset. Untungnya, DataCamp menyediakan kumpulan dataset menarik yang kaya dan terus bertambah untuk dianalisis. Saat kita membuat buku kerja dari sebuah dataset, lingkungan akan berisi semua data yang telah dikonfigurasi sebelumnya dan deskripsi singkat data sehingga Anda bisa langsung praktik sejak awal.   

Langkah-langkah membuat buku kerja menggunakan dataset DataCamp adalah sebagai berikut: 

• Dari aplikasi DataLab, pilih "Datasets" di bilah sisi.
• Pilih dataset yang Anda minati. Kotak dialog akan tampil. Ini menyediakan pratinjau dataset yang dipilih, termasuk kamus data dan tautan ke sumber dataset, kemungkinan pilihan bahasa (Python atau R), serta ringkasan publikasi yang dibuat pengguna lain dengan dataset ini.
• Pilih Create workbook.

Gambar 2: GIF yang memperlihatkan langkah-langkah membuat buku kerja dari sebuah dataset.

Catatan: Lihat Membuat Plotly Histogram dengan Data Olimpiade untuk mengikuti kode.

Kita akan menggunakan dataset Olympics Data dari koleksi data internal DataCamp. Menurut deskripsinya, ini adalah dataset historis tentang Olimpiade modern, dari Athena 1896 hingga Rio 2016. Setiap baris terdiri dari seorang atlet (271116 instance) yang berkompetisi dalam sebuah nomor Olimpiade dan medali yang diraih (jika ada).

Kolom-kolomnya terdiri dari hal-hal berikut: 

Berdasarkan pemahaman kita saat ini, kolom yang dapat kita gunakan untuk membuat histogram adalah: age, height, weight, dan year. Ini karena histogram dibangun menggunakan nilai numerik kontinu – histogram digunakan untuk merepresentasikan distribusi data numerik, di mana data dibagi ke dalam bin dan jumlah untuk tiap bin ditampilkan. 

Kita akan menggunakan kolom age untuk membuat histogram. 

Membuat Plotly Histogram

Membuat histogram di Python dengan Plotly cukup mudah; kita dapat menggunakan Plotly Express, antarmuka tingkat tinggi yang mudah digunakan…

import plotly.express as px

# Create a histogram
fig = px.histogram(olympic_data.age, x="age",
                  title="Distribution of Athletes age")
fig.show()Didukung oleh

Gambar 3: Histogram yang dibuat menggunakan Plotly Express

Kita juga memiliki opsi menggunakan Graph Objects.

import plotly.graph_objects as go

fig = go.Figure(data=[go.Histogram(x=olympic_data.age)])

# add the title
fig.update_layout(title=dict(text="Distribution of Athletes age"))
fig.show()Didukung oleh

Gambar 4: Histogram yang dibuat menggunakan Plotly Graph Objects. 

Fungsi Plotly express secara internal memanggil graph_objects, yang mengembalikan sebuah nilai. Karena itu, fungsi Plotly express bermanfaat karena memungkinkan pengguna menggambar visualisasi data yang biasanya membutuhkan lebih banyak baris kode jika digambar menggunakan graph_objects. 

“Modul plotly.express (biasanya diimpor sebagai px) berisi fungsi yang dapat membuat keseluruhan figur sekaligus dan disebut sebagai Plotly Express atau PX. Plotly Express adalah bagian bawaan dari pustaka Plotly dan merupakan titik awal yang direkomendasikan untuk membuat figur yang paling umum. Setiap fungsi Plotly Express menggunakan graph objects secara internal dan mengembalikan instance plotly.graph_objects.Figure.”

Sumber: Plotly Express in Python. 

Meskipun Plotly express direkomendasikan sebagai titik masuk ke pustaka Plotly, kita akan menggunakan graph_objects untuk menyesuaikan tampilan histogram karena lebih fleksibel.  

Menyesuaikan tampilan histogram Plotly

Saat ini histogram kita cukup polos. Mari kita percantik dengan mengubah font untuk judul dan menambahkan label sumbu. 

# Create histogram
fig = go.Figure(data=[go.Histogram(x=olympic_data.age)])

fig.update_layout(
    # Set the global font
    font = {
        "family":"Times new Roman",
        "size":16
    },
    # Update title font
    title = {
        "text": "Distribution of Athletes age",
        "y": 0.9, # Sets the y position with respect to `yref`
        "x": 0.5, # Sets the x position of title with respect to `xref`
        "xanchor":"center", # Sets the title's horizontal alignment with respect to its x position
        "yanchor": "top", # Sets the title's vertical alignment with respect to its y position. "      
        "font": { # Only configures font for title
            "family":"Arial",
            "size":20,
            "color": "red"
        }
    }
)

# Add X and Y labels
fig.update_xaxes(title_text="Age")
fig.update_yaxes(title_text="Number of Athletes")

# Display plot
fig.show()Didukung oleh

Gambar 5: Histogram Plotly dengan judul yang diperbarui dan label sumbu ditambahkan. 

Dengan tambahan ini, histogram kita menjadi lebih informatif. 

Berikutnya, mari ubah ukuran setiap bin. 

# Create histogram
fig = go.Figure(data = [
    go.Histogram(
        x = olympic_data.age,
        xbins=go.histogram.XBins(size=5) # Change the bin size to 5
    )
  ]
)Didukung oleh

Gambar 6: Histogram Plotly dengan ukuran bin 5. 

Pada kode di atas, kita menetapkan parameter xbins dalam instance go.Histogram ke instance go.histogram.Xbins dan mendefinisikan ukuran bin yang diinginkan sebagai parameter instance tersebut. Perlu dicatat bahwa kita juga bisa melakukan langkah ini menggunakan objek dict dengan properti yang kompatibel. 

Terakhir, mari ubah warna bin menjadi oranye agar visualisasinya lebih mencolok. 

# Create histogram
fig = go.Figure(data = [
    go.Histogram(
        x = olympic_data.age,
        xbins=go.histogram.XBins(size=5), # Change the bin size
        marker=go.histogram.Marker(color="orange") # Change the color
    )
  ]
)Didukung oleh

Gambar 7: Histogram Plotly dengan bin berwarna oranye.

Jauh lebih baik. 

Pada kode di atas, kita menetapkan parameter marker dalam instance go.Histogram ke instance go.histogram.Marker dan mendefinisikan warna yang diinginkan sebagai parameter instance tersebut. 

Namun, masih banyak penyesuaian lain yang bisa kita lakukan pada histogram Plotly kita, seperti menambahkan hover text. 

Mengaktifkan hover text

Teks yang merinci apa yang diwakili setiap batang akan ditampilkan setiap kali Anda mengarahkan kursor ke sebuah batang dalam histogram saat ini – lihat Gambar 8. 

Gambar 8: Hover text saat ini yang ditampilkan ketika mengarahkan kursor ke histogram kita. 

Ini kurang intuitif. Saat melakukan visualisasi data, kita ingin plot kita bersifat self-explanatory – bahkan sampai ke hover text. Oleh karena itu, mari perbarui informasi yang ditampilkan ketika kita mengarahkan kursor ke sebuah bin. 

# Create histogram
fig = go.Figure(data = [
    go.Histogram(
        x = olympic_data.age,
        xbins=go.histogram.XBins(size=5), # Change the bin size
        marker=go.histogram.Marker(color="orange"), # Change the color
        hovertemplate="<br>".join([
            "Age Range: %{x}",
            "Number of Athletes: %{y}"]) # Make hover text more informative
    )
  ]
)Didukung oleh

Gambar 9: Informasi hover text yang diperbarui. 

Teks yang ditampilkan saat kita mengarahkan kursor ke sebuah bin kini jauh lebih informatif, sehingga visualisasi kita lebih mudah ditafsirkan. Kita melakukan ini dengan memperbarui parameter hovertemplate dalam instance go.Histogram kita. 

Menambahkan opsi pemfilteran

Sebelumnya dalam tutorial, kita mengatakan bahwa kita dapat membuat histogram yang mencakup fitur age, height, weight, dan year. Tidak perlu membuat histogram terpisah untuk masing-masing. 

Sebagai gantinya, kita bisa membuat satu histogram dan menambahkan tombol filter yang memungkinkan Anda berganti-ganti fitur mana yang akan ditampilkan pada visualisasi. 

Berikut tampilannya dalam kode.

"""
Starter code provided by vestland on StackOverflow
Link: https://bit.ly/3ipqOMo
"""
# continuous features
continuous_vars = ["age", "height", "weight", "year"]

# plotly
fig = go.Figure()

# set up ONE trace
fig.add_trace(
    go.Histogram(x = olympic_data.age,
                xbins=go.histogram.XBins(size=5), # Change the bin size
                marker=go.histogram.Marker(color="orange"), # Change the color
            )
)

buttons = []

# button with one option for each dataframe
for col in continuous_vars:
    buttons.append(dict(method='restyle',
                        label=col,
                        visible=True,
                        args=[{"x":[olympic_data[col]],
                              "type":'histogram', [0]],
                        )
                  )

# some adjustments to the updatemenus
updatemenu = []
your_menu = dict()
updatemenu.append(your_menu)

updatemenu[0]['buttons'] = buttons
updatemenu[0]['direction'] = 'down'
updatemenu[0]['showactive'] = True

# add dropdown menus to the figure
fig.update_layout(showlegend=False, updatemenus=updatemenu)
fig.show()Didukung oleh

Gambar 10: Histogram dengan filter yang memungkinkan pengguna berganti-ganti berbagai fitur dalam satu visualisasi.

Itu dia; jangan lupa lihat buku kerja Membuat Plotly Histogram dengan Data Olimpiade, dan coba-coba dengan apa yang telah kita bangun dalam tutorial ini. 

Penutup 

Anda sekarang tahu cara membuat histogram di Plotly Python; Dalam tutorial ini, kita membahas:

• Apa itu histogram dan bagaimana cara kerjanya
• Pentingnya visualisasi data dalam analisis data
• Cara memulai dengan DataLab
• Cara membuat histogram di Plotly 
• Berbagai cara menyesuaikan histogram Anda
• Cara menerapkan filter 

Jika Anda mencari sumber lain tentang pembuatan histogram atau penggunaan Plotly, lihat tautan berikut:

• Histogram di Matplotlib
• Cara membuat Histogram dengan ggplot2
• Intermediate Interactive Data Visualization with Plotly in R