I dendrogrammi circolari

Introduzione

Sono passati già parecchi mesi da quando avevo scritto una serie di articoli che trattavano lo sviluppo di dendrogrammi attraverso l’uso della libreria JavaScript D3. Comunque, recentemente ho ricevuto una serie di richieste per approfondire l’argomento, che a quanto pare sembra aver goduto di un discreto successo.

libro

A tal riguardo, ho deciso di ricominciare a scrivere articoli su questa splendida libreria, trattando uno dopo l’altro moltissimi argomenti e rappresentazioni. Per ricominciare, ho deciso di concludere l’argomento dei dendrogrammi con un quinto articolo.

Se siete interessati ad approfondire l’argomento, all’interno del libro Beginning JavaScript Charts vengono presentate varie metodologie di acquisizione dati, dall’estrazione di dati da una tabella di un database (tramite PHP), alla lettura e parsing dei dati contenuti in un file esterno. Viene inoltre spiegato dettagliatamente il formato JSON, e grazie a numerosi esempi viene mostrato come sia pratico utilizzarlo in queste occasioni.

Per chiunque volesse ripartire dagli articoli precedenti…

Il codice di partenza

Partiamo dal codice dendrogram01.html presente nell’articolo Come realizzare un dendrogramma con la libreria D3 (parte 2) che produceva il seguente dendrogramma.

dendrogram_es01
Fig.1: dendrogramma

Per comodità, ripropongo qui il codice JavaScript che lo genera:

Queste sono le definizioni CSS:

e questo è il contenuto del file dendrogram02.json che consiste nella struttura dati.

Nel corso dell’articolo andremo a modificare questo codice al fine di ottenere un dendrogramma circolare.

Modifichiamo il codice

Dato che stiamo parlando di una rappresentazione circolare su cui distribuire radialmente i nodi del dendrogramma, sarà necessario esprimere le dimensioni della rappresentazione attraverso il diametro, invece che le classiche altezza e larghezza.

Quindi cancelliamo le variabili width e height ( nello snippet sono commentate per comodità). Definiamo quindi una variabile radius, che corrisponderà all’estensione dell’area di disegno. Inoltre definiamo la variabili margin, che definisce il margine da interporre tra l’area di disegno e il dendrogramma stesso. e la variabile angle, che rappresenta l’angolo di copertura del dendrogramma circolare. Il valore 360° esprime un angolo giro e quindi i nodi terminali del dendrogramma verranno distributi lungo l’intero perimentro della circoferenza. Un valore minore (per. esempio di 120°) porterebbee la rappresentazione del dendrogramma come un ventaglio (vedi Fig.4).

Di conseguenza, anche la struttura dati cluster deve essere modificata di conseguenza. Allo stesso modo anche d3.svg.diagonal deve essere modificata per essere considerata radialmente.

Anche la definizione dell’area di disegno deve essere modificata.

per quanto riguarda la rappresentazione del dendrogramma è necessario modificare solo la riga che esprime la SVG transform() dei nodi.

Adesso tutte le modifiche da apportare al codice sono state eseguite. Ecco il codice completo espresso qui per comodità.

Caricando la pagina dal browser, otteniamo la rappresentazione seguente:

dendrogram too simple
Fig.2: un dendrogramma circolare troppo semplice

Non possiamo certo dire che abbiamo ottenuto un bel dendrogramma circolare. Questo perchè il dendrogramma è troppo semplice nella sua struttura. Rendiamo la struttura più complessa, andando ad aggiungere ulteriori elementi alla struttura contenuta nel file JSON che abbiamo utilizzato.

Adesso se ricarichiamo nuovamente la pagina dal nostro browser, otteniamo:

first circular dendrogram
Fig.3: un dendrogramma circolare

Quindi adesso le cose sembrano funzionare egregiamente. Ora la distribuzione circolare ed uniforme delle foglie del dendrogramma lungo il perimetro circolare è abbastanza evidente.

dendrograms fan-shaped
Fig.4: Dendrogramma a ventaglio con angolo 120°

Finora abbiamo lavorato con dendrogrammi a due livelli oltre la root (n = 2). In realtà i livelli gestibili possono essere molti di più. Fin qui tutto bene, finchè il diametro del dendrogramma circolare sarà sufficientemente grande da visualizzare correttamente tutti gli elementi.

Gestire diversi livelli gerarchici

In realtà un caso limite che non abbiamo considerato finora, è per esempio quello di considerare dei dendrogrammi con dei rami che hanno più livelli rispetto ad altri.

Facciamo un esempio:

Se lanciamo nuovamente la pagina, otterremo questo…

dendrogram with different levels
Fig.5: dendrogramma circolare che non rispetta le distanze tra i livelli gerarchici

Se osserviamo il dendrogramma prodotto, noteremo subito che gli elementi di un livello inferiore (n = 4) sono stati messi allo stesso livello di quelli con n = 3 lungo il perimetro esterno del dendrogramma circolare.

In rete si trovano spesso dendrogrammi espressi in questa maniera, dato che l’attenzione è centrata sugli elementi terminali del dendrogramma (foglie), indipendentemente dal loro livello gerarchico di appartenenza. In realtà, se vogliamo che l’informazione gerarchica venga mantenuta rispettando le gerarchie dei vari livelli in modo corretto, è necessario sostituire il d3.layout.cluster, con d3.layout.tree.

Per ottenere la seguente rappresentazione circolare del dendrogramma.

dendrogram with different levels 2
Fig.6: Un dendrogramma circolare che rispetta i livelli gerarchici.

Adesso ogni livello gerarchico è distribuito ad una precisa distanza dal centro del dendrogramma (la root). Via via che il livello n cresce anche la distanza dal centro crescerà di conseguenza.

Lascia un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.