Elaborazione e rappresentazione grafica e interattiva dell'informazione

29
Università degli studi di Modena e Reggio Emilia Facoltà di ingegneria Corso di Laurea in Ingegneria dell’integrazione d’Impresa TESI DI LAUREA Elaborazione e rappresentazione grafica e interattiva dell’informazione Candidato Alket Cecaj Relatore Ing. Marco Mamei Anno accademico 2008-2009

Transcript of Elaborazione e rappresentazione grafica e interattiva dell'informazione

Page 1: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Università degli studi di Modena e Reggio EmiliaFacoltà di ingegneria

Corso di Laurea in Ingegneria dell’integrazione d’ImpresaTESI DI LAUREA

Elaborazione e rappresentazione grafica e interattiva dell’informazione

Candidato Alket CecajRelatore Ing. Marco Mamei

Anno accademico 2008-2009

Page 2: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Elaborazione e rappresentazione grafica e interattiva dell’informazione

Illustrazione e sperimentazione delle tecniche della rappresentazione grafica delle informazioni. In particolare prefuse, la libreria grafica scritta in linguaggio Java è lo strumento che ho sperimentato nel corso della tesi per testare le applicazioni grafiche,che possono essere utilizzate per rappresentare in diverse forme le informazioni ottenute dall’elaborazione dei dati.

Page 3: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Quantità di dati da elaborare

• Nei ultimi 20 anni anche con l’avvento di Internet e con la globalizzazione dell’economia abbiamo assistito a una esplosione di informazioni che però spesso non sono delle vere e proprie informazioni bensì dati di ogni genere, e l’informazione che a noi serve viene costruita ed elaborata a partire da questo flusso di dati.

Page 4: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Quello di cui abbiamo bisogno quindi sono dei metodi e degli strumenti efficaci di elaborazione e rappresentazione grafica di questi dati che ci possano dare una mano a comprendere meglio le diverse relazioni che

esistono fra i dati stessi ed aiutarci ad esempio a prendere delle decisioni nei luoghi di lavoro e anche nella vita di tutti i giorni.

Page 5: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Visualizzazione dell’informazione

• La visualizzazione dell’informazione (Information Visualization) è risultato dello studio interdisciplinare della rappresentazione visiva di grandi collezioni di dati (come ad esempio, i file di un file system o le linee di codice di un sistema software e l’uso di tecniche grafiche) per aiutare le persone a comprendere e analizzare i dati.

• “the process of transforming data, information, and knowledge into visual form making use of humans’ natural visual capabilities” (Gershon et al., 1998);

• Il processo della trasformazione dei dati delle informazioni e del sapere in generale, in una forma visuale facendo uso delle naturali capacità degli esseri umani oppure con l’aiuto dei computer.

Page 6: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Perché la visualizzazione può essere utile?

• La quantità e complessità dei dati di cui gli utenti possono disporre continuano ad aumentare con l’aumentare dei progressi tecnologici;

• Sfortunatamente, a causa delle ben note limitazioni cognitive e percettive degli esseri umani, la quantità di dati che un utente può esaminare e gestire in ogni momento è molto limitata;

• Risultato: abbiamo tanti dati, senza ricevere informazione da quei dati;

• Si sfrutta allora la potenza della grafica per rendere più semplice per l’utente la traduzione dei dati in informazione.

Page 7: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Dati vs. Informazioni: Un esempio

Cagliari Variabile 15/23Reggio Calabria Temporali 16/25Lecce Temporali 14/22Bari Pioggia 11/21Napoli Temporali 11/22Roma Pioggia 10/21Firenze Parz. nuvoloso 12/22 Pisa Parz. nuvoloso 12/21Bologna Parz. nuvoloso 12/21Genova Parz. nuvoloso 16/21Venezia Parz. nuvoloso 11/19Milano Parz. nuvoloso 11/19

Page 8: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Il processo di generazione di un’applicazione grafica.

• La creazione di un artefatto grafico è un processo che possiamo descrivere attraverso una sequenza di stadi successivi:

• a. Preprocessing e trasformazione dei dati;• b. Mapping visuale;• c. Creazione di viste.

Page 9: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Gli strumenti per sviluppare applicazioni grafiche usati nel corso della tesi.

• Prefuse è un software estensibile (una libreria di classi e funzioni) concepito per aiutare gli sviluppatori che realizzano programmi di visualizzazione interattiva di dati a creare applicazioni che utilizzano il linguaggio di programmazione Java.

• Esso può essere utilizzato per creare applicazioni singole, componenti da incorporare in grandi applicazioni, oppure applet da mettere in pagine Web.

• Prefuse intende semplificare notevolmente il processo di rappresentazione e manipolazione efficiente dei dati, la mappatura di rappresentazioni visive, nonché la diretta interazione con i dati visualizzati.

Page 10: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Prefuse: Il modello di riferimento • Il disegno di Prefuse si basa su un modello di riferimento della

visualizzazione dell’informazione.• Lo schema sottostante riassume questo processo.

Page 11: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Prefuse: il modello di riferimento

• Tale modello di riferimento rappresenta un’architettura software che spezza il processo di visualizzazione in una serie di passi, dall’acquisizione dei dati alla modellazione visuale e rappresentazione interattiva.

• Il primo passo rappresenta la raccolta dei dati per la visualizzazione.

• Le tabelle risultanti sono poi soggette a un processo di mappatura visuale

• L’effettiva presentazione di dati in astrazione visiva viene effettuata attraverso un processo di trasformazione durante il quale il software di elaborazione traduce i contenuti dell’astrazione visuale in un numero di viste interattive.

Page 12: Elaborazione e rappresentazione grafica e interattiva dell'informazione

I package di classi di prefuse

Page 13: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Lo sviluppo delle applicazioni Il modello generale della costruzione delle applicazioni è

quello di:• Caricare i dati da visualizzare dentro strutture dati (come

tabelle, grafi, alberi, ecc.) definite da prefuse, leggendoli da un file, caricandoli da un database oppure da una fonte dati personalizzata.

• Creare una classe Visualizzazione che mappa i dati caricati in un’astrazione visuale. Tabelle, grafi e alberi vengono aggiunti alla visualizzazione alla quale viene dato un nome per eventuali referenze.

• Creare un’istanza della classe RendererFactory (fabbrica di elaborazione) che viene coordinata con la classe Visualizzazione. La classe RendererFactory (fabbrica di elaborazione) è responsabile dell’assegnazione degli elementi di elaborazione agli oggetti di visualizzazione.

Page 14: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Lo sviluppo delle applicazioni

• Costruire una serie di Azioni (istanza della classe Actions) di elaborazione dei dati che operano nell’astrazione visuale. Queste operazioni possono involvere in tutto (es.: impostazione di locazione, di colore, forma e dimensioni, ecc.). Queste istanze di Azioni possono essere raggruppate in Liste Azioni in modo tale da eseguire vari compiti di elaborazione. Le classi Azioni invocate direttamente saranno aggiunte alla Visualizzazione e dotate di nomi con i quali possono essere riferite.

• Inizializzare uno o più display (istanza della classe Display) interattivi per vedere e manipolare gli oggetti visuali. Specificare comportamenti interattivi aggiungendo controlli ai display. Ricerca e filtraggio dei dati possono essere aggiunti usando query bindings dinamico.

Page 15: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Esempio di un’applicazione • In questo esempio si smonta un’applicazione costruita

con prefuse: la visualizzazione di una rete sociale.

Page 16: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Caricamento dei dati e la visualizzazione

• Il primo passo è quello di caricare i dati in un’istanza Graph di prefuse. La sorgente dati in questo caso è rappresentata dal file socialnet.xml ma potrebbe essere benissimo un file di un altro formato o una tabella di un database.

• Adesso viene la parte della creazione dell’astrazione visuale di un grafo. Per fare questo creiamo prima un’istanza della classe Visualizzazione che mappa i dati caricati in un’astrazione visuale, alla quale aggiungiamo il grafo di dati. Quando le istanze di Graph o Tree sono aggiunti alla visualizzazione, altri due sottogruppi sono registrati automaticamente: uno per i nodi e l’altro per i lati.

Page 17: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Moduli e azioni di elaborazione

• Viene inoltre creata un’istanza della classe RendererFactory (fabbrica o modulo di elaborazione) che ha la resposabilità di elaborare gli oggetti visuali(che nel caso della nostra applicazione sono i nodi e i lati del grafo).

• Inoltre vengono definiti una serie di azioni di elaborazione(tramite l’istanza della classe Action) che operano nel astrazione visuale. Queste operazioni possono essere: impostazione di locazione degli oggetti, di colore, forma e dimensioni, ecc.

Page 18: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Il display interattivo• Fino a questo punto abbiamo costruito l’applicazione

grafica basandosi sulla logica della programmazione senza aver modo di vederla in azione.

• Il display interattivo (che deve stare dentro a un’istanza della classe JFrame) serve proprio per questo, vedere e manipolare gli oggetti visuali. Inoltre si possono specificare le dimensioni della finestra di visualizzazione, comportamenti interattivi aggiungendo controlli di zooming, panning, ecc.

• Altre funzionalità sono le caselle di ricerca per il filtraggio dei dati, funzionalità questa che si realizza tramite query bindigs dinamico.

Page 19: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Lanciare la visualizzazione

• Rendendo visibile l’istanza della classe JFrame possiamo lanciare finalmente l’applicazione.

Page 20: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Altre applicazioni costruite con le classi di prefuse: TreeView

Page 21: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Altre applicazioni costruite con le classi di prefuse: Treemap

Page 22: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Altre applicazioni costruite con le classi di prefuse: Treemap

Page 23: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Altre applicazioni costruite con le classi di prefuse: Fisheye

Page 24: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Le applet e loro applicazioni

• Un aspetto molto interessante di prefuse è che con le sue classi si possono costruire le applet che sono delle applicazioni leggibili da un browser web.

• Essendo il web un posto dove si trovano dati di qualsiasi tipo, le applet sono molto utili per l’elaborazione e la rappresentazione visuale di questi dati. Che si tratti di dati che appartengono a un sito in particolare o di informazioni aggregate da un insieme di siti, spesso le tecniche di visualizzazione possono aiutare il “navigatore” a non perdersi nel mare di pagine e link.

Page 25: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Le applet e loro applicazioni

• Un impiego concreto ( per esempio) delle applet e quello per la costruzione di alberi e grafi per poi applicare dei algoritmi su questi grafi per ottenere informazioni come alberi di copertura, cammino minimo, flusso massimo e flusso di costo minimo.

Page 26: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Le applet e loro applicazioni

• Grafo risolto con l’algoritmo di Ford&Fulkerson.

Page 27: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Conclusioni

• Per quanto riguarda le conclusioni possiamo parlare di conclusioni a livello generale e a livello specifico cioè di prefuse e le sue potenzialità.

• Per quanto concerne la grafica in generale si può dire che è molto difficile creare modelli di valutazione che diano dei valori oggettivi sull’efficacia o sull’utilità di un certo tipo di visualizzazione. Due utenti posti di fronte alla stessa rappresentazione grafica potrebbero dare giudizi completamente diversi e contrastanti.

Page 28: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Conclusioni• Per quanto riguarda prefuse invece si può dire che il suo

utilizzo richiede una conoscenza approfondita del linguaggio Java e dell’ambiente di sviluppo.

• Un tema insidioso rimane la connettività con il database. I diversi tipi di database (Access,Oracle,MySql ecc) richiedono appositi driver per la connessione delle applicazioni con un qualsiasi database in uso.

• Altre fonti di dati possono essere file di formato diverso come ad esempio xml (come nell’esempio della rete sociale riportato sopra) ma la connettività al database rimane cruciale in quanto un database può essere aggiornato più facilmente.

Page 29: Elaborazione e rappresentazione grafica e interattiva dell'informazione

Conclusioni• Inoltre il linguaggio per la formulazione di query

interrogazione database, che è una delle potenzialità migliori di prefuse, non verrebbe sfruttato se come fonte di dati viene utilizzato un file di un formato generico invece che un database.

• Per esperienza personale posso dire che un file di formato xml è però più facile da integrare in una semplice applicazione prefuse (in quanto ho costruito una semplice applicazione, con l’aiuto delle demo, raffigurante una rete sociale) e facilita in questo senso la compressione del funzionamento delle sue classi e l’uso in generale.