Corso su Open Data, Data Visualization e Infodesign

Data Visualization (Moduli 5 e 6)

Docente: Duccio Schiavon Per Unioncamere Lombardia Milano, 17 maggio 2013

Consulente free lance specializzato in analisi dei dati e data mining. Le diverse aree d’interesse a cui si è dedicato nel tempo comprendono business analytics, modellazione predittiva, data warehousing, knowledge discovery, pattern recognition, business intelligence, programmazione statistica, survey analysis, web analytics.

E’ creatore e amministratore di Statistica@Ning

Duccio Schiavon Presentazione

Introduzione

• Definizioni • Chart Chooser • Interattività e Web • Compatibilità Mobile • Accessibilità dei siti web nella PA Wizard Grafico

• Grafici base • Mappe • Grafici avanzati Librerie JavaScript

• Introduzione alla visualizzazione con librerie • Google Chart Tools • D3.js • Alternative Librerie JavaScript

• Introduzione alla visualizzazione con librerie • Google Chart Tools • D3.js • Alternative RStudio Shiny

Introduzione Sommario

L’espressione identifica una serie di pratiche, che hanno tutte in comune la conversione di sorgenti dati in rappresentazioni grafiche. Esistono principalmente tre tipologie/generi di DV:

Scientific Visualization

http://en.wikipedia.org/wiki/Scientific_Visualization

Information Visualization (Infovis)

http://en.wikipedia.org/wiki/Information_visualization

Infografica

http://eagereyes.org/blog/2010/the-difference-between-infographics-and-visualization

Introduzione Definizioni di Data Visualization

Dati strutturati

• Quantitativi (valori continui, intervalli, rapporti, ecc.)

• Categoriali (dati nominali, dati ordinali)

Dati destrutturati

• Testi

Per definizioni sulle tipologie di dato si veda il Glossario alla voce Variabile

Introduzione Cosa visualizzare

• Le semplici statistiche riassuntive nascondono spesso tendenze non facilmente evidenziabili su formato tabellare.

• Le semplici statistiche riassuntive spesso sono adeguatamente interpretabili solo dai più esperti (ricercatori, statistici, analisti, ecc.). Una loro rappresentazione grafica può consentire di ottenere informazioni utilizzabili anche ai così detti principianti.

• La visualizzazione dei dati è un metodo che, se bene utilizzata, consente di preservare il livello di complessità dei dati attraverso la rappresentazione di viste multiple del medesimo insieme di dati

Introduzione Perché visualizzare i dati

Introduzione I 7 Stadi della Visualizzazione dei Dati

Acquisizione

Analisi: identificare una struttura da associare al signfiicato

trasmesso dai dati

Filtraggio: rimuovere dai dati tutto ciò che non può essere

d’interesse per l’utilizzatore finale Setaccio (mining): applicare metodi statistici o di data mining per individuare le tendenze (pattern) o per posizionare i dati all’interno di un contesto matematico

Rappresentazione: scegliere un modello visivo di base (ad es., grafico a barre, grafico a linee, ad albero)

Rifinitura: migliorare la rappresentazione di base per renderla più chiara e più attrattiva esteticamente

Interazione: aggiunta di metodi per la manipolazione dei dati ed il controllo di funzionalità visibili

Da Fry, B. (2008). Visualizing data. Sebastopol, CA: O’Reilly Media, Inc.

Chart Chooser

Come scegliere il tipo di visualizzazione sulla base dei dati disponibili e del

particolare obiettivo analitico

Chart Chooser La Tavola Periodica dei Metodi di Visualizzazione

http://www.visual-literacy.org/periodic_table/periodic_table.html

Chart Chooser Il Suggeritore di Agarwal

http://www.labnol.org/software/find-right-chart-type-for-your-data/6523/

Chart Chooser Il Chart Chooser dei Juice Labs

http://labs.juiceanalytics.com/chartchooser/index.html

Interattività e Web

La Visualizzazione dei Dati acquista in potenza lì dove vi è Interattività. Ed il Web

è il regno dell’Interattività

Tradizionalmente la visualizzazione dei dati si limitava alla scelta del grafico più adatto a rappresentare il fenomeno sottostante ad essi e trasmetterne al meglio il significato.

Tuttavia dal momento in cui gli utenti hanno avuto accesso alla possibilità di controllare e manipolare il modo in cui visualizzare i dati, tutto in qualche modo è cambiato.

Esistono molte forme d’interazione da poter applicare alla visualizzazione dei dati. Tali forme sono principalmente distinguibili in due categorie:

Selezione e filtraggio dei dati – L’utente

può controllare quali dati visualizzare (esempio)

Organizzazione dei dati e loro

navigazione – L’utente può controllare come

visualizzare i dati (esempio)

Interattività e Web La “rivoluzione” della manipolazione (1)

Consentire agli utenti di controllare questi due aspetti è una caratteristica delle visualizzazioni più “potenti”, semplicemente perché il loro utilizzo diventa molto simile ad un’azione esplorativa.

Ciò avviene principalmente quando le visualizzazioni consentono di applicare contemporaneamente entrambe le categorie d’interazione viste in precedenza. Gapminder ne è un esempio:

Interattività e Web La “rivoluzione” della manipolazione (2)

Non vi è dubbio che il web rappresenti l’ambiente più adatto per implementare e rappresentare fenomeni avvalendosi del valore aggiunto dell’interattività/interazione. Lo sviluppo rapido e costante dei browser (Microsoft Internet Explorer, Google Chrome, Firefox Mozilla, ecc.) consente di mettere a disposizione tecnologie e linguaggi sempre più prestazionali.

HTML5 a questo riguardo è la nuova frontiera a cui tutti gli esperti di visualizzazione e non solo stanno guardando per poterne sfruttare a pieno tutte le potenzialità:

Interattività e Web Il web è l’ambiente ideale!

Per saperne di più su HTML5 Guarda il video: http://www.youtube.com/watch?v=mzPxo7Y6JyA

Come si vede dal video, per quanto riguarda ad esempio gli elementi di grafica e animazione, prima di HTML5 occorreva ricorrere ad applicativi che richiedevano per lo più:

- l’installazione su browser web di appositi plugin

- il ricorso a logiche di programmazione distinte da applicativo ad applicativo (Flash, Quick Time, Real Player, Windows Media Player)

Ad esempio, tra i modelli di visualizzazione dei dati su web, Gapminder è realizzato in Flash.

Esempio concreto di cosa è in grado di fare HTML5 è dato dai Google Doodles:

Interattività e Web HTML5

Alla base del successo che sta riscuotendo (e riscuoterà) HTML5 nelle applicazioni grafiche su web, vi è il fatto di rappresentare l’ambiente adatto d’interazione tra

• JavaScript, quale linguaggio di programmazione ampiamente già sperimentato per le applicazioni in AJAX

• CSS, come linguaggio informatico per la gestione degli stili (font, colori, dimensioni, ecc.)

• Canvas, come strumento impiegato per la resa dinamica su web delle immagini bitmap

• SVG, quale tecnologia per la gestione delle immagini vettoriali

Interattività e Web Grafica con HTML5 = Javascript + CSS + Canvas + SVG

Compatibilità Mobile

Perché ai fine della Data Visualization su web è tanto importante garantire una compatibilità con l’ambiente mobile

Compatibilità Mobile La diffusione dei dispositivi mobile nelle aziende

http://www.wireless4innovation.it/approfondimenti/politecnico-di-milano-la-diffusione-dei-tablet-nelle-imprese-italiane_43672151417.htm

Compatibilità Mobile Sito web mobile vs. App

Se un istituto o azienda ha stabilito di avere una presenza mobile per la propria attività, una delle prime considerazioni che dovrà fare e se desidera creare un’applicazione mobile (App) oppure un sito web mobile, od entrambi.

Ad una prima occhiata un’app ed un sito web mobile possono apparire molto simili, perciò determinare quale di queste tipologie sia la più adatta alle proprie esigenze dipende da un numero di fattori, incluso il tipo di utenza, il budget disponibile, gli obiettivi da raggiungere e le funzionalità richieste.

Compatibilità Mobile Differenze tra un Sito web mobile e un’App

Un sito web mobile è simile a un qualsiasi altro sito web, in quanto consiste di pagine HTML collegate tra loro a cui si ha accesso via Internet (per i dispositivi mobile, più spesso delle volte tramite connessione WiFi, 3g o 4g). La caratteristica più ovvia che lo distingue da un sito web standard è che il sito web mobile è progettato per “adattarsi” a schermi di ogni dimensione e supporta le funzionalità HTML destinate ad un utilizzo in modalità touchscreen.

Le app sono invece applicazioni da scaricare e installare sul proprio dispositivo mobile, i cui contenuti non vengono visualizzati tramite un browser web. Gli utenti visitano i portali specifici per il tipo di dispositivo (Apple’s App Store, Android Market, Blackberry App World) per trovarvi e scaricare le app più adatte al sistema operativo in uso. Nella maggior parte dei casi, ai contenuti delle app si può avere accesso senza disporre di alcuna connessione ad Internet.

Compatibilità Mobile Sito web mobile e App: qual è la scelta migliore?

Quando si deve decidere se creare un’app nativa o un sito web mobile, la scelta più appropriata dipenderà realmente dal tipo di utilizzo che se ne farà. Se si desidera sviluppare un gioco interattivo, un’app probabilmente rappresenterà la scelta migliore. Se invece il proprio obiettivo è quello di offrire contenuti facilmente consultabili alla platea più vasta possibile, il sito web mobile è probabilmente la soluzione più consigliabile.

In alcuni casi si potrebbe decidere di dotarsi di entrambe le soluzioni, ciò nonostante questa strategia prevede generalmente che ci si doti prima di un sito web mobile al fine di garantire comunque una possibilità di accesso universale via web, e poi di un’app più specifica per le esigenze più tipicamente mobile dei suoi possibili utilizzatori (geolocalizzazione, accesso ai contatti della rubrica telefonica, ecc.)

Compatibilità Mobile Vantaggi dei Siti web mobile rispetto alle App (1)

Immediatezza: I siti web mobile sono istantaneamente accessibili

Compatibilità: I siti web mobile sono compatibili con tutti i tipi di dispositivi (marche, sistemi operativi, ecc.)

Flessibilità di aggiornamento: Rispetto alle app, i siti web mobile possono essere modificati nell’aspetto, nei contenuti e nelle funzionalità molto più velocemente

Facilità d’individuazione: Rispetto alle app, i siti web mobile possono essere più facilmente individuabili (ad es., tramite internet). Anche i suoi contenuti sono più facilmente individuabili

Condivisibilità: Rispetto alle app, i siti web mobile possono essere più facilmente condivisi tra utenti, sviluppatori ed editor (tramite url, canali social, blog, ecc.)

Compatibilità Mobile Vantaggi dei Siti web mobile rispetto alle App (2)

Un sito web mobile può diventare un’app: e difficilmente può avvenire il contrario

Tempi e costi: Rispetto alle app, i siti web mobile hanno tempi di realizzazione più brevi e costi decisamente inferiori

Compatibilità Mobile Vantaggi delle App

•Interattività/Giochi

•Uso regolare/Esigenze di personalizzazione

•Calcoli complessi/Reportistica

•Funzionalità native

•Interfacciamento a funzionalità mobile

•Connessione internet non necessaria

Compatibilità Mobile Livelli di Compatibilità Mobile dei Siti Web Mobile (1)

La grande distinzione tra siti mobile-compatibili e siti non mobile-compatibili è data dalla fluidità o meno del suo layout (aspetto).

In questo senso, il layout di un sito web si può poggiare su una così detta griglia statistica o griglia fluida:

Per saperne di più sulla progettazione di siti web sulla base di griglie si visiti ad esempio

http://www.html.it/articoli/web-design-con-le-griglie-1/

Layout Statico o Fisso

In un layout Statico (o Fisso) la larghezza degli elementi di una pagina HTML è espressa in unità assolute (numero di pixel).

Qui abbiamo un esempio.

Compatibilità Mobile Livelli di Compatibilità Mobile dei Siti Web Mobile (1)

http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/

Layout Fluido di Base

In un layout Fluido di base la larghezza degli elementi di una pagina HTML è espressa in unità relative (%).

Qui abbiamo un esempio.

Compatibilità Mobile Livelli di Compatibilità Mobile dei Siti Web Mobile (2)

http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/

Layout Adattivo

In un layout Adattivo, le dimensioni degli elementi sono espresse in unità assolute (numero di pixel). Ciò nonostante esse vengono adattate a seconda delle dimensioni dello schermo sulla base di “punti d’interruzione” (breakpoint) che definiscono sulla base di quale schermo (o browser) devono essere applicate dimensioni differenti agli elementi della pagina.

Qui abbiamo un primo esempio.

Qui abbiamo un secondo esempio.

Layout Responsivo

Possiamo definire il layout Responsivo come un mix tra layout Fluido e layout Adattivo. In esso vengono utilizzate le unità relative e contemporaneamente i “punti d’interruzione”.

Qui abbiamo un primo esempio.

Qui abbiamo un secondo esempio.

Compatibilità Mobile Livelli di Compatibilità Mobile dei Siti Web Mobile (3)

http://teamtreehouse.com/library/websites/build-a-responsive-website/introduction-to-responsive-web-design/fixed-fluid-adaptive-and-responsive

Compatibilità Mobile Buoni e cattivi esempi di Visualizzazioni Mobile-compatibili

Buon esempio

Cattivo esempio

Compatibilità Mobile Strumenti di supporto/sviluppo di Siti Web Mobile

Un buon esempio di “pacchetto” progettato per lo sviluppo di siti web mobile, è certamente Twitter Bootstrap:

“Twitter Bootstrap è un set di elementi grafici, stilistici e di javascript pronti all’uso, messi a disposizione da Mark Otto (@mdo) e Jacob Thornton (@fat) gratuitamente e costantemente aggiornati. Lo scopo di Twitter Bootstrap quindi è di offrire una scorciatoia per gli sviluppatori che possono velocizzare tremendamente i tempi di sviluppo mantenendo un’interfaccia coerente e funzionale…” da EXTRAGAP.

Accessibilità dei siti web nella PA

Normative governative per garantire il più alto livello di accessibilità ai siti web della

pubblica amministrazione

Accessibilità web PA Alcuni riferimenti importanti

FONTI UFFICIALI: Manuali e guide utili: http://www.funzionepubblica.gov.it/lazione-del-ministro/linee-guida-siti-web-pa/presentazione.aspx La normativa: http://www.governo.it/Presidenza/web/accessibilita.html Osservatorio sull'accessibilità: http://www.accessibile.gov.it/ "Pubblicazioni recenti“, tra cui l'ultima circolare del 29 marzo sulle ultime disposizioni e nuovi adempimenti: http://www.digitpa.gov.it/

ALTRE FONTI: Principale associazione in italia (IWA): http://www.webaccessibile.org/

Accessibilità web PA Cosa sì e cosa no… (ad oggi)

Credits: Mario Concina

Introduzione Lettura Consigliata

Glossario

AJAX Da Wikipedia

In informatica AJAX, acronimo di Asynchronous JavaScript and XML, è una tecnica di sviluppo software per la realizzazione di applicazioni web interattive (Rich Internet Application). Lo sviluppo di applicazioni HTML con AJAX si basa su uno scambio di dati in background fra web browser e server, che consente l'aggiornamento dinamico di una pagina web senza esplicito ricaricamento da parte dell'utente. AJAX è asincrono nel senso che i dati extra sono richiesti al server e caricati in background senza interferire con il comportamento della pagina esistente. Normalmente le funzioni richiamate sono scritte con il linguaggio JavaScript. Tuttavia, e a dispetto del nome, l'uso di JavaScript e di XML non è obbligatorio, come non è necessario che le richieste di caricamento debbano essere necessariamente asincrone.

App (Smarphone) Da Wikipedia

Con il neologismo app s'intende una variante delle applicazioni informatiche dedicate ai dispositivi di tipo mobile, quali smartphone e tablet. Il termine, deriva proprio dall'abbreviazione di "applicazione".

Canvas Da Wikipedia

Canvas è una estensione dell'HTML standard che permette il rendering dinamico di immagini bitmap gestibili attraverso un linguaggio di scripting […]. Il Canvas consiste in una regione disegnabile, definita in codice HTML con gli attributi height and width. Il codice JavaScript può accedere all'area con un set completo di funzioni per il disegno, simili a quelle comuni ad altre API 2D, permettendo così la generazione dinamica di disegni. Alcuni usi possibili di Canvas includono i grafici, l'animazione e la composizione di immagini.

Data mining Da Wikipedia

Il data mining è l'insieme di tecniche e metodologie che hanno per oggetto l'estrazione di un sapere o di una conoscenza a partire da grandi quantità di dati (attraverso metodi automatici o semi-automatici) e l'utilizzo scientifico, industriale o operativo di questo sapere.

CSS Da Wikipedia

Il CSS (Cascading Style Sheets o Fogli di stile) è un linguaggio informatico usato per definire la formattazione di documenti HTML, XHTML e XMLad esempio in siti web e relative pagine web. L'introduzione del CSS si è resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti.

Geolocalizzazione Da Wikipedia

La geolocalizzazione è l'identificazione della posizione geografica nel mondo reale di un dato oggetto, come ad esempio un telefono cellulare o un computer connesso o meno ad Internet, secondo varie possibili tecniche.

HTML5 Da Wikipedia

L'HTML5 è un linguaggio di markup per la strutturazione delle pagine web. Le novità introdotte dall'HTML5 rispetto all'HTML 4 sono finalizzate soprattutto a migliorare il disaccoppiamento tra struttura, definita dal markup, caratteristiche di resa (tipo di carattere, colori, eccetera), definite dalle direttive di stile, e contenuti di una pagina web, definiti dal testo vero e proprio. Inoltre l'HTML5 prevede il supporto per la memorizzazione locale di grosse quantità di dati scaricati dal web browser, per consentire l'utilizzo di applicazioni basate su web (come per esempio le caselle di posta di Google o altri servizi analoghi) anche in assenza di collegamento a Internet.

JavaScript Da Wikipedia

JavaScript è un linguaggio di scripting orientato agli oggetti comunemente usato nella creazione di siti web (programmazione Web).

Plugin Da Wikipedia

Il plugin in campo informatico è un programma non autonomo che interagisce con un altro programma per ampliarne le funzioni. Ad esempio, un plugin per un software di grafica permette l'utilizzo di nuove funzioni non presenti nel software principale.

SVG Da Wikipedia

Scalable Vector Graphics abbreviato in SVG, indica una tecnologia in grado di visualizzare oggetti di grafica vettoriale e, pertanto, di gestire immagini scalabili dimensionalmente. Più specificamente si tratta di un linguaggio derivato dall'XML, cioè di un'applicazione del metalinguaggio posto a base degli sviluppi del Web da parte del consorzio W3C, che si pone l'obiettivo di descrivere figure bidimensionali statiche e animate.

Touchscreen Da Wikipedia

Lo schermo tattile o touch screen (altre grafie utilizzate: "touch-screen", "touchscreen") è un particolare dispositivo frutto dell'unione di uno schermo ed un digitalizzatore, che permette all'utente di interagire con una interfaccia grafica mediante le dita o particolari oggetti. Uno schermo tattile è allo stesso tempo un dispositivo di output e di input.

Variabile In statistica, una variabile rappresenta una caratteristica che può assumere più

di un insieme di valori a cui associare una misura numerica o una categoria classificatoria (ad es., reddito, età, peso, ecc. per le variabili numeriche oppure “professione”, “colore occhi”, “malattia”, ecc. per le variabili categoriali).

Le variabili numeriche si suddividono principalmente in due categorie:

• Variabili continue, che possono assumere un numero infinito di valori tra due valori distinti (es., pressione arteriosa, temperatura, ecc.)

• Variabili discrete, che assume valori da un insieme finito o conteggiabile di valori (ad es., numero di figli, numero di gambe di un animale, ecc.)

Le variabili categoriali si suddividono in due categorie:

• Variabili nominali, in cui le modalità identificano specifiche categorie, cioè caratteristiche o qualità precise non ordinabili (es., sesso, razza, mezzo di trasporto, ecc.)

• Variabili ordinali, in cui le modalità identificano categorie che possono essere organizzate sulla base di una qualche relazione d’ordine o gerarchia (es., titolo di studio, grado di soddisfazione, ecc.)