Forme in Plotly: guida ad annotare e stilizzare i grafici

Plotly è una delle librerie Python più potenti e popolari per creare grafici interattivi. Creare grafici di base con Plotly è semplice, ma per visualizzazioni davvero efficaci servono spesso elementi aggiuntivi che guidino l’attenzione e forniscano contesto. È qui che le forme di Plotly diventano preziose.

Le forme sono elementi grafici come rettangoli, linee e cerchi che puoi disegnare sopra le figure Plotly per annotare, evidenziare e aggiungere contesto essenziale. Sono la chiave per trasformare un grafico standard in una visualizzazione ricca, informativa e di qualità editoriale.

Immagine dell’autore

In questo articolo vedremo tutto ciò che ti serve sapere sulle forme di Plotly, dall’implementazione di base alle tecniche avanzate di personalizzazione. Se sei alle prime armi con Plotly, familiarizzare con la sua interfaccia ad alto livello è un ottimo primo passo, e questo corso Introduction to Data Visualization with Plotly in Python può aiutarti a padroneggiare le basi prima di passare a personalizzazioni più profonde come le forme.

Cosa sono le forme in Plotly?

Le forme di Plotly sono grafica vettoriale disegnata su una figura per fornire contesto aggiuntivo o evidenziare aree specifiche. Queste annotazioni sono importanti per costruire grafici non solo gradevoli, ma anche ricchi di informazioni.

L’importanza delle forme nella visualizzazione dei dati

Nella visualizzazione dei dati la chiarezza è fondamentale. Mentre grafici come scatter o barre presentano i dati, le forme aiutano a raccontarne la storia. Svolgono due funzioni principali:

• Evidenziare tendenze nei dati: le forme possono attirare l’attenzione su periodi o eventi chiave nei tuoi dati. Per esempio, puoi usare un rettangolo per ombreggiare un periodo di recessione in una serie temporale del PIL o tracciare una linea per segnare un importante cambio di politica. Questo segnale visivo aiuta chi guarda a cogliere subito l’impatto di fattori esterni sui dati.
• Fornire annotazioni contestuali: le forme possono cerchiare o indicare punti o cluster specifici, come outlier, gruppi di interesse o soglie critiche. Immagina un grafico di controllo qualità in cui usi cerchi per segnalare misurazioni fuori dai limiti accettabili. Questo rende l’interpretazione più rapida e intuitiva.

Se vuoi una panoramica rapida delle visualizzazioni più comuni, quando usarle e i casi d’uso tipici, dai un’occhiata alla nostra cheat sheet sulla Data Visualization.

Panoramica dei tipi di forme in Plotly

Plotly supporta diversi tipi di forme geometriche che possono essere aggiunte al layout di una figura. Ognuna è definita dal suo type e da specifici parametri di coordinata.

Ecco una rapida panoramica delle principali forme:

• Rettangolo (type: 'rect'): definito da due angoli opposti (x0, y0) e (x1, y1). I rettangoli sono ideali per ombreggiare aree di interesse o evidenziare una specifica finestra di dati.
• Linea (type: 'line'): definita da un punto di inizio (x0, y0) e uno di fine (x1, y1). Le linee sono ottime per creare trendline, soglie o marker di riferimento.
• Cerchio (type: 'circle'): definito da un centro (x0, y0) e un raggio. I cerchi sono ideali per enfatizzare singoli punti dati o piccoli cluster. Nota che per ottenere un cerchio è spesso necessario impostare un rapporto d’aspetto uguale per gli assi (fig.update_layout(yaxis_scaleanchor="x")) per evitare che sembri un’ellisse.
• Percorso (type: 'path'): definito da una stringa di percorso SVG. I path consentono di disegnare forme complesse e libere, inclusi poligoni. Fornisci una sequenza di comandi (come M per spostare, L per tracciare una linea, Z per chiudere il percorso) per disegnare qualsiasi forma ti serva. È l’opzione più versatile per creare annotazioni geometriche personalizzate.

Capire questi tipi di base è il primo passo per padroneggiare le annotazioni visive nelle tue figure Plotly.

Aggiungere forme ai grafici Plotly

Implementare le forme di Plotly nelle tue visualizzazioni implica due approcci principali: il metodo add_shape() per singole forme e l’approccio update_layout() per forme multiple. Entrambi offrono vantaggi specifici a seconda del caso d’uso e del flusso di lavoro. Vediamo come aggiungere forme usando il metodo add_shape().

Come aggiungere forme usando add_shape()?

Il metodo principale per aggiungere una singola forma a una figura Plotly è fig.add_shape(). Il metodo add_shape() è una funzione dell’oggetto plotly.graph_objects.Figure. Prima crei la figura di base (ad esempio, uno scatter o un grafico a linee) e poi chiami questo metodo per stratificare la forma sopra. 

Questo è particolarmente utile quando devi aggiungere forme in modo programmatico in base a determinate condizioni o valori. Vediamo un esempio di base in cui evidenziamo una regione specifica in un grafico di serie temporale.

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()Offerto da

Output:

La funzionalità add_shape() di Plotly diventa particolarmente potente quando comprendi il sistema di coordinate. Le forme possono riferirsi a sistemi di coordinate diversi tramite i parametri xref e yref. Specificano il frame di riferimento: usa 'x'/'y' per interpretare i valori in unità di dato, oppure 'paper' per usare l’area del grafico normalizzata in cui 0–1 copre tutta larghezza/altezza da sinistra in basso a destra in alto. Modifichiamo il grafico sopra usando questi parametri come segue:

# 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)")Offerto da

Output:

Personalizzare rettangoli e linee

I rettangoli e le linee sono le forme più usate per le annotazioni. Plotly offre ampie opzioni di personalizzazione per controllarne l’aspetto. Per un rapido riferimento alla sintassi comune di Plotly, la Plotly Express Cheat Sheet è una risorsa preziosa. Vediamo come personalizzare queste forme.

Personalizzazione dei rettangoli

I rettangoli sono definiti da due punti (x0,y0 e x1, y1). Puoi stilizzare riempimento e bordo separatamente.

# 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
)Offerto da

Output:

Personalizzazione delle linee

Le linee possono essere aggiunte usando i metodi specializzati “add_hline” e “add_vline” per linee orizzontali e verticali che attraversano l’intero grafico, oppure tramite il metodo generale “add_shape” per un controllo più preciso. Vediamo un esempio:

# 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"
    )
)Offerto da

Output:

Questi esempi mostrano quanto sia semplice aggiungere e stilizzare forme fondamentali di Plotly per rendere i grafici più informativi.

Configurazione e personalizzazione avanzate

Oltre ad aggiungere forme di base, Plotly offre strumenti potenti per gestire forme multiple e controllarne la gerarchia visiva. Queste funzionalità avanzate sono essenziali per creare visualizzazioni complesse, stratificate e dinamiche. Vediamo alcuni modi per configurare e personalizzare i grafici.

Usare plotly.update_layout per aggiornamenti dinamici

Sebbene il metodo add_shape() sia perfetto per aggiungere forme una alla volta, il metodo update_layout() è un modo più efficiente per gestire una collezione di forme, soprattutto quando sono generate in modo programmatico. Invece di chiamare una funzione per ogni forma, puoi passare direttamente un elenco di dizionari di forme all’argomento shapes all’interno di update_layout(). 

Vediamo un esempio di utilizzo di questo metodo:

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()Offerto da

Output:

Questo metodo è particolarmente potente per applicazioni dinamiche, come una dashboard Dash in cui le forme devono cambiare in base all’input dell’utente. Puoi generare un nuovo elenco di oggetti forma e aggiornare il layout in un’unica operazione pulita. Questo approccio mantiene il codice organizzato ed è in genere più performante per aggiungere un gran numero di forme in una volta sola.

Gestione dei layer e controllo dello z-index

Quando aggiungi forme a un grafico, è importante controllare se compaiono davanti o dietro ai dati. Plotly gestisce questo tramite la proprietà layer. Anche se non è uno z-index granulare come in CSS, fornisce un controllo essenziale sulla sovrapposizione visiva.

La proprietà layer può essere impostata su due valori:

• 'above': la forma è disegnata sopra le tracce dati. È l’impostazione predefinita ed è utile per annotazioni che devono essere ben visibili.
• 'below': la forma è disegnata sotto le tracce dati e le griglie. È ideale per ombreggiature di sfondo o per evidenziare regioni senza oscurare i punti dati.

L’ordine delle forme all’interno della lista shapes conta: le forme definite più tardi verranno disegnate sopra quelle definite prima (nello stesso layer).

Ecco un esempio che mostra l’effetto dei layer:

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()Offerto da

Output:

Come vedi, il rettangolo rosa sta dietro ai marker, mentre il cerchio verde si sovrappone al punto dati. 

Padroneggiare questi concetti di layout e layering è fondamentale per creare visualizzazioni più avanzate e interattive con Plotly. Per chi lavora in R, si applicano concetti simili, come esplorato in Intermediate Interactive Data Visualization with Plotly in R.

Modifica interattiva delle forme

Una delle caratteristiche più potenti di Plotly è l’interattività. Puoi rendere le forme editabili, permettendo agli utenti di trascinarle, ridimensionarle e ruotarle direttamente sul grafico. Questa funzione si attiva impostando editable=True nella definizione della forma. Vediamo un esempio:

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}})Offerto da

Output:

Le forme interattive sono utilissime per l’analisi esplorativa. Ad esempio, un utente potrebbe trascinare un rettangolo su periodi diversi per vedere statistiche sintetiche aggiornate in tempo reale in un’app Dash. Oppure potrebbe ridimensionare un cerchio per selezionare un cluster diverso di punti da analizzare.

Sebbene potenti, ricorda che un uso intensivo di forme editabili può avere impatti sulle prestazioni in applicazioni web complesse. Tuttavia, per strumenti davvero dinamici e guidati dall’utente, sono indispensabili. 

Esplorare l’interattività è una parte importante della visualizzazione moderna, un tema ben trattato in corsi come Interactive Data Visualization with Plotly in R, che condivide molti principi con la controparte in Python.

Integrare Plotly con altre librerie

Sebbene le forme integrate di Plotly siano versatili, a volte serve creare geometrie molto complesse o personalizzate. Integrandoti con librerie specializzate come Shapely, puoi definire poligoni sofisticati e aggiungerli alle tue visualizzazioni come forme personalizzate di Plotly.

Usare Shapely per forme geometriche avanzate

Shapely è una potente libreria Python per la manipolazione e l’analisi di oggetti geometrici planari. È lo strumento di riferimento per la geometria computazionale, spesso usato nell’analisi geospaziale. Puoi usarla per creare forme intricate come l’unione di due cerchi sovrapposti o un poligono con un foro, e poi visualizzarle in Plotly.

Il processo prevede due passaggi principali:

1. Definisci la forma complessa con Shapely.
2. Estrai le coordinate dall’oggetto Shapely e formattale come stringa di percorso SVG, che Plotly può renderizzare usando type: 'path'.

Una stringa di percorso SVG è un mini-linguaggio per il disegno. Usa comandi come M (moveto) per impostare il punto di partenza, L (lineto) per tracciare una linea verso un nuovo punto, e Z per chiudere il percorso tornando all’inizio.

Vediamo come creare un poligono con un ritaglio e aggiungerlo a una figura 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()Offerto da

Output:

Questa tecnica è preziosa per applicazioni geospaziali, come tracciare territori di vendita personalizzati, o in contesti scientifici in cui potresti dover evidenziare aree irregolari di interesse. 

Capire come vengono creati i diversi tipi di grafici e come possono essere migliorati con questi strumenti è una competenza fondamentale per chi lavora con i dati. Puoi saperne di più sui diversi tipi di grafici in questa guida su come crearli in Python.

Stile e personalizzazione estetica

L’aspetto predefinito delle forme in Plotly è funzionale, ma personalizzarne lo stile è importante per creare visualizzazioni curate e professionali. Un uso attento di colore, opacità e riempimenti può migliorare significativamente leggibilità e appeal estetico.

Colore, opacità e riempimenti a pattern

Plotly ti offre un controllo fine sull’aspetto delle forme, permettendoti di allinearle alla palette e al linguaggio visivo del grafico.

Per un controllo preciso su colore e trasparenza, è altamente consigliato usare la specifica RGBA (Red, Green, Blue, Alpha). Il canale a (alpha) controlla l’opacità, dove 1 è completamente opaco e 0 è completamente trasparente. 

È essenziale per creare evidenziazioni non invasive, in cui la forma aggiunge contesto senza nascondere i dati sottostanti. Puoi fornire valori RGBA come stringa, ad esempio 'rgba(255, 99, 71, 0.5)'. Vediamo un esempio:

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()Offerto da

Output:

Strategie per simulare riempimenti a pattern

Sebbene Plotly non supporti nativamente i riempimenti a pattern, è possibile simularli con tecniche creative. Ad esempio, possiamo creare pattern nel grafico usando una funzione come mostrato di seguito:

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()Offerto da

Simulare effetti gradiente

Creare effetti simili a un gradiente richiede di stratificare più forme con opacità variabile. Possiamo farlo con la stessa strategia usata per i pattern, come mostrato sotto:

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()Offerto da

Output: 

Risoluzione dei problemi e ottimizzazione

Sebbene aggiungere forme in Plotly sia in generale semplice, potresti incontrare problemi di allineamento o prestazioni, specialmente in grafici complessi. Capire questi intoppi comuni e come affrontarli ti farà risparmiare tempo e fatica.

Problemi comuni di allineamento delle forme

Una delle difficoltà più frequenti è far comparire le forme esattamente dove vuoi. Una linea che dovrebbe attraversare tutta la larghezza del grafico potrebbe non arrivare al bordo, o un rettangolo potrebbe non allinearsi come previsto con le griglie. Questi problemi derivano quasi sempre da un riferimento di coordinate errato.

Plotly usa due sistemi di coordinate per posizionare le forme:

• Coordinate dei dati (xref: 'x', yref: 'y'): è il default. La posizione della forma è legata ai valori sugli assi x e y. Per esempio, x0=50 posiziona il punto al valore 50 sull’asse x.
• Coordinate “paper” (xref: 'paper', yref: 'paper'): la posizione è relativa all’area di disegno, dove 0 è l’inizio (bordo sinistro/inferiore) e 1 è la fine (bordo destro/superiore). Questo sistema è indipendente dai valori dei dati o dai range degli assi.

Il problema: vuoi tracciare una linea orizzontale su tutto il grafico a y=10. Se la definisci con x0 e x1 in coordinate dei dati, coprirà solo l’intervallo corrente degli assi. Se l’utente fa zoom o pan, la linea non si estenderà ai nuovi bordi.

La soluzione: per far sì che una forma copra tutta la larghezza o altezza dell’area di disegno, usa le coordinate 'paper' per l’asse che vuoi coprire.

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()Offerto da

Output:

Controlla sempre le proprietà xref e yref per assicurarti che le forme si comportino come previsto durante interazioni come zoom e pan.

Considerazioni sulle prestazioni

Se aggiungi poche forme a un grafico, l’impatto sulle prestazioni è trascurabile. Tuttavia, aggiungerne centinaia o migliaia può rallentare notevolmente rendering e interattività. Ogni forma è un elemento SVG (Scalable Vector Graphics) aggiunto al DOM della pagina. Un numero elevato di elementi DOM mette sotto stress il browser.

Ecco alcune strategie per ottimizzare le prestazioni:

• Limita il numero di forme: la soluzione più semplice. Se devi visualizzare migliaia di aree rettangolari, valuta se un tipo di grafico diverso, come go.Heatmap, possa rappresentare le stesse informazioni in modo più efficiente come una singola traccia invece di migliaia di forme.
• Usa update_layout per aggiunte in blocco: come detto, aggiungere un elenco di forme tramite fig.update_layout(shapes=...) è più performante che chiamare fig.add_shape() in un ciclo.
• Considera tracce WebGL per i dati: sebbene le forme siano renderizzate come SVG, puoi migliorare le prestazioni generali di un grafico complesso usando tracce basate su WebGL (ad es. go.Scattergl) per i dati principali. Questo scarica il rendering dei dati sulla GPU, lasciando più risorse alla CPU per gestire le forme SVG. È utile quando hai un numero enorme di punti dati e un numero moderato di forme.

Per la maggior parte dei casi d’uso, la chiave è essere consapevoli del numero di elementi forma unici che stai creando. Prima di aggiungere migliaia di forme in un ciclo, valuta se esiste una strategia di visualizzazione più efficiente.

Conclusione

Padroneggiare le forme in Plotly trasforma i tuoi grafici da semplici rappresentazioni di dati a storie coinvolgenti e ricche di contesto. Abbiamo visto come disegnare linee e rettangoli di base fino a stratificare geometrie complesse e interattive. 

Applicando queste tecniche, puoi guidare il focus del tuo pubblico, mettere in risalto insight critici e costruire visualizzazioni più intuitive che comunicano con chiarezza ed efficacia. 

Pronto a mettere in pratica? Inizia a creare visualizzazioni più potenti oggi stesso esplorando il corso Introduction to Data Visualization with Plotly in Python e metti alla prova le tue conoscenze.