Data and their relationships are at the core of modern technological innovations. However, graphically representing complex datasets that combine hierarchical and relational links remains a crucial challenge to ensure effective understanding and usage. This thesis aims to analyze and develop visualization solutions to make such datasets more accessible and comprehensible, with a particular focus on representations that integrate both hierarchical structures and relationships among elements. The project stems from observations during a workplace experience, where it was noted that these types of graphs are used less frequently compared to other representation methods, despite their communicative potential. Using the D3.js library, a graphical storytelling approach was developed that combines a tree diagram to represent hierarchy and a chord diagram to highlight relationships between leaves. The adopted approach included several iterative steps that integrated data analysis with user experience studies. This process led to the creation of an innovative graphical solution that combines static and dynamic elements to produce a richer representation, similar to an interactive infographic. The main conclusion of the study highlights that the effectiveness of such visualizations significantly increases when they are combined with other graphs or narrative explanations, maximizing their explanatory and communicative power. The results of this thesis provide a valuable contribution to improving the understanding and adoption of complex visualizations, with potential applications in business, academic, and data storytelling contexts.

I dati e le loro relazioni costituiscono il fulcro delle moderne innovazioni tecnologiche. Tuttavia, rappresentare graficamente dataset complessi, che combinano legami gerarchici e relazionali, rimane una sfida cruciale per garantire comprensione e utilizzo efficaci. Questa tesi si propone di analizzare e sviluppare soluzioni di visualizzazione che rendano tali dataset più accessibili e comprensibili, con un focus particolare su rappresentazioni che integrino sia strutture gerarchiche che relazioni tra elementi. Il progetto nasce dall'osservazione, durante un'esperienza lavorativa aziendale, che grafici di questo tipo risultano meno utilizzati rispetto ad altre forme di rappresentazione, nonostante il loro potenziale comunicativo. Attraverso l'uso della libreria D3.js, si è sperimentato uno storytelling grafico che combina un diagramma ad albero per rappresentare la gerarchia e un diagramma a corde per evidenziare le relazioni tra le foglie. L'approccio adottato ha incluso una serie di passaggi iterativi che hanno integrato l'analisi dei dati con studi sulla user experience. Questo percorso ha portato alla formulazione di una soluzione grafica innovativa, che unisce grafici statici a elementi dinamici per creare una rappresentazione più ricca, simile a un'infografica interattiva. La conclusione principale dello studio evidenzia che l'efficacia di tali rappresentazioni aumenta significativamente quando vengono combinate con altre visualizzazioni o con spiegazioni narrative, massimizzando il potere espositivo e comunicativo dei grafici. I risultati della tesi offrono un contributo rilevante per migliorare la comprensione e l'adozione di visualizzazioni complesse, con potenziali applicazioni nei contesti aziendali, accademici e di data storytelling.

Visualizzazione di Dataset con Strutture Gerarchiche e Relazionali: Sviluppo di Grafici con D3.js

DALL'AMICO, MARTINA
2024/2025

Abstract

Data and their relationships are at the core of modern technological innovations. However, graphically representing complex datasets that combine hierarchical and relational links remains a crucial challenge to ensure effective understanding and usage. This thesis aims to analyze and develop visualization solutions to make such datasets more accessible and comprehensible, with a particular focus on representations that integrate both hierarchical structures and relationships among elements. The project stems from observations during a workplace experience, where it was noted that these types of graphs are used less frequently compared to other representation methods, despite their communicative potential. Using the D3.js library, a graphical storytelling approach was developed that combines a tree diagram to represent hierarchy and a chord diagram to highlight relationships between leaves. The adopted approach included several iterative steps that integrated data analysis with user experience studies. This process led to the creation of an innovative graphical solution that combines static and dynamic elements to produce a richer representation, similar to an interactive infographic. The main conclusion of the study highlights that the effectiveness of such visualizations significantly increases when they are combined with other graphs or narrative explanations, maximizing their explanatory and communicative power. The results of this thesis provide a valuable contribution to improving the understanding and adoption of complex visualizations, with potential applications in business, academic, and data storytelling contexts.
2024
Visualization of Datasets with Hierarchical and Relational Structures: Development of Graphs with D3.js
I dati e le loro relazioni costituiscono il fulcro delle moderne innovazioni tecnologiche. Tuttavia, rappresentare graficamente dataset complessi, che combinano legami gerarchici e relazionali, rimane una sfida cruciale per garantire comprensione e utilizzo efficaci. Questa tesi si propone di analizzare e sviluppare soluzioni di visualizzazione che rendano tali dataset più accessibili e comprensibili, con un focus particolare su rappresentazioni che integrino sia strutture gerarchiche che relazioni tra elementi. Il progetto nasce dall'osservazione, durante un'esperienza lavorativa aziendale, che grafici di questo tipo risultano meno utilizzati rispetto ad altre forme di rappresentazione, nonostante il loro potenziale comunicativo. Attraverso l'uso della libreria D3.js, si è sperimentato uno storytelling grafico che combina un diagramma ad albero per rappresentare la gerarchia e un diagramma a corde per evidenziare le relazioni tra le foglie. L'approccio adottato ha incluso una serie di passaggi iterativi che hanno integrato l'analisi dei dati con studi sulla user experience. Questo percorso ha portato alla formulazione di una soluzione grafica innovativa, che unisce grafici statici a elementi dinamici per creare una rappresentazione più ricca, simile a un'infografica interattiva. La conclusione principale dello studio evidenzia che l'efficacia di tali rappresentazioni aumenta significativamente quando vengono combinate con altre visualizzazioni o con spiegazioni narrative, massimizzando il potere espositivo e comunicativo dei grafici. I risultati della tesi offrono un contributo rilevante per migliorare la comprensione e l'adozione di visualizzazioni complesse, con potenziali applicazioni nei contesti aziendali, accademici e di data storytelling.
Grafici
d3.js
data visualization
grafici relazionali
grafici gerarchici
File in questo prodotto:
File Dimensione Formato  
Tesi_Martina_Dall'Amico.pdf

accesso aperto

Dimensione 4.43 MB
Formato Adobe PDF
4.43 MB Adobe PDF Visualizza/Apri

The text of this website © Università degli studi di Padova. Full Text are published under a non-exclusive license. Metadata are under a CC0 License

Utilizza questo identificativo per citare o creare un link a questo documento: https://hdl.handle.net/20.500.12608/81829