Sergio Cima, Paolo Griselli, Riccardo Scalco @ Drupal Days 2014

1. LABORATORIO DI INFORMATION DESIGN
E UX CON DRUPAL - FULL DAY

2. #DrupalDaysIT
DATA

3. #DrupalDaysIT
DATA

4. #DrupalDaysIT
DATA
1300 euro 3300 euro

5. #DrupalDaysIT
DATA
1300 euro
2 polli / minuto
3300 euro
10 polli / minuto

6. #DrupalDaysIT
DATAVIZ
Richard Saul Wurman*:
“Information Design è progettare la comprensione”
!
!
!
!
!
!
!
!
!
*TED, architettura dell’informazione, n altre cose

7. #DrupalDaysIT
NON È UNA NOVITÀ: ~1800
William Playfair

8. #DrupalDaysIT
NON È UNA NOVITÀ: ~1850
John Snow

9. #DrupalDaysIT
NON È UNA NOVITÀ: ~1860
Charles Minard

10. #DrupalDaysIT
I FONDAMENTI: JAQUES BERTAIN
Dati nello spazio

11. #DrupalDaysIT
I FONDAMENTI: EDWARD TUFTE
Data-ink ratio =
Data-ink
Total ink used

12. #DrupalDaysIT
I FONDAMENTI: STEPHEN FEW
Macchina Organo
vs
(Feltron)
Dashboard

13. #DrupalDaysIT
DAI DATI ALLA CONOSCENZA
• creazione (scraping, dataset esistenti ecc)
• normalizzazione
• mining
• integrazione
• visualizzazione

14. #DrupalDaysIT

15. #DrupalDaysIT
DASHBOARD: UNSUITABLE
Troppo testo e tabelle: difficoltà di
individuare i dati salienti
!
Torte e altri oggetti rotondi: occupano
troppo spazio e la differenza di area
può non essere percepita
accuratamente
!
Grafici in pila: richiedono troppa
concentrazione
Grafici a radar: difficile paragonare le
diverse variabili.
!
Tachimetri, termometri e altre
metafore: meramente ornamentali,
rischio di rappresentare male i dati e
tenere oscure le unità di misura
(Stephen Few)

16. #DrupalDaysIT
DASHBOARD: SUITABLE
Barre, linee o combinate
!
Liste e tabelle molto semplici
!
Box plot: molto informativi, danno
conto della variabilità del fenomeno
!
Dispersione (scatterplot): ma con una
linea di correlazione (R)
(Stephen Few)

17. #DrupalDaysIT
RAW (VISUALIZZAZIONE)*
app.raw.densitydesign.org
*ma pure Excel

18. #DrupalDaysIT
ITALIAN RESEARCH MAP
irm.scienceonthenet.eu
MIUR
CNR
Zadig

19. #DrupalDaysIT
DAL DATO AL DATASET
argomento
paese
titolo del progetto
data di inizio
cordis.europa.eu

20. #DrupalDaysIT
IL DATASET
Progetti
PJ_UID PROJECT_TITLE …
… … …
9803873 An interoperability service utility… …
9803920 Coupling charge transport to
internal…
…
… … …
Contractor
ORG_UI
D
ORGANIZATION_NAME …
… … …
494959
EUROPEAN ROAD TRANSPORT
TELEMATICS IMPLEMENTATION
COORDINATION …230203 VLAAMSE OVERHEID
… … …
Collegamento
PJ_UID ORG_UID
… …
9803873 494959
9803920 230203
… …

21. #DrupalDaysIT
DATASET DRUPALIZZATO
• creazione tipi di contenuto
• configurazione import
• import
• creazione delle query
• conteggi vari
• visualizzazione
Moduli per tipo di contenuto
• date
• entity reference
• location
• views
Moduli per import
• feeds
• feeds tamper
• location feeds
• entity reference feeds
Moduli per dataviz
• d3.js
• libraries

22. #DrupalDaysIT
QUERY CHE DESIDERIAMO DA DRUPAL
• Mostra in una sola tabella il nome del contractor e i
suoi relativi progetti e data dei progetti
• Conta quanti progetti all’anno ha un contractor
e visualizza…

23. #DrupalDaysIT
D3

24. #DrupalDaysIT
VISUALIZZAZIONE

25. #DrupalDaysIT
VISUALIZZAZIONE

26. #DrupalDaysIT

27. SERGIO CIMA
sergiocima@gmail.com
@sergio_cima
!
@eidogram
PAOLO GRISELLI
RICCARDO SCALCO
paolo.griselli@demade.net
@pauligree

28. SPONSOR
MEDIA PARTNER