Plotly Şekilleri: Grafiklere Açıklama Ekleme ve Stil Verme Rehberi

Plotly, etkileşimli grafikler oluşturmak için en güçlü ve popüler Python kütüphanelerinden biridir. Plotly ile temel grafikler oluşturmak kolay olsa da, gerçekten etkileyici veri görselleştirmeleri, izleyicinin dikkatini yönlendiren ve önemli bağlam sağlayan ek unsurlar gerektirir. İşte bu noktada Plotly şekilleri devreye girer.

Şekiller; açıklama eklemek, vurgulamak ve kritik bağlam katmak için Plotly figürlerinizin üzerine çizebileceğiniz dikdörtgen, çizgi ve daire gibi grafiksel ögelerdir. Standart bir grafiği zengin, içgörü dolu ve yayın kalitesinde bir görselleştirmeye dönüştürmenin anahtarıdırlar.

Görsel: Yazar

Bu yazıda, temel uygulamadan ileri özelleştirme tekniklerine kadar plotly şekilleri hakkında bilmeniz gereken her şeye bakacağız. Plotly’ye yeni başlayanlar için, yüksek seviyeli arayüzüne alışmak harika bir ilk adımdır ve Python ile Plotly’de Veri Görselleştirmeye Giriş kursu, şekiller gibi daha derin özelleştirmelere geçmeden önce temelleri ustalıkla öğrenmenize yardımcı olabilir.

Plotly Şekilleri Nedir?

Plotly şekilleri, figüre ek bağlam sağlamak veya belirli alanları vurgulamak için çizilen vektör grafikleridir. Bu açıklamalar, yalnızca görsel olarak çekici değil aynı zamanda bilgi açısından zengin grafikler oluşturmak için önemlidir.

Veri görselleştirmede şekillerin önemi

Veri görselleştirmede netlik esastır. Saçılım grafiği veya çubuk grafik gibi grafikler veriyi sunarken, şekiller verinin arkasındaki hikayeyi anlatmaya yardımcı olur. İki temel işlev görürler:

• Veri eğilimlerini vurgulama: Şekiller, verinizdeki kilit dönemlere veya olaylara dikkati çekebilir. Örneğin, bir GSYİH zaman serisi grafiğinde durgunluk dönemini gölgelendirmek için bir dikdörtgen kullanabilir veya önemli bir politika değişikliğini işaretlemek için bir çizgi çizebilirsiniz. Bu görsel ipucu, izleyicinin dış etkenlerin veri üzerindeki etkisini anında kavramasına yardımcı olur.
• Bağlamsal açıklamalar sağlama: Şekiller, aykırı değerler, ilgi grupları veya kritik eşikler gibi belirli veri noktalarını veya kümeleri çevreleyebilir ya da işaret edebilir. Kabul edilebilir sınırların dışına çıkan ölçümleri işaretlemek için daireler kullandığınız bir kalite kontrol grafiğini düşünün. Bu, verinin yorumlanmasını daha hızlı ve sezgisel hale getirir.

En yaygın veri görselleştirmelerine, ne zaman kullanılacaklarına ve tipik kullanım alanlarına hızlıca göz atmak isterseniz, Veri Görselleştirme kopya kağıdımıza göz atın.

Plotly’de şekil türlerine genel bakış

Plotly, bir figürün yerleşimine eklenebilen çeşitli geometrik şekil türlerini destekler. Her biri type ve belirli koordinat parametreleriyle tanımlanır.

Başlıca şekillere kısaca bakalım:

• Dikdörtgen (type: 'rect'): Karşılıklı iki köşe (x0, y0) ve (x1, y1) ile tanımlanır. Dikdörtgenler, ilgi alanlarını gölgelendirmek veya verinin belirli bir penceresini vurgulamak için idealdir.
• Çizgi (type: 'line'): Bir başlangıç noktası (x0, y0) ve bir bitiş noktası (x1, y1) ile tanımlanır. Çizgiler, trend çizgileri, eşik değerleri veya referans işaretleri oluşturmak için mükemmeldir.
• Daire (type: 'circle'): Bir merkez (x0, y0) ve bir yarıçapla tanımlanır. Daireler, tekil veri noktalarını veya küçük kümeleri vurgulamak için idealdir. Daire oluştururken, elips gibi görünmesini önlemek için eksenler için eşit en-boy oranı ayarlamanın (fig.update_layout(yaxis_scaleanchor="x")) genellikle gerekli olduğunu unutmayın.
• Path (type: 'path'): Bir SVG path dizesi ile tanımlanır. Path’ler, çokgenler dahil olmak üzere karmaşık, serbest biçimli şekiller çizmenize olanak tanır. Gerekli şekli çizmek için M (move), L (line to), Z (close path) gibi komutların bir dizisini verirsiniz. Özel geometrik açıklamalar oluşturmak için en esnek seçenektir.

Bu temel türleri anlamak, Plotly figürlerinizde görsel açıklamalara hakim olmanın ilk adımıdır.

Plotly Grafiklerine Şekil Ekleme

Görselleştirmelerinize plotly şekilleri eklemek, iki ana yaklaşımı anlamayı gerektirir: tekil şekiller için add_shape() yöntemi ve birden fazla şekil için update_layout() yaklaşımı. Her iki yöntem de kullanım senaryonuza ve çalışma tercihlerinize bağlı olarak kendine özgü avantajlar sunar. add_shape() yöntemini kullanarak nasıl şekil ekleyeceğimize bakalım.

add_shape() kullanarak şekiller nasıl eklenir?

Bir Plotly figürüne tek bir şekil eklemenin birincil yolu fig.add_shape()’tır. add_shape() yöntemi, plotly.graph_objects.Figure nesnesinin bir fonksiyonudur. Önce temel figürünüzü (ör. bir saçılım grafiği veya çizgi grafik) oluşturur, ardından bu yöntemi çağırarak şekli üzerine katmanlarsınız. 

Bu, belirli koşullara veya veri değerlerine göre programatik olarak şekiller eklemeniz gerektiğinde özellikle kullanışlıdır. Zaman serisi grafiğinde belirli bir bölgeyi vurguladığımız basit bir örneğe bakalım.

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()Altyapı:

Çıktı:

Plotly add_shape() işlevselliği, koordinat sistemini anladığınızda özellikle güçlü hale gelir. Şekiller, xref ve yref parametrelerini kullanarak farklı koordinat sistemlerine referans verebilir. Bunlar, koordinat çerçevesini belirtir: değerleri veri birimlerinde yorumlamak için 'x'/'y' kullanın veya normalleştirilmiş grafik alanını kullanmak için 'paper' kullanın; burada 0 – 1 aralığı, soldan aşağıdan sağa yukarıya tüm genişlik/yüksekliği kapsar. Aşağıda gösterildiği gibi bu parametreleri kullanarak yukarıdaki grafiği değiştirelim:

# 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)")Altyapı:

Çıktı:

Dikdörtgen ve çizgileri özelleştirme

Dikdörtgenler ve çizgiler, açıklama için en sık kullanılan şekillerdir. Plotly, görünümlerini kontrol etmek için kapsamlı özelleştirme seçenekleri sunar. Yaygın Plotly söz dizimine hızlı bir başvuru için, Plotly Express Kopya Kağıdı vazgeçilmez bir kaynaktır. Bu şekilleri nasıl özelleştireceğimize bakalım.

Dikdörtgen şekli özelleştirme

Dikdörtgenler iki nokta (x0,y0 ve x1, y1) ile tanımlanır. Dolguyu ve kenarlığı ayrı ayrı stillendirebilirsiniz.

# 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
)Altyapı:

Çıktı:

Çizgi şekli özelleştirme

Çizgiler, tüm grafiği kaplayan yatay ve dikey çizgiler için özel ‘add_hline’ ve ‘add_vline’ yöntemleriyle ya da daha hassas kontrol için genel ‘add_shape’ yöntemiyle eklenebilir. Bir örneğe bakalım:

# 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"
    )
)Altyapı:

Çıktı:

Bu örnekler, grafikleri daha bilgilendirici hale getirmek için temel Plotly şekillerini ne kadar kolay ekleyip stillendirebileceğinizi gösterir.

Gelişmiş Yapılandırma ve Özelleştirme

Temel şekilleri eklemenin ötesinde, Plotly birden fazla şekli yönetmek ve görsel hiyerarşilerini kontrol etmek için güçlü araçlar sunar. Bu gelişmiş özellikler, karmaşık, katmanlı ve dinamik görselleştirmeler oluşturmak için gereklidir. Grafikleri yapılandırmanın ve özelleştirmenin bazı yollarına bakalım.

Dinamik güncellemeler için plotly.update_layout kullanma

add_shape() yöntemi şekilleri teker teker eklemek için mükemmelken, update_layout() yöntemi özellikle programatik olarak üretilen şekiller söz konusu olduğunda bir şekil koleksiyonunu yönetmenin daha verimli bir yoludur. Her şekil için bir fonksiyon çağırmak yerine, update_layout() içindeki shapes argümanına doğrudan bir şekil sözlüğü listesi gönderebilirsiniz. 

Bu yöntemi kullanmaya bir örnek görelim:

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()Altyapı:

Çıktı:

Bu yöntem, kullanıcı girdisine göre şekillerin değişmesi gereken bir Dash panosu gibi dinamik uygulamalar için özellikle güçlüdür. Yeni bir şekil nesnesi listesi oluşturabilir ve düzeni tek, temiz bir işlemle güncelleyebilirsiniz. Bu yaklaşım kodunuzu düzenli tutar ve çok sayıda şekli bir kerede eklemek için genellikle daha performanslıdır.

Katmanlama ve z-index kontrolü

Bir grafiğe şekiller eklediğinizde, bunların verinizin üstünde mi yoksa arkasında mı görüneceğini kontrol etmek önemlidir. Plotly bunu layer (katman) özelliğiyle yönetir. CSS’teki kadar ayrıntılı bir z-index olmasa da, görsel yığılma üzerinde gerekli kontrolü sağlar.

layer özelliği şu iki değerden birine ayarlanabilir:

• 'above': Şekil, veri izlerinin üstüne çizilir. Bu varsayılan ayardır ve net biçimde görünmesi gereken açıklamalar için kullanışlıdır.
• 'below': Şekil, veri izlerinin ve kılavuz çizgilerinin altına çizilir. Bu, veri noktalarının kendilerini gizlemeden arka plan gölgelendirmeleri veya bölgeleri vurgulamak için idealdir.

Ayrıca shapes listesi içindeki şekillerin sırası da önemlidir: listede daha sonra tanımlanan şekiller (aynı katman içinde) daha önce tanımlananların üstüne çizilir.

Katmanlamanın etkisini gösteren bir örnek:

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()Altyapı:

Çıktı:

Görüldüğü gibi pembe dikdörtgen işaretleyicilerin arkasında dururken, yeşil daire veri noktasının üstünde yer alıyor. 

Bu yerleşim ve katmanlama tekniklerine hakim olmak, Plotly ile daha gelişmiş ve etkileşimli veri görselleştirmeleri oluşturmanın kilit bir parçasıdır. R ile çalışanlar için de benzer kavramlar geçerlidir; ayrıntılar için R ile Plotly’de Orta Düzey Etkileşimli Veri Görselleştirme kursuna bakabilirsiniz.

Etkileşimli şekil düzenleme

Plotly’nin en güçlü özelliklerinden biri etkileşimliliktir. Plotly şekillerini düzenlenebilir hale getirebilir, kullanıcıların grafikte doğrudan sürükleme, yeniden boyutlandırma ve döndürme yapmasını sağlayabilirsiniz. Bu özellik, şeklin tanımında editable=True ayarlanarak etkinleştirilir. Nasıl yapılacağına bir örnek görelim:

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}})Altyapı:

Çıktı:

Etkileşimli şekiller, keşif amaçlı veri analizi için son derece kullanışlıdır. Örneğin bir kullanıcı, bir Dash uygulamasında farklı dönemler üzerinde bir dikdörtgeni sürükleyerek gerçek zamanlı güncellenen özet istatistikleri görebilir. Ya da daha ileri inceleme için farklı bir nokta kümesini seçmek amacıyla bir daireyi yeniden boyutlandırabilir.

Güçlü olmakla birlikte, düzenlenebilir şekillerin yoğun kullanımı karmaşık web uygulamalarında performans etkilerine yol açabilir. Ancak gerçekten dinamik ve kullanıcı odaklı araçlar oluşturmak için vazgeçilmezdirler. 

Etkileşimliliği keşfetmek, modern veri görselleştirmenin önemli bir parçasıdır; Python muadiliyle birçok ilkesi ortak olan R ile Plotly’de Etkileşimli Veri Görselleştirme gibi kurslarda bu konu kapsamlı biçimde ele alınır.

Plotly’yi Diğer Kütüphanelerle Entegre Etme

Plotly’nin yerleşik şekilleri çok yönlü olsa da, bazen son derece karmaşık veya özel geometriler oluşturmanız gerekebilir. Shapely gibi uzmanlaşmış kütüphanelerle entegre ederek sofistike çokgenler tanımlayabilir ve bunları özel Plotly şekilleri olarak görselleştirmelerinize ekleyebilirsiniz.

Gelişmiş geometrik şekiller için Shapely kullanma

Shapely, düzlemsel geometrik nesnelerin işlenmesi ve analizine yönelik güçlü bir Python kütüphanesidir. Coğrafi mekansal analizde sıklıkla kullanılan hesaplamalı geometri için başvurulan araçtır. Birbirini kesen iki dairenin birleşimi veya içinde delik olan bir çokgen gibi karmaşık şekiller oluşturabilir ve bunları Plotly’de görselleştirebilirsiniz.

Süreç iki ana adımdan oluşur:

1. Karmaşık şekli Shapely ile tanımlayın.
2. Shapely nesnesinden koordinatları çıkarıp, Plotly’nin type: 'path' ile işleyebileceği bir SVG path dizesi olarak biçimlendirin.

Bir SVG path dizesi, çizim için bir mini dildir. Başlangıç noktasını ayarlamak için M (moveto), yeni bir noktaya çizgi çizmek için L (lineto) ve yolu başlangıca geri döndürerek kapatmak için Z komutlarını kullanır.

Bir kesikli (içinde boşluk olan) çokgeni nasıl oluşturup bir Plotly figürüne ekleyeceğimize bakalım.

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()Altyapı:

Çıktı:

Bu teknik, özel satış bölgeleri çizmek gibi mekansal uygulamalarda ya da düzensiz ilgi alanlarını vurgulamanız gereken bilimsel bağlamlarda çok değerlidir. 

Farklı veri grafiklerinin nasıl oluşturulduğunu ve bu tür araçlarla nasıl zenginleştirilebileceğini anlamak, her veri uygulayıcısı için temel bir beceridir. Daha fazla bilgi için, Python’da nasıl oluşturulacaklarına ilişkin bu rehbere göz atabilirsiniz.

Stil ve Estetik Özelleştirme

Plotly şekillerinin varsayılan görünümü işlevseldir, ancak stillerini özelleştirmek, cilalı ve profesyonel görünümlü bir görselleştirme oluşturmak için önemlidir. Renk, opaklık ve dolguyu düşünerek kullanmak, okunabilirliği ve estetik çekiciliği önemli ölçüde artırabilir.

Renk, opaklık ve desen dolguları

Plotly, şekillerin görünümü üzerinde ince ayar kontrolü verir; böylece onları grafiğinizin renk şeması ve tasarım diliyle eşleştirebilirsiniz.

Renk ve şeffaflık üzerinde hassas kontrol için RGBA (Kırmızı, Yeşil, Mavi, Alfa) renk belirtimini kullanmanız şiddetle önerilir. a (alfa) kanalı opaklığı kontrol eder; 1 tamamen opak, 0 tamamen şeffaf anlamına gelir. 

Bu, şeklin alttaki veriyi tamamen gizlemeden bağlam eklediği, müdahaleci olmayan vurgular oluşturmak için gereklidir. RGBA değerlerini 'rgba(255, 99, 71, 0.5)' gibi bir dize olarak verebilirsiniz. Bir örneğe bakalım:

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()Altyapı:

Çıktı:

Desen dolgusu simülasyonu stratejileri

Plotly yerel olarak desen dolgularını desteklemese de, veri uygulayıcıları yaratıcı tekniklerle karmaşık dolgu desenlerini simüle edebilir. Örneğin, aşağıda gösterildiği gibi bir fonksiyon kullanarak grafikte desenler oluşturabiliriz:

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()Altyapı:

Gradyan efekt simülasyonu

Gradyan benzeri efektler oluşturmak, opaklığı değişen çoklu şekillerin stratejik olarak katmanlanmasını gerektirir. Aşağıda gösterildiği gibi, desenleri oluştururken kullandığımız aynı stratejiyle bunu oluşturabiliriz:

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()Altyapı:

Çıktı: 

Sorun Giderme ve Optimizasyon

Plotly şekilleri eklemek genellikle basit olsa da, özellikle karmaşık grafiklerde hizalama veya performans sorunlarıyla karşılaşabilirsiniz. Bu yaygın tuzakları ve nasıl ele alınacaklarını anlamak, size ciddi zaman ve emek kazandıracaktır.

Şekil hizalamasında yaygın sorunlar

En sık karşılaşılan zorluklardan biri, şekilleri tam istediğiniz yerde görünür kılmaktır. Tüm grafik genişliğini kaplaması gereken bir çizgi kısa kalabilir veya bir dikdörtgen beklendiği gibi kılavuz çizgileriyle hizalanmayabilir. Bu problemler neredeyse her zaman yanlış koordinat referansından kaynaklanır.

Plotly, şekilleri yerleştirmek için iki koordinat sistemi kullanır:

• Veri koordinatları (xref: 'x', yref: 'y'): Varsayılan olan budur. Şeklin konumu x ve y eksenlerindeki değerlere bağlıdır. Örneğin, x0=50 noktayı x ekseninde 50 işaretine yerleştirir.
• Paper koordinatları (xref: 'paper', yref: 'paper'): Konum, çizim alanının kendisine göredir; 0 başlangıç (sol/alt kenar), 1 bitiştir (sağ/üst kenar). Bu sistem, veri değerlerinden veya eksen aralıklarından bağımsızdır.

Sorun: y=10 seviyesinde tüm grafik boyunca yatay bir çizgi çizmek istiyorsunuz. Bunu x0 ve x1 değerlerini veri koordinatlarıyla tanımlarsanız, çizgi yalnızca mevcut eksen aralığını kapsar. Kullanıcı yakınlaştırır ya da kaydırırsa, çizgi yeni kenarlara uzanmaz.

Çözüm: Bir şeklin çizim alanının tam genişliğini veya yüksekliğini kaplamasını sağlamak için, kaplamak istediğiniz eksen için 'paper' koordinatlarını kullanın.

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()Altyapı:

Çıktı:

Yakınlaştırma ve kaydırma gibi kullanıcı etkileşimleri sırasında şekillerinizin beklendiği gibi davranmasını sağlamak için xref ve yref özelliklerinizi her zaman iki kez kontrol edin.

Performansla ilgili hususlar

Bir grafiğe birkaç şekil eklediğinizde performans etkisi ihmal edilebilir. Ancak yüzlerce ya da binlerce şekil eklemek, oluşturmayı ve etkileşimi önemli ölçüde yavaşlatabilir. Her şekil, web sayfasının DOM’una eklenen ayrı bir SVG (Scalable Vector Graphics) öğesidir. Çok sayıda DOM öğesi tarayıcıyı zorlayacaktır.

İşte performansı optimize etmeye yönelik stratejiler:

• Şekil sayısını sınırlayın: En basit çözümdür. Binlerce dikdörtgen alanı görselleştirmeniz gerekiyorsa, aynı bilgiyi binlerce şekil nesnesi yerine tek bir iz olarak daha verimli temsil edebilecek bir farklı grafik türü (ör. go.Heatmap) düşünüp düşünemeyeceğinizi değerlendirin.
• Toplu eklemeler için update_layout kullanın: Daha önce belirtildiği gibi, bir şekil listesini fig.update_layout(shapes=...) ile eklemek, döngü içinde fig.add_shape() çağırmaktan daha performanslıdır.
• Veri için WebGL izlerini değerlendirin: Şekillerin kendileri SVG olarak işlenirken, ana veriniz için WebGL tabanlı izler (örn. go.Scattergl) kullanarak karmaşık bir grafiğin genel performansını artırabilirsiniz. Bu, veri çizimini GPU’ya devreder ve CPU’nun SVG şekillerini daha akıcı işlemesine olanak tanır. Bu, devasa sayıda veri noktası ve orta sayıda şekliniz olduğunda kullanışlıdır.

Çoğu kullanım durumu için kilit nokta, oluşturduğunuz benzersiz şekil öğelerinin sayısına dikkat etmektir. Bir döngüde binlerce Plotly şekli eklemeden önce durup, daha performanslı bir görselleştirme stratejisi olup olmadığını düşünün.

Sonuç

Plotly şekillerine hakim olmak, grafikleri basit veri temsillerinden etkileyici, bağlam açısından zengin hikayelere dönüştürür. Temel çizgi ve dikdörtgenler çizmekten karmaşık, etkileşimli geometrileri katmanlamaya kadar inceledik. 

Bu teknikleri uygulayarak, hedef kitlenizin odağını yönlendirebilir, kritik içgörüleri vurgulayabilir ve netlik ve etkiyle iletişim kuran daha sezgisel görselleştirmeler oluşturabilirsiniz. 

Bu becerileri uygulamaya hazır mısınız? Bilginizi pekiştirmek için Python ile Plotly’de Veri Görselleştirmeye Giriş kursunu keşfederek bugün daha güçlü görselleştirmeler oluşturmaya başlayın.