mailinapp
Documentation menu

Blocco Sankey

Bande di flusso proporzionale tra nodi con nome — righe From, To e Value, ad es. sorgente di traffico → landing page → conversione. È la forma adatta per tracciare dove va il volume mentre si muove attraverso una sequenza di fasi, quando la singola sequenza lineare di un imbuto semplice non basta a mostrare percorsi che si ramificano.

Come funziona

A differenza di ogni grafico consimile di questa famiglia, i nodi di un diagramma Sankey non vengono inseriti direttamente — non esiste affatto una colonna "nodo" da compilare. I nodi derivano invece dalle etichette che si ripetono nelle colonne From e To: digita "Visited" come valore From in una riga e come valore To in un'altra, ed è lo stesso nodo in entrambi i casi. Viene calcolata anche la posizione da sinistra a destra di ogni nodo (in quale livello verticale si trova), tramite un passaggio a percorso più lungo sul grafo diretto descritto dalle tue righe. Un nodo senza flusso in ingresso parte dal livello più a sinistra, e ogni altro nodo si posiziona un livello oltre il proprio predecessore più a monte. Nulla di tutto ciò è qualcosa che posizioni a mano.

Il valore di ogni collegamento è una quantità positiva pura — un flusso non ha una lettura "negativa" significativa, quindi un valore digitato pari a zero o negativo viene scartato al momento del raggruppamento invece di essere disegnato come una banda all'indietro o a larghezza zero. Un self-loop (una riga il cui From e To coincidono) viene ignorato del tutto, poiché un nodo che confluisce in se stesso non ha una banda significativa in un layout da sinistra a destra. Righe ripetute che descrivono la stessa coppia From/To vengono sommate insieme, non sovrascritte — due righe che dicono entrambe "Referral → Signed up" significano davvero il doppio del flusso, a differenza di una singola misurazione che una modifica successiva dovrebbe sostituire.

Il colore di un collegamento assume per impostazione predefinita quello del proprio nodo sorgente (la classica lettura Sankey "colorato per origine"), a meno che tu non lo sovrascriva per riga tramite la cella facoltativa Colore flusso. I colori dei nodi in sé non sono direttamente configurabili — un nodo assume semplicemente il successivo slot di colore fisso nell'ordine di prima comparsa, la stessa assegnazione di colore basata sull'identità usata da ogni altro grafico di questa famiglia.

Oltre il limite di nodi o collegamenti (12 nodi, 24 collegamenti), un nodo in eccesso viene scartato, non accorpato. Si tratta di una differenza deliberata rispetto al modo in cui il grafico a torta o il treemap gestiscono l'eccesso. Unire due estremità di flusso distinte in un unico nodo sintetico "Altro" rappresenterebbe in modo scorretto ciò che il diagramma sta effettivamente mostrando, poiché lo scopo stesso di un Sankey è tracciare percorsi distinti, non riepilogare una quota di un totale.

Anche qualsiasi collegamento la cui sorgente o destinazione sia stata eliminata insieme a un nodo tagliato viene scartato. La tabella dei dati, tuttavia, elenca comunque ogni riga che hai inserito, indipendentemente dal fatto che sia finita nel diagramma disegnato, inclusi i flussi che un errore di inserimento ciclico (A → B → A) lascia non disegnati ma comunque reali. Nulla di ciò che digiti scompare mai silenziosamente dalla vista.

Campi configurabili:

  • Titolo del grafico — testo di intestazione facoltativo sopra il grafico.
  • Flussi (from, to, value) — l'elenco delle righe: un'etichetta From, un'etichetta To, un Value numerico, e una sovrascrittura facoltativa per riga tramite Colore flusso.
  • Colore di sfondo, padding, bordo e raggio del bordo sulla scheda.
  • Colore/dimensione del titolo e colore/dimensione della legenda — stile del testo per l'intestazione e per il testo di legenda/tabella sotto l'immagine.

Se non è ancora stata inserita alcuna riga di flusso valida — tutte le righe vuote, con self-loop o non positive — il blocco salta l'immagine. Renderizza solo il proprio titolo e il contorno della scheda, con un semplice avviso "Aggiungi almeno una riga di dati di flusso (from, to, value) per renderizzare questo grafico" al posto dell'immagine.

Esempi

Un diagramma di percorso utente — Visited → Signed up → Purchased, con un secondo ramo verso Bounced e un terzo verso Churned — rende visibili in un'unica immagine sia l'abbandono sia la ramificazione, laddove un imbuto costringerebbe tutto in un'unica linea. Un flusso di allocazione budget (Revenue → Department budgets → Line items) offre a un recap finanziario una traccia visiva di dove si muove il denaro fase per fase. Un team di assistenza può far fluire il volume dei ticket da Canale (email/chat/telefono) attraverso Categoria (fatturazione/bug/come-fare) fino a Risoluzione (risolto/escalato), facendo emergere quali canali alimentano quali esiti.

Come appare il fallback statico

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Signup journey</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="360"
       alt="Flow diagram: Visited to Signed up 120, Visited to Bounced 380, Signed up to Purchased 45, Signed up to Churned 75" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">From</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">To</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Visited</td>
      <td style="padding:4px 8px">Signed up</td>
      <td style="padding:4px 8px">120</td>
    </tr>
  </table>
</div>

Il testo alternativo elenca ogni banda di flusso disegnata; la tabella elenca ogni riga inserita, incluse quelle che un limite di nodi/collegamenti o un layout ciclico hanno lasciato non disegnate.

Vedi anche