VisualDDHub - final approach

Martina Garofalo
m.garofalo26@studenti.unisa.it
1Università degli studi di Salerno
Visual DDHub
Ricerca e visualizzazione di open data

Overview
1. Introduzione
• Open Data
• CKAN
• Open Data in Italia
• VisualDDHub
2. DHub
• Modalità di ricerca dei dati
• Operazioni comuni
3. VisualD
• I grafici
• Le Opzioni
• Interazione
4. Sviluppi futuri

Overview
1. Introduzione
• Open Data
• CKAN
• VisualDDHub
2. DHub
3. VisualD
• I grafici
• Le Opzioni
• Interazione
4. Sviluppi futuri

Open Data
• Un contenuto o un dato si definisce aperto se chiunque è in grado di:
utilizzarlo, ri-utilizzarlo, ridistribuirlo soggetto, al massimo, alla
richiesta di attribuzione e condivisione allo stesso modo
• Moltitudine di formati (csv, tsv, json, xml, kml, xls, rdf, HTML, geojson,
shapefile (shp, shx, dbf), turtle, owl, gml)
• Tante piattaforme diverse su cui vengono distribuiti

Overview
1. Introduzione
• Open Data
• CKAN
• VisualDDHub
2. DHub
3. VisualD
• I grafici
• Le Opzioni
• Interazione
4. Sviluppi futuri

CKAN - Comprehensive Knowledge Archive Network
• Progetto dell’Open Knowledge Foundation
• Sistema open source basato sul web per operazioni sui dati quali:
• Immagazzinamento
• Catalogazione
• Distribuzione
• Interfaccia semplice ed intuitiva
• Politiche di controllo degli accessi
• Storico delle modifiche
• Possibile creare estensioni per aggiungere funzionalità

CKAN – Struttura dei dati
Package
Id Name Title Tags[]
Id
Packages[]
Resources[]
Type
Name
url
Format
Groups[]
Id
Resources[]
Organization
Id
Resources[]

CKAN - Action API (I)
Action Descrizione Parametri principali
site_read Controlla la connessione con il sito
package_list Elenca i nomi dei dataset limit, offset
package_search Restituisce i dataset che soddisfano il criterio di
ricerca
q (the solr query), fq (filter quey), sort…
resource_search Restituisce le risorse che soddisfano il criterio di
ricerca
query (stringa o lista di stringhe nella
forma {field}:{term1})
resource_show
package_show
Restituisce i dettagli di una risorsa e di un dataset
con le rispettive risorse
id
Tutte le funzioni core possono essere usate da codici esterni tramite le Action
API, l’ultima versione (3) del servizio RESTful di CKAN.

CKAN - Action API (II)
Action Descrizione Parametri principali
group_list
organization_list
Elenca i nomi dei gruppi e delle organizzazioni order_by, sort, groups, all_fields
group_show
organization_show
Restituisce i dettagli di un gruppo e di una
organizzazione, includendo i loro dataset
id, include_datasets
tag_search Restituisce tutti i tag che contengono la stringa
data come parametro
query, limit, offset
tag_list Elenca i tag utilizzati per i dataset query, all_fields
tag_show Restituisce i dettagli di un tag, incluse le risorse
taggate in tale modo
id, include_datasets

CKAN – ckan.js
Client Javascript che facilita l’iterazione con i servizi RESTful di CKAN
• Richiede solo jQuery e Underscore.js
• Supporta l'ultima versione (3) delle API CKAN

Overview
1. Introduzione
• Open Data
• CKAN
• VisualDDHub
2. DHub
3. VisualD
• I grafici
• Le Opzioni
• Interazione
4. Sviluppi futuri

Open Data in Italia
A giugno 2013, l’Italia ha sottoscritto la G8 Open Data Charter e si è
impegnata ad attuare una serie di attività di open data nell’ambito del
Piano d’azione collettivo dei Paesi del G8.
Il governo italiano si è impegnato a potenziare il portale Dati.gov.it.
Tra le varie «promesse»:
• Interoperabilità di back‐end per automatizzare l’importazione dei
cataloghi principali che utilizzano lo standard API CKAN

Open Data in Italia – Statistiche

Open Data in Italia – Considerazioni
Tutti i portali nazionali sono in aggiornamento, non è ancora disponibile
la sezione sviluppatori per utilizzare le API
Morale: Open Data in Italia non molto open…
Regione Toscana Regione Veneto

Overview
1. Introduzione
• Open Data
• CKAN
• VisualDDHub
2. DHub
3. VisualD
• I grafici
• Le Opzioni
• Interazione
4. Sviluppi futuri

VisualDDHub – Obiettivi (I)
• Favorire la trasparenza delle pubbliche
amministrazioni
• Favorire lo sviluppo della comunità verso una
società open
• Aumentare la consapevolezza dei cittadini

VisualDDHub – Obiettivi (II)
• Permettere una visualizzazione semplice di
dati anche complessi
• Estrazione di informazioni rilevanti per
l’utente
• Guidare l’utente lungo un processo ben
collaudato per la visualizzazione di dati grezzi
INFORMAZIONE
DESIGNCOMUNICAZIONE

VisualDDHub – Processo di visualizzazione
Aquire Parse Filter Represent Refine Interact
Sono offerte
diverse modalità
di ricerca dei dati
Parsing file
csv, tsv e excel
Meccanismo delle
opzioni per permettere
all’utente di graficare
solo i dati che gli
interessano
Grazie ai semplici
input dell’utente è
costruito un grafico
con l’aiuto di
Highcharts Possibile rifinire il
grafico eliminando
serie superflue
Zoom, drilldown, download del
grafico in formato jpeg, png, pdf, svg e
dei dati raffinati in formato csv e xls.
Share on Facebook

VisualDDHub – Interfaccia (I)
• Interfaccia sviluppata con Bootstrap
• Framework HTML, CSS e JavaScript
• Open source e compatibile con le ultime versioni di tutti i moderni
browser
• Dalla versione 3.0 ha adottato il responsive design come
impostazione predefinita
• Multidispositivo e multipiattaforma
• Modello a griglia (di 12) permette di specificare lo spazio occupato da
ogni componente indipendentemente dalla grandezza dello schermo

VisualDDHub – Interfaccia (II)

Overview
1. Introduzione
• Open Data
• CKAN
• VisualDDHub
2. DHub
3. VisualD
• I grafici
• Le Opzioni
• Interazione
4. Sviluppi futuri

DHub
Vogliamo raccogliere in un solo posto dati acquisiti da luoghi diversi, purchè basati su
standard CKAN.
Sono stati coperti più scenari di utilizzo:
• Ho già un file
• Conosco l’argomento del dataset che voglio cercare
• Ho la url di una piattaforma di open data da cui mi piacerebbe prendere dati
• Non so da dove iniziare
• Voglio conoscere i dati aperti del mio territorio, ma non so dove reperirli

Overview
1. Introduzione
• Open Data
• CKAN
• VisualDDHub
2. DHub
3. VisualD
• I grafici
• Le Opzioni
• Interazione
4. Sviluppi futuri

Modalità di ricerca dei dati
Sappiamo dove sono i dati e come sono fatti, ma sono troppi, un utente potrebbe
perdersi cercando un dataset specifico
Sono offerte diverse modalità di ricerca di dataset
Per rendere il flusso di esecuzione intuitivo, l’utente è seguito «step by step»
tramite degli indicatori:

File locali
L’utente può scegliere di caricare un file dal proprio file system, questo verrà
letto in locale e ne verrà fatta una preview
SCENARIO: ho scaricato un file da un sito di open data oppure ho creato io un file inserendo dati da
me raccolti e voglio graficarlo

HTML5 FileReader
HTML5 fornisce un modo standard di interagire client-side con file
locali tramite le ‘’File API’’
L’interfaccia FileReader permette di leggere un file in modo asincrono
se usato in congiunzione con gli oggetti File, FileList e Blob
E’ possibile intercettare alcuni eventi come: onprogress, onabort,
onloadstart e onload

HTML5 FileReader
function readFile (event) {
if (window.File && window.FileReader && window.FileList && window.Blob) {
var reader = new FileReader();
var file = event.target.files[0];
reader.onload = function(e) {
var data = e.target.result;
createDataPreview(data);
};
reader.readAsBinaryString(file);
} else {
alert('The File APIs are not fully supported in this browser.');
}
}

Open Data dal Web
SCENARIO: ho la url di una piattaforma o non so da dove reperire i dati

Open Data dal Web
• L’utente può scegliere il sito di open data da cui prelevare un dataset
a partire da un catalogo prestabilito (un oggetto js in cui sono inseriti
a priori i siti nazionali e regionali)
• L’utente può inserire una url da cui prelevare i dati
• Viene controllato che tale url supporta le API CKAN

Open Data dal Web
Vengono fornite tre tipologie di filtraggio dei dataset mutualmente esclusive:
• Per gruppo e organizzazione (group_list e organization_list)
• Per tag (tag_list)
• Tutti i dataset del sito (resource_search, specificando i diversi formati che
voglio ricevere)

Open Data dal Web
Da gruppo e organizzazione
• group_show e
organization_show non
supportate da tutti i siti
incontrati
• package_search specificando
il gruppo o l’organizzazione
nel parametro q
Da tag
• tag_show troppo restrittivo
• tag_search necessario per
aumentare il numero di
dataset restituiti
Senza filtro
• resource_search, specificando
i diversi formati che voglio
ricevere
L’utente può infine decidere quale dataset graficare
Come si recupera la lista di dataset?

Ricerca per tag
SCENARIO: voglio cercare i dataset che hanno a che fare con particolari argomenti

Ricerca per tag
L’utente inserisce uno o più tag Sceglie tra i dataset restituiti dal sistema
Acque Percorsi
Acque
termali
Fonti
acque
Percorsi
storici
Percorsi
montagna
Aspettativa Necessità

Ricerca per tag – Codice (I)
function search_by_tag(){
…
var cli_tags = $("#tag-input").tagsinput('items');
for(var i in siti){
doRequest(sites[i].url, cli_tags, select);
}
}

Ricerca per tag – Codice (II)
function doRequest (cli, cli_tags, select) {
var client = new CKAN.Client(cli);
for(var j=0 ; j<cli_tags.length ; j++){
client.action("tag_search", { query: cli_tags[j] }, function(err,res) {
if(err) {
console.log("Errore: "+ err.code + ": " + err.message);
}else{
if(res.result.results.length != 0){
for(var z=0 ; z<res.result.results.length ; z++){
client.action("tag_show", { id: res.result.results[z].name }, function(err,res) {
if(err) { console.log("Errore: "+ err.code + ": " + err.message);
}else{ resourceFetch(res.result.packages, select);
$('#ds-select').selectpicker('refresh'); } })
}
}
}
})
}

Open Data intorno a te
Ma l’interessante avviene durante l’attesa dell’utente…
SCENARIO: voglio dati del mio territorio, ma non conosco le piattaforme esistenti

Open Data intorno a te – Idea
Dove sei?
• Geolocalizzare l’utente
Comune
• Ricerca Google
• Verifica dei primi tre risultati (CKAN site_read)
Provincia
• Ricerca Google
Regione
• Ricerca Google

HTML5 Geolocation API
• Permettono l’acquisizione della posizione dell’utente
• Per non compromettere la privacy, è necessario il consenso esplicito
dell’utente
• Oggetto position da cui è possibile reperire diverse info
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition( function (position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
});
}else{
//non è supportata la geolocalizzazione
}

Google Maps Geocoding API (I)
• Geocoding è il processo di trasformazione di un indirizzo nelle
corrispondenti coordinate
Es: 1600 Amphitheatre Parkway, Mountain View, CA -> latitude 37.423021 longitude -122.083739
• Reverse geocoding è il processo di trasformazione di coordinate
geografiche in un indirizzo leggibile per gli uomini
• Tra le tante classi troviamo
• Geocoder: helper per la richiesta di servizi di geocoding e reverse geocoding
• LatLng: identifica un punto spaziale

Google Maps Geocoding API (II)
var geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(lat,lon);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
opendataSearch(results[0].address_components);
});

Google Custom Search (I)
• Permette di creare un motore di ricerca in base alle proprie esigenze
• Massimo 100 richieste giornaliere
• Il formato della URI per una richiesta REST:
‘’https://www.googleapis.com/customsearch/v1?parameters’’
I parametri obbligatori sono tre:
1. API key
2. Custom search engine ID
3. Search query

Google Custom Search (II)
• Custom Search Engine creato attraverso il Control Panel o un file XML
in cui si dà la definizione
• Possibile dare priorità a risultati di un certo Tipo
schema.org, un vocabolario per la comprensione semantica del contenuto di un sito
Inserita una lista di Tipi, le ricerche restituiscono risultati inerenti a tali tipi
DataCatalog, Dataset, GovernmentOrganization
• La response contiene un array items in cui c’è la lista di risultati con
informazioni quali titolo, descrizione, url, etc…

JavaScript Promises (I)
JavaScript necessita della programmazione asincrona, realizzata tramite eventi
e callback, in quanto single-threaded
Problemi
• Difficoltà di composizione delle callback e di sincronizzazione del flusso di
elaborazione
• Difficoltà di gestione degli errori e di debug, non è possibile gestire
l’eccezione all’interno della funzione chiamante
Soluzione
• Promises

JavaScript Promises (II)
• Librerie: Q, when, WinJS, RSVP
• Ora native su JavaScript
• Oggetti che rappresentano il risultato di una chiamata di funzione asincrona
• Possono trovarsi negli stati: pending, resolved e rejected
var promise = new Promise(function(resolve, reject) {
// operazione asincrona
if (/* operazione andata a buon fine */) {
resolve(variabile);
}else{
reject(Error(‘’Problema"));
}
});
promise.then(function(variabile) {
//altre operazioni
}, function(err) {
// Error: ‘’Problema"
});

JavaScript Promises (III)
if(comune in siti)
doRequest(siti[comune].url);
else{
doGoogleResearch(comune)
.then(function(results){
ckanSiteCheck(results.items[0].formattedUrl)
.then(function(f){ if(!f){
.then(function(f){ if(!f){
//cascata di operazioni
}else doRequest(results.item[1].formattedUrl); })
}else doRequest(results.item[0].formattedUrl); })
})
}

Overview
1. Introduzione
• Open Data
• CKAN
• VisualDDHub
2. DHub
3. VisualD
• I grafici
• Le Opzioni
• Interazione
4. Sviluppi futuri

Operazioni comuni – Download dei file
Una volta ottenuta la url della risorsa scelta dall’utente dobbiamo recuperare il
contenuto effettivo del file, cioè i dati che ci interessano
Client-side
Same origin policy: non è possibile accedere a variabili, metodi e risorse che
risiedono su di un dominio/protocollo/porta diverso dal proprio
Possibili soluzioni:
• JSONP
• Cross-origin resource sharing (CORS)
Server-side
$data = file_get_contents($url);

Operazioni comuni – Parsing dei file
Supporto a file in formato csv, tsv, xls e xlsx
xls, xlsx csv matrice
Libreria Papaparse
• Identifica dinamicamente il separatore
• Identifica il tipo dei dati
• Elimina i commenti se si conosce il delimitatore
• parse() restituisce una matrice di stringhe
• Integrato con jQuery
• Segnala gli errori
Librerie JS-XLS e
JS-XLSX

Cause di mortalità dei dataset
Top 5
5. Il server non risponde
4. Il dataset non è più presente sul server
3. Righe dataset come: dato1,’’dato2’’’’,’’’’dato3’’,dato4
2. Numeri scritti con ‘,’ e non con ‘.’
1. URL risorsa contiene ‘localhost’

Overview
1. Introduzione
• Open Data
• CKAN
• VisualDDHub
2. DHub
3. VisualD
• I grafici
• Le Opzioni
• Interazione
4. Sviluppi futuri

VisualD
Sappiamo acquisire un dataset e farne il parsing
Ora l’utente deve poter:
1. creare un grafico in modo semplice filtrando il dataset scelto
2. rifinire il lavoro ottenuto
3. interagire con esso

Overview
1. Introduzione
• Open Data
• CKAN
• VisualDDHub
2. DHub
3. VisualD
• I grafici
• Le Opzioni
• Interazione
4. Sviluppi futuri

I grafici
Un’attenta analisi della semantica dei dati (dataset analizzati nell’ordine
delle centinaia) e dei tool esistenti (plotly, datacopia, datplot… ) ha portato
alle scelta dei tipi di grafici migliori per la visualizzazione di open data.
Grafico a barre
• Confronto di
dati tra le
diverse
categorie
Istogramma
• Mostra la
distribuzione
dei dati
• Possibile il
drilldown
Grafico a linee
• Mostra il trend
di dati nel
tempo
Grafico a torta
• Mostra le
proporzioni
(assimilato
all’istogramma)
• Possibile il
drilldown
Grafico a bolle
• Mostra la
concentrazione
di un dato
rispetto a due
variabili

Overview
1. Introduzione
• Open Data
• CKAN
• VisualDDHub
2. DHub
3. VisualD
• I grafici
• Le Opzioni
• Interazione
4. Sviluppi futuri

Le opzioni (I)
Ogni grafico necessita di dati diversi, in formati talvolta diversi, per
essere disegnato.
Ma come dare il controllo all’utente limitando gli errori?
Il «meccanismo» delle opzioni prova a risolvere questo problema.

Le opzioni (II)
• Limita gli errori
• Permette libertà di espressione
• Intuitivo
• Mantiene la coerenza degli elementi selezionati rispetto al grafico scelto

Le opzioni (III)
Il sistema non permette di incorrere in errori «quantitativi»
X Y Raggruppamento Grandezza
Unica Multipla Unica Multipla Unica Multipla Unica Multipla
Grafico a barre OK OK OK
Grafico a linee OK OK OK
Istogramma OK OK
Grafico a torta OK OK
Grafico a bolle OK OK OK
Rosso: errore Nero: non presentato all’utente

Le opzioni (IV)
I problemi sul «tipo» dei dati generano un errore mostrato all’utente
X Y Raggruppamento Grandezza
Numerica Stringa Numerica Stringa Numerica Stringa Numerica Stringa
Grafico a barre OK OK OK
Grafico a linee OK OK OK
Istogramma OK OK OK OK
Grafico a torta OK OK OK OK
Grafico a bolle OK OK OK
Rosso: errore Nero: non presentato all’utente

Overview
1. Introduzione
• Open Data
• CKAN
• VisualDDHub
2. DHub
3. VisualD
• I grafici
• Le Opzioni
• Interazione
4. Sviluppi futuri

Interazione
• Zoom su porzioni di dati
• Drilldown (istogramma e torta)
• Disattivazione/attivazione di serie
• Download dei dati graficati in formato csv o excel
• Download del grafico in formato jpeg, png, pdf e svg
• Share on Facebook

Social – Share on facebook (I)
Uno dei principi chiave della ‘filosofia’ open è la condivisione dei dati.
Perché allora non permettere ad un utente di mostrare i risultati ottenuti
ai propri amici?
E quale social è migliore di Facebook?

Social – Share on facebook (II)
1. Diventare uno sviluppatore Facebook
2. Creare un’applicazione e chiedere una key
3. Specificare il proprio dominio
4. Generare svg del grafico
5. Salvarlo in un nuovo file creato sul server
6. Invocare le Facebook API per condividere l’immagine

Social – Share on facebook (III)

Overview
1. Introduzione
• Open Data
• CKAN
• VisualDDHub
2. DHub
3. VisualD
• I grafici
• Le Opzioni
• Interazione
4. Sviluppi futuri

Sviluppi futuri
Estendibile
• Possibile aggiungere tipologie di grafici con piccole modifiche del
codice
• Possibile aggiungere modalità di ricerca dei dati in modo
indipendente
Idea
Permettere agli utenti di autenticarsi per avere un archivio personale di
dataset e relativi grafici.
Permettere l’utilizzo di risultati altrui tramite un archivio condiviso.

66
Grazie per l’attenzione!
Università degli studi di Salerno

VisualDDHub - final approach

Recommended

Recommended

More Related Content

Similar to VisualDDHub - final approach

Similar to VisualDDHub - final approach (20)

VisualDDHub - final approach