Plotly Shapes: Panduan untuk Memberi Anotasi dan Menata Plot

Plotly adalah salah satu library Python terkuat dan terpopuler untuk membuat grafik interaktif. Meskipun membuat bagan dasar dengan Plotly cukup mudah, visualisasi data yang benar-benar berdampak sering kali memerlukan elemen tambahan yang mengarahkan perhatian pembaca dan memberikan konteks penting. Di sinilah shape Plotly menjadi sangat berharga.

Shape adalah elemen grafis seperti persegi panjang, garis, dan lingkaran yang dapat Anda gambar di atas figure Plotly untuk memberi anotasi, menyoroti, dan menambahkan konteks penting. Ini adalah kunci untuk meningkatkan plot standar menjadi visualisasi yang kaya, mendalam, dan berkualitas publikasi.

Gambar oleh Penulis

Dalam artikel ini, kita akan membahas semua yang perlu Anda ketahui tentang shape di Plotly, mulai dari implementasi dasar hingga teknik kustomisasi lanjutan. Bagi yang baru mengenal Plotly, membiasakan diri dengan antarmuka tingkat tingginya adalah langkah awal yang baik, dan kursus Introduction to Data Visualization with Plotly in Python ini dapat membantu Anda menguasai dasar-dasar sebelum masuk ke kustomisasi yang lebih dalam seperti shape.

Apa Itu Plotly Shapes?

Plotly shapes adalah grafik vektor yang digambar pada figure untuk memberikan konteks tambahan atau menyoroti area tertentu. Anotasi ini penting untuk membangun grafik yang tidak hanya menarik secara visual tetapi juga kaya informasi.

Pentingnya shape dalam visualisasi data

Dalam visualisasi data, kejelasan sangat penting. Sementara bagan seperti scatter plot atau bar chart menyajikan data, shape membantu menceritakan kisah di balik data. Ada dua fungsi utama:

• Menyoroti tren data: Shape dapat menarik perhatian pada periode atau peristiwa kunci dalam data Anda. Misalnya, Anda dapat menggunakan persegi panjang untuk memberi arsiran pada periode resesi pada grafik deret waktu PDB atau menggambar garis untuk menandai perubahan kebijakan penting. Isyarat visual ini membantu pembaca segera memahami dampak faktor eksternal terhadap data.
• Memberikan anotasi kontekstual: Shape dapat mengitari atau menunjuk ke titik data atau klaster tertentu, seperti outlier, kelompok yang menjadi fokus, atau ambang batas kritis. Bayangkan bagan kontrol kualitas di mana Anda menggunakan lingkaran untuk menandai pengukuran yang berada di luar batas yang dapat diterima. Ini membuat interpretasi data lebih cepat dan lebih intuitif.

Jika Anda ingin sekilas melihat visualisasi data yang paling umum, kapan menggunakannya, dan kasus penggunaannya yang paling sering, lihat lembar contekan Data Visualization kami.

Gambaran jenis shape di Plotly

Plotly mendukung beberapa jenis bangun geometri yang dapat ditambahkan ke layout figure. Masing-masing didefinisikan oleh type dan parameter koordinat spesifik.

Berikut sekilas shape utama:

• Rectangle (type: 'rect'): Didefinisikan oleh dua sudut yang berseberangan (x0, y0) dan (x1, y1). Persegi panjang cocok untuk memberi arsiran pada area yang menarik atau menyoroti jendela data tertentu.
• Line (type: 'line'): Didefinisikan oleh titik awal (x0, y0) dan titik akhir (x1, y1). Garis sangat baik untuk membuat garis tren, ambang batas, atau tanda referensi.
• Circle (type: 'circle'): Didefinisikan oleh pusat (x0, y0) dan jari-jari. Lingkaran ideal untuk menekankan titik data individual atau klaster kecil. Perhatikan bahwa membuat lingkaran sering kali melibatkan pengaturan rasio aspek sumbu yang sama (fig.update_layout(yaxis_scaleanchor="x")) agar tidak terlihat seperti oval.
• Path (type: 'path'): Didefinisikan oleh string path SVG. Path memungkinkan Anda menggambar shape bebas yang kompleks, termasuk poligon. Anda menyediakan urutan perintah (seperti M untuk move, L untuk line to, Z untuk close path) untuk menggambar shape apa pun yang dibutuhkan. Ini adalah opsi paling fleksibel untuk membuat anotasi geometri kustom.

Memahami tipe dasar ini adalah langkah pertama menuju penguasaan anotasi visual di figure Plotly Anda.

Menambahkan Shape ke Grafik Plotly

Mengimplementasikan shape Plotly dalam visualisasi Anda melibatkan pemahaman dua pendekatan utama: metode add_shape() untuk shape individual dan pendekatan update_layout() untuk beberapa shape. Keduanya menawarkan keunggulan unik tergantung pada kasus penggunaan spesifik dan preferensi alur kerja Anda. Mari lihat cara menambahkan shape menggunakan metode add_shape().

Bagaimana cara menambahkan shape menggunakan add_shape()?

Metode utama untuk menambahkan satu shape ke figure Plotly adalah fig.add_shape(). Metode add_shape() adalah fungsi dari objek plotly.graph_objects.Figure. Anda terlebih dahulu membuat figure dasar (misalnya, scatter plot atau line chart) lalu memanggil metode ini untuk menumpuk shape di atasnya. 

Ini sangat berguna saat Anda perlu menambahkan shape secara programatis berdasarkan kondisi tertentu atau nilai data. Mari lihat contoh dasar di mana kita menyoroti area tertentu pada plot deret waktu.

import plotly.graph_objects as go
import numpy as np

# Create sample data
x = np.linspace(0, 10, 100)
y = np.sin(x) + np.random.normal(0, 0.1, 100)

# Create base figure
fig = go.Figure()
fig.add_trace(go.Scatter(x=x, y=y, mode='lines', name='Signal'))

# Add a shape using add_shape method
fig.add_shape(
    type="rect",           # Shape type
    x0=2, x1=4,           # X coordinates
    y0=-2, y1=2,          # Y coordinates
    fillcolor="rgba(255, 0, 0, 0.3)",  # Fill color with transparency
    line=dict(color="red", width=2)     # Border styling
)

fig.show()Didukung oleh

Keluaran:

Fungsionalitas plotly add_shape() menjadi sangat kuat saat Anda memahami sistem koordinat. Shape dapat mereferensikan sistem koordinat yang berbeda menggunakan parameter xref dan yref. Keduanya menentukan kerangka koordinat: gunakan 'x'/'y' untuk menafsirkan nilai dalam satuan data, atau 'paper' untuk menggunakan area plot ternormalisasi di mana 0 – 1 membentang penuh lebar/tinggi dari kiri-bawah ke kanan-atas. Mari modifikasi grafik di atas menggunakan parameter ini seperti di bawah:

# Shape referenced to data coordinates (default)
fig.add_shape(type="line", x0=1, x1=9, y0=0, y1=0,
              line=dict(color="green", width=3))

# Shape referenced to paper coordinates (0-1 scale)
fig.add_shape(type="rect", xref="paper", yref="paper",
              x0=0.1, x1=0.9, y0=0.1, y1=0.9,
              fillcolor="rgba(0, 0, 255, 0.1)")Didukung oleh

Keluaran:

Kustomisasi persegi panjang dan garis

Persegi panjang dan garis adalah shape yang paling umum digunakan untuk anotasi. Plotly menyediakan opsi kustomisasi luas untuk mengontrol tampilannya. Untuk referensi cepat tentang sintaks Plotly yang umum, Plotly Express Cheat Sheet sangat bermanfaat. Mari lihat cara mengustomisasi shape ini.

Kustomisasi shape Rectangle

Persegi panjang ditentukan oleh dua titik (x0,y0 dan x1, y1). Anda dapat menata isian dan garis tepinya secara terpisah.

# Advanced rectangle customization
fig.add_shape(
    type="rect",
    x0=3, x1=7,
    y0=-1.5, y1=1.5,
    # Fill properties
    fillcolor="rgba(50, 171, 96, 0.4)",
    # Line properties
    line=dict(
        color="darkgreen",
        width=3,
        dash="dashdot"  # Options: solid, dot, dash, longdash, dashdot
    ),
    # Layer control
    layer="below"  # Options: above, below
)Didukung oleh

Keluaran:

Kustomisasi shape Line

Garis dapat ditambahkan menggunakan metode khusus ‘add_hline’ dan ‘add_vline’ untuk garis horizontal dan vertikal yang membentang seluruh plot, atau melalui metode umum ‘add_shape’ untuk kontrol yang lebih presisi. Mari lihat contohnya:

# Horizontal threshold lines
fig.add_hline(y=1.0, line_dash="dash", line_color="red", 
              annotation_text="Upper Threshold")
fig.add_hline(y=-1.0, line_dash="dash", line_color="red", 
              annotation_text="Lower Threshold")

# Custom diagonal line
fig.add_shape(
    type="line",
    x0=0, x1=10,
    y0=-2, y1=2,
    line=dict(
        color="purple",
        width=4,
        dash="longdashdot"
    )
)Didukung oleh

Keluaran:

Contoh-contoh ini menunjukkan betapa mudahnya Anda dapat menambahkan dan menata shape Plotly dasar untuk membuat grafik lebih informatif.

Konfigurasi dan Kustomisasi Lanjutan

Selain menambahkan shape dasar, Plotly menawarkan alat yang kuat untuk mengelola banyak shape dan mengontrol hierarki visualnya. Fitur lanjutan ini penting untuk membuat visualisasi yang kompleks, berlapis, dan dinamis. Mari lihat beberapa cara mengonfigurasi dan menyesuaikan grafik.

Menggunakan plotly.update_layout untuk pembaruan dinamis

Sementara metode add_shape() cocok untuk menambahkan shape satu per satu, metode update_layout() adalah cara yang lebih efisien untuk mengelola kumpulan shape, terutama saat dihasilkan secara programatis. Alih-alih memanggil fungsi untuk setiap shape, Anda dapat meneruskan daftar dictionary shape langsung ke argumen shapes di dalam update_layout(). 

Mari lihat contoh penggunaan metode ini:

import plotly.graph_objects as go
import numpy as np

# Sample scatter plot data
x_data = np.linspace(0, 10, 50)
y_data = np.sin(x_data) + np.random.normal(0, 0.1, 50)

fig = go.Figure(data=go.Scatter(x=x_data, y=y_data, mode='markers', name='Data Points'))

# Define a list of shapes to add
shapes_to_add = [
    # A rectangle highlighting a peak area
    dict(
        type="rect",
        x0=1, x1=2.5, y0=0.8, y1=1.2,
        fillcolor="rgba(255, 165, 0, 0.4)",
        line_width=0
    ),
    # A vertical line marking an event
    dict(
        type="line",
        x0=7.5, x1=7.5, y0=0, y1=1,
        yref="paper", # Span the full plot height
        line=dict(color="red", width=2, dash="dot")
    )
]

# Add all shapes at once using update_layout
fig.update_layout(
    shapes=shapes_to_add
)

fig.show()Didukung oleh

Keluaran:

Metode ini sangat kuat untuk aplikasi dinamis, seperti dashboard Dash di mana shape perlu berubah berdasarkan masukan pengguna. Anda dapat menghasilkan daftar objek shape baru dan memperbarui layout dalam satu operasi yang rapi. Pendekatan ini menjaga kode tetap terorganisasi dan umumnya lebih efisien untuk menambahkan banyak shape sekaligus.

Layering dan kontrol z-index

Saat Anda menambahkan shape ke plot, penting untuk mengontrol apakah shape tersebut muncul di atas atau di belakang data Anda. Plotly mengelolanya melalui properti layer. Meskipun bukan z-index yang granular seperti di CSS, ini memberikan kontrol penting atas penumpukan visual.

Properti layer dapat diatur ke salah satu dari dua nilai:

• 'above': Shape digambar di atas trace data. Ini adalah pengaturan default dan berguna untuk anotasi yang harus terlihat jelas.
• 'below': Shape digambar di bawah trace data dan garis kisi. Ini ideal untuk arsiran latar atau menyoroti area tanpa menutupi titik data itu sendiri.

Urutan shape dalam daftar shapes juga penting: shape yang didefinisikan belakangan akan digambar di atas yang didefinisikan lebih awal (dalam layer yang sama).

Berikut contoh yang menunjukkan efek layering:

import plotly.graph_objects as go

fig = go.Figure(data=go.Scatter(x=[1, 2, 3, 4, 5], y=[5, 3, 4, 2, 6], mode='markers', marker_size=20, name='Data'))

# Add a shape BELOW the data points
fig.add_shape(
    type="rect",
    x0=2.5, y0=2.5, x1=4.5, y1=4.5,
    fillcolor="LightPink",
    opacity=0.8,
    layer="below", # Key parameter
    line_width=0
)

# Add a shape ABOVE the data points
fig.add_shape(
    type="circle",
    x0=0.5, y0=4.5, x1=1.5, y1=5.5,
    fillcolor="LightSeaGreen",
    opacity=0.6,
    layer="above", # Key parameter
    line_width=0
)

fig.update_layout(
    xaxis=dict(showgrid=False), # Turn off gridlines to see effect clearly
    yaxis=dict(showgrid=False)
)

fig.show()Didukung oleh

Keluaran:

Seperti yang Anda lihat, persegi panjang merah muda berada di belakang marker, sementara lingkaran hijau menutupi titik data. 

Menguasai teknik layout dan layering ini adalah bagian penting untuk membuat visualisasi data yang lebih maju dan interaktif dengan Plotly. Bagi yang bekerja dalam R, konsep serupa berlaku, seperti dibahas dalam Intermediate Interactive Data Visualization with Plotly in R.

Pengeditan shape interaktif

Salah satu fitur terkuat Plotly adalah interaktivitasnya. Anda dapat membuat shape Plotly dapat diedit, memungkinkan pengguna untuk menyeret, mengubah ukuran, dan memutarnya langsung pada plot. Fitur ini diaktifkan dengan menyetel editable=True dalam definisi shape. Mari lihat contohnya:

import plotly.graph_objects as go
import numpy as np

# Create a scatter plot
fig = go.Figure(go.Scatter(
    x=np.random.rand(100),
    y=np.random.rand(100),
    mode='markers'
))

# Add a draggable rectangle
fig.add_shape(
    type="rect",
    x0=0.2, y0=0.2, x1=0.5, y1=0.5,
    line=dict(color="RoyalBlue", width=2),
    fillcolor="LightSkyBlue",
    opacity=0.5,
    editable=True # This makes the shape interactive
)

fig.update_layout(
    xaxis=dict(range=[0, 1]),
    yaxis=dict(range=[0, 1]),
    # The 'newshape' button in the modebar allows drawing new shapes
    # The config dictionary enables editing of existing shapes
    dragmode='select'
)

# To enable editing, the modebar must be visible (default) which you will see when hovering over the graph with the mouse.

# and the plot's config can ensure editing tools are available.
fig.show(config={'edits': {'shapePosition': True}})Didukung oleh

Keluaran:

Shape interaktif sangat berguna untuk analisis data eksploratif. Misalnya, pengguna dapat menyeret persegi panjang ke berbagai periode waktu untuk melihat ringkasan statistik terkait yang diperbarui secara real-time dalam aplikasi Dash. Atau, mereka dapat mengubah ukuran lingkaran untuk memilih klaster titik yang berbeda untuk diteliti lebih lanjut.

Meskipun kuat, perhatikan bahwa penggunaan shape yang dapat diedit secara intensif dapat berdampak pada performa dalam aplikasi web yang kompleks. Namun, untuk membuat alat yang benar-benar dinamis dan digerakkan pengguna, fitur ini sangat penting. 

Menjelajahi interaktivitas adalah bagian penting dari visualisasi data modern, topik yang dibahas dengan baik dalam kursus seperti Interactive Data Visualization with Plotly in R, yang berbagi banyak prinsip dengan padanan Python-nya.

Integrasi Plotly dengan Library Lain

Meskipun shape bawaan Plotly serbaguna, terkadang Anda perlu membuat geometri yang sangat kompleks atau kustom. Dengan mengintegrasikan library khusus seperti Shapely, Anda dapat mendefinisikan poligon canggih dan menambahkannya ke visualisasi Anda sebagai shape Plotly kustom.

Menggunakan Shapely untuk shape geometri tingkat lanjut

Shapely adalah library Python yang kuat untuk manipulasi dan analisis objek geometri planar. Ini adalah alat andalan untuk geometri komputasional, sering digunakan dalam analisis geospasial. Anda dapat menggunakannya untuk membuat shape rumit seperti gabungan dua lingkaran yang saling tumpang tindih atau poligon dengan lubang di dalamnya, lalu memvisualisasikannya di Plotly.

Prosesnya melibatkan dua langkah utama:

1. Definisikan shape kompleks menggunakan Shapely.
2. Ekstrak koordinat dari objek Shapely dan format sebagai string path SVG, yang dapat dirender Plotly menggunakan type: 'path'.

String path SVG adalah bahasa mini untuk menggambar. Ia menggunakan perintah seperti M (moveto) untuk menetapkan titik awal, L (lineto) untuk menggambar garis ke titik baru, dan Z untuk menutup path dengan menggambar garis kembali ke awal.

Mari lihat cara membuat poligon dengan potongan (cutout) dan menambahkannya ke figure Plotly.

import plotly.graph_objects as go
from shapely.geometry import Polygon

# 1. Create a complex shape using Shapely
# An outer rectangle
outer_coords = [(1, 1), (1, 5), (8, 5), (8, 1)]
# An inner rectangle (this will be the "hole")
inner_coords = [(3, 2), (3, 4), (6, 4), (6, 2)]

# Define the polygon with a hole
polygon_with_hole = Polygon(outer_coords, [inner_coords])

# 2. Extract coordinates and build the SVG path string
# The exterior path
exterior_x, exterior_y = polygon_with_hole.exterior.xy
path = f"M {exterior_x[0]} {exterior_y[0]}"
for x, y in zip(exterior_x[1:], exterior_y[1:]):
    path += f" L {x} {y}"
path += " Z" # Close the exterior path

# The interior path (the hole)
interior_x, interior_y = polygon_with_hole.interiors[0].xy
path += f" M {interior_x[0]} {interior_y[0]}"
for x, y in zip(interior_x[1:], interior_y[1:]):
    path += f" L {x} {y}"
path += " Z" # Close the interior path

# Create a figure
fig = go.Figure()

# Add the complex shape to the figure
fig.add_shape(
    type="path",
    path=path,
    fillcolor="LightSeaGreen",
    opacity=0.7,
    line_color="DarkSlateGray"
)

# You can add data to see how the shape interacts with it
fig.add_trace(go.Scatter(
    x=[2, 7, 4.5], 
    y=[3, 3, 1.5], 
    mode='markers', 
    marker=dict(size=15, color='DarkRed')
))

# Use scaleanchor to ensure the shape's aspect ratio is preserved
fig.update_yaxes(scaleanchor="x", scaleratio=1)
fig.show()Didukung oleh

Keluaran:

Teknik ini sangat berharga untuk aplikasi geospasial, seperti memetakan wilayah penjualan kustom, atau dalam konteks ilmiah saat Anda perlu menyoroti area tidak beraturan yang menarik. 

Memahami cara berbagai jenis plot data dibuat dan bagaimana cara meningkatkannya dengan alat seperti ini adalah keterampilan mendasar bagi praktisi data mana pun. Anda dapat mempelajari lebih lanjut tentang berbagai jenis plot dalam panduan ini tentang cara membuatnya di Python.

Penataan dan Kustomisasi Estetika

Tampilan default shape Plotly fungsional, tetapi menyesuaikan gayanya penting untuk menciptakan visualisasi yang rapi dan terlihat profesional. Penggunaan warna, opasitas, dan isian yang cermat dapat meningkatkan keterbacaan dan daya tarik estetika secara signifikan.

Warna, opasitas, dan isian pola

Plotly memberi Anda kontrol terperinci atas tampilan shape, memungkinkan Anda menyesuaikannya dengan skema warna dan bahasa desain plot Anda.

Untuk kontrol warna dan transparansi yang presisi, sangat disarankan menggunakan spesifikasi warna RGBA (Red, Green, Blue, Alpha). Kanal a (alpha) mengontrol opasitas, dengan nilai 1 berarti sepenuhnya buram dan 0 berarti sepenuhnya transparan. 

Ini penting untuk membuat sorotan yang tidak mengganggu, di mana shape menambah konteks tanpa sepenuhnya menutupi data di bawahnya. Anda dapat memberikan nilai RGBA sebagai string seperti 'rgba(255, 99, 71, 0.5)'. Mari lihat contohnya:

import plotly.graph_objects as go
import numpy as np

# Create sample data for styling demonstration
x = np.linspace(0, 10, 100)
y1 = np.sin(x) + np.random.normal(0, 0.1, 100)
y2 = np.cos(x) + np.random.normal(0, 0.1, 100)

fig = go.Figure()
fig.add_trace(go.Scatter(x=x, y=y1, name='Signal 1', line=dict(color='blue')))
fig.add_trace(go.Scatter(x=x, y=y2, name='Signal 2', line=dict(color='red')))

# RGBA Color Technique 1: Graduated opacity for depth
opacity_levels = [0.15, 0.25, 0.35]
colors = ['255,0,0', '0,255,0', '0,0,255']

for i, (opacity, color) in enumerate(zip(opacity_levels, colors)):
    fig.add_shape(
        type="rect",
        x0=i*2.5, x1=(i+1)*2.5,
        y0=-3, y1=3,
        fillcolor=f"rgba({color},{opacity})",
        line=dict(color=f"rgb({color})", width=2),
        layer="below"
    )

# RGBA Technique 2: Color blending for overlapping regions
fig.add_shape(
    type="circle",
    x0=7.5, x1=9.5,
    y0=-1, y1=1,
    fillcolor="rgba(255, 255, 0, 0.4)",  # Semi-transparent yellow
    line=dict(color="orange", width=3),
    layer="below"
)

fig.update_layout(
    title="Advanced RGBA Color Techniques in Plotly Shapes",
    showlegend=True
)
fig.show()Didukung oleh

Keluaran:

Strategi simulasi isian pola

Meskipun Plotly tidak mendukung isian pola secara native, praktisi data dapat mensimulasikan pola isian kompleks dengan teknik kreatif. Misalnya, kita dapat membuat pola dalam plot menggunakan fungsi seperti di bawah ini:

def create_pattern_fill_simulation(fig, x0, x1, y0, y1, pattern_type='diagonal'):
    """Simulate pattern fills using multiple overlapping shapes"""
    
    if pattern_type == 'diagonal':
        # Create diagonal line pattern
        line_spacing = 0.2
        line_width = 1
        
        # Calculate diagonal lines
        range_x = x1 - x0
        range_y = y1 - y0
        num_lines = int((range_x + range_y) / line_spacing)
        
        for i in range(num_lines):
            offset = i * line_spacing
            
            # Calculate line endpoints for diagonal pattern
            start_x = max(x0, x0 + offset - range_y)
            start_y = max(y0, y1 - offset)
            end_x = min(x1, x0 + offset)
            end_y = min(y1, y1 - offset + range_x)
            
            fig.add_shape(
                type="line",
                x0=start_x, x1=end_x,
                y0=start_y, y1=end_y,
                line=dict(color="rgba(0, 0, 0, 0.3)", width=line_width),
                layer="above"
            )
    
    elif pattern_type == 'crosshatch':
        # Create crosshatch pattern
        spacing = 0.3
        
        # Vertical lines
        x_lines = np.arange(x0, x1, spacing)
        for x_line in x_lines:
            fig.add_shape(
                type="line",
                x0=x_line, x1=x_line,
                y0=y0, y1=y1,
                line=dict(color="rgba(100, 100, 100, 0.4)", width=1),
                layer="above"
            )
        
        # Horizontal lines
        y_lines = np.arange(y0, y1, spacing)
        for y_line in y_lines:
            fig.add_shape(
                type="line",
                x0=x0, x1=x1,
                y0=y_line, y1=y_line,
                line=dict(color="rgba(100, 100, 100, 0.4)", width=1),
                layer="above"
            )
    
    return fig

# Demonstration of pattern fill simulation
pattern_fig = go.Figure()
pattern_fig.add_trace(go.Scatter(x=[1, 2, 3, 4, 5], y=[2, 4, 3, 5, 1], 
                                mode='lines+markers', name='Data'))

# Add base rectangle
pattern_fig.add_shape(
    type="rect",
    x0=1.5, x1=3.5,
    y0=1, y1=5,
    fillcolor="rgba(200, 200, 255, 0.3)",
    line=dict(color="blue", width=2),
    layer="below"
)

# Apply pattern fill simulation
pattern_fig = create_pattern_fill_simulation(pattern_fig, 1.5, 3.5, 1, 5, 'diagonal')
pattern_fig.show()Didukung oleh

Simulasi efek gradasi

Membuat efek mirip gradasi memerlukan pelapisan strategis dari banyak shape dengan opasitas bervariasi. Kita dapat membuatnya dengan strategi yang sama seperti saat membuat pola, seperti ditunjukkan di bawah ini:

def create_gradient_effect(fig, x0, x1, y0, y1, start_color, end_color, num_bands=20):
    """Simulate gradient fill using multiple rectangular bands"""
    
    # Parse RGB values from color strings
    def parse_rgb(color_str):
        if color_str.startswith('rgb('):
            values = color_str[4:-1].split(',')
            return [int(v.strip()) for v in values]
        return [0, 0, 0]  # Default to black if parsing fails
    
    start_rgb = parse_rgb(start_color) if isinstance(start_color, str) else start_color
    end_rgb = parse_rgb(end_color) if isinstance(end_color, str) else end_color
    
    band_height = (y1 - y0) / num_bands
    
    for i in range(num_bands):
        # Calculate interpolated color
        ratio = i / (num_bands - 1)
        r = int(start_rgb[0] + (end_rgb[0] - start_rgb[0]) * ratio)
        g = int(start_rgb[1] + (end_rgb[1] - start_rgb[1]) * ratio)
        b = int(start_rgb[2] + (end_rgb[2] - start_rgb[2]) * ratio)
        
        # Calculate band position
        band_y0 = y0 + i * band_height
        band_y1 = band_y0 + band_height
        
        fig.add_shape(
            type="rect",
            x0=x0, x1=x1,
            y0=band_y0, y1=band_y1,
            fillcolor=f"rgba({r}, {g}, {b}, 0.7)",
            line=dict(width=0),  # No border for seamless gradient
            layer="below"
        )
    
    return fig

# Apply gradient effect
gradient_fig = go.Figure()
gradient_fig.add_trace(go.Scatter(x=list(range(10)), 
                                 y=np.random.randn(10).cumsum(),
                                 mode='lines', name='Time Series'))

gradient_fig = create_gradient_effect(
    gradient_fig, 2, 8, -3, 3, 
    [255, 0, 0], [0, 0, 255],  # Red to blue gradient
    num_bands=30
)
gradient_fig.show()Didukung oleh

Keluaran: 

Pemecahan Masalah dan Optimisasi

Meskipun menambahkan shape Plotly umumnya mudah, Anda mungkin menemui masalah dengan perataan atau performa, terutama pada plot yang kompleks. Memahami kendala umum ini dan cara mengatasinya akan menghemat banyak waktu dan upaya.

Masalah umum dengan perataan shape

Salah satu tantangan yang paling sering adalah membuat shape muncul tepat di tempat yang Anda inginkan. Garis yang dimaksudkan untuk membentang lebar plot mungkin kurang panjang, atau persegi panjang mungkin tidak sejajar dengan garis kisi seperti yang diharapkan. Masalah ini hampir selalu berasal dari referensi koordinat yang tidak tepat.

Plotly menggunakan dua sistem koordinat untuk menempatkan shape:

• Koordinat data (xref: 'x', yref: 'y'): Ini adalah default. Posisi shape terikat pada nilai di sumbu x dan y. Misalnya, x0=50 menempatkan titik pada angka 50 di sumbu x.
• Koordinat paper (xref: 'paper', yref: 'paper'): Posisi relatif terhadap area plotting itu sendiri, di mana 0 adalah awal (tepi kiri/bawah) dan 1 adalah akhir (tepi kanan/atas). Sistem ini independen dari nilai data atau rentang sumbu.

Masalah: Anda ingin menggambar garis horizontal melintasi seluruh plot pada y=10. Jika Anda mendefinisikannya dengan x0 dan x1 menggunakan koordinat data, garis hanya akan membentang rentang sumbu saat ini. Jika pengguna memperbesar atau menggeser, garis tidak akan meluas ke tepi baru.

Solusi: Untuk membuat shape membentang lebar atau tinggi penuh area plotting, gunakan koordinat 'paper' untuk sumbu yang ingin Anda bentangkan.

import plotly.graph_objects as go

fig = go.Figure(data=go.Scatter(x=[0, 10], y=[0, 20]))

# Incorrect: Vertical line that might not span the full height if the user zooms out.
# This line is drawn from y=0 to y=20 in DATA units.
fig.add_shape(
    type="line",
    x0=5, y0=0, x1=5, y1=20,
    line=dict(color="Red", width=2, dash="dash"),
    name="Incorrect Line" # Name for legend
)

# Correct: Vertical line that ALWAYS spans the full plot height.
# It is drawn from the bottom edge (0) to the top edge (1) of the PLOT area.
fig.add_shape(
    type="line",
    x0=8, y0=0, x1=8, y1=1,
    yref="paper", # The key to spanning the full height
    line=dict(color="Green", width=3),
    name="Correct Line"
)

fig.update_layout(title_text="Correctly Spanning the Plot Area")
fig.show()Didukung oleh

Keluaran:

Selalu periksa kembali properti xref dan yref untuk memastikan shape Anda berperilaku sesuai harapan selama interaksi pengguna, seperti zoom dan pan.

Pertimbangan performa

Jika Anda menambahkan beberapa shape ke plot, dampak terhadap performa dapat diabaikan. Namun, menambahkan ratusan atau ribuan shape dapat memperlambat rendering dan interaktivitas secara signifikan. Setiap shape adalah elemen SVG (Scalable Vector Graphics) individual yang ditambahkan ke DOM halaman web. Sejumlah besar elemen DOM akan membebani browser.

Berikut strategi untuk mengoptimalkan performa:

• Batasi jumlah shape: Solusi paling sederhana. Jika Anda perlu memvisualisasikan ribuan area persegi panjang, pertimbangkan apakah jenis bagan lain, seperti go.Heatmap, dapat merepresentasikan informasi yang sama dengan lebih efisien sebagai satu trace alih-alih ribuan objek shape.
• Gunakan update_layout untuk penambahan massal: Seperti disebutkan sebelumnya, menambahkan daftar shape lewat fig.update_layout(shapes=...) lebih efisien dibanding memanggil fig.add_shape() dalam loop.
• Pertimbangkan trace WebGL untuk data: Meskipun shape dirender sebagai SVG, Anda dapat meningkatkan performa keseluruhan plot yang kompleks dengan menggunakan trace berbasis WebGL (misalnya, go.Scattergl) untuk data utama Anda. Ini memindahkan rendering data ke GPU, membebaskan CPU untuk menangani shape SVG dengan lebih lancar. Ini berguna saat Anda memiliki jumlah titik data yang sangat besar dan jumlah shape yang sedang.

Untuk sebagian besar kasus penggunaan, kuncinya adalah memperhatikan jumlah elemen shape unik yang Anda buat. Sebelum menambahkan ribuan shape Plotly dalam loop, jeda dan pertimbangkan apakah ada strategi visualisasi yang lebih efisien.

Penutup

Menguasai shape Plotly mengubah grafik Anda dari representasi data sederhana menjadi kisah yang menarik dan kaya konteks. Kita telah membahas mulai dari menggambar garis dan persegi panjang dasar hingga melapisi geometri kompleks yang interaktif. 

Dengan menerapkan teknik-teknik ini, Anda dapat memandu fokus audiens, menyoroti wawasan penting, dan membangun visualisasi yang lebih intuitif yang berkomunikasi dengan jelas dan berdampak. 

Siap menerapkan keterampilan ini? Mulailah membangun visualisasi yang lebih kuat hari ini dengan menjelajahi Introduction to Data Visualization with Plotly in Python dan uji pengetahuan Anda.