Upload
ibuildings-italia
View
3.152
Download
0
Embed Size (px)
DESCRIPTION
Riccardo Scalco @ Drupal Days 2014 tutorial: http://eidogram.com/tutorials/datajoin.html
Citation preview
Drupal dashboard for
dummies with D3
Drupal dashboard for dummies with D3
Import contenuti1
Intro 41.1
Passo uno 61.2
Importazione 141.3
Viste2
Conta categorie 282.1
Conta progetti per anno per contractor 452.2
Dataviz3
Grafico dei progetti per categoria 613.1
Grafico dei progetti per anno 703.2
Drupal dashboard for dummies with D3 - 3
Import contenuti
Drupal dashboard for dummies with D3 - 4
Intro
Descrivo i passaggi del workshop e quello che ti porti a casa
Preparazione dei dati
Ogni tabella importata determina la creazione di un tipo di contenuto. Ogni campo della tabella è
un field e ogni riga è un nodo. Si prendono 500 progetti e relativi partner collegati (si prevedono
2000/3000 partner)
Campi delle tabelle
Titolo della tabella (in Drupal è necessario un titolo del nodo, a meno di non usare moduli che
bypassano il titolo).
due tabelle con tabella di collegamento. Prima fase spiegare aggregazioni su tabella progetto.
Campi tabella progetto
- id
- nome progetto
- id progetto
- data estesa
- data solo anno
- total finanziamento
- pga (senza fp7-)
Campi tabella contractors
- id
- nome
- indirizzo
- postal code
- città
- nazione
Campi tabella collegamento
- id progetto
- id contractor
Drupal dashboard for dummies with D3 - 5
Creazione tipi di contenuto
Tre tipi di contenuto per relative tabelle e con field per relativi campi di tabella
Moduli per configurare i tipi di contenuto
- date
- entity reference
- entity reference feeds
- entity api
- location
- libraries
- ctools
- views
Import
Si importano le tre tabelle
Moduli per configurare import
- feeds
- feeds tamper
- location feeds
Fase uno. Spiegazione operazioni con una tabella
- conta per categoria (torta)
- somma fondi per anno (line)
- somma dei fondi per categorie (barra)
- media dei fondi per categoria
Fase due. Spiegazione operazioni con due tabelle
Introduzione delle relazioni (concetti di db relazionali)
Drupal dashboard for dummies with D3 - 6
Passo uno
Accedi a Drupal e crei i tipi di contenuto
Drupal Login
URL
http://dataviz.stage-zadig2.it
User: amministratore
Pass: dataviz2014
Moduli per tipi di contenuto
Moduli che servono per impostare i field Drupal necessari per accogliere le informazioni dai csv
- date
- entity reference
- entity reference feeds
- entity api
- location
-- node location
Drupal dashboard for dummies with D3 - 7
Tipo contenuto "Progetto"
Mappiamo i campi del file csv con i tipi di field di Drupal
Campi:
id -> title
nome progetto -> body
data estesa -> date
anno -> numero
totale finanziamento -> numero
categoria -> testo
Creo tipo Progetto
Dal menu Structure clicco su Content types
Drupal dashboard for dummies with D3 - 8
Quindi su Add content type
Modifica generale
Name: Progetto
Title field label: ID progetto
Drupal dashboard for dummies with D3 - 9
Impostazione dei singoli field
Edit label: Titolo del progetto
Data -> Date
Drupal dashboard for dummies with D3 - 10
Date
Impostiamo a Day la granularità minima
Drupal dashboard for dummies with D3 - 11
Panoramica di tutti i field del progetto
Tipo di contenuto Contractor
- id ->Title
- organization name -> Body
- indirizzo, postal code, città, nazione -> già attivi con attivazione modulo
Drupal dashboard for dummies with D3 - 12
Attivare locative information
Per i contractor dobbiamo attivare le informazioni necessarie per registrare l'indirizzo.
Tipo contenuto Tabel la collegamento
Questo tipo di contneuto deve avere due campi che mettono in collegamento un contractor e un
progetto. Ogni nodo è un apartecipazione di un singolo contractor a un singolo progetto
Field:
- id progetto - entity reference
- id contractor - entity reference
Drupal dashboard for dummies with D3 - 13
Drupal dashboard for dummies with D3 - 14
Importazione
Importi i csv con i dati di progetti, contractor e partecipazioni
Configurazione di Import
Dal menu Structure clicco si Feeds importer
Add importer
Importare prima i nodi e poi la tebella che ha le refernce dei nodi
Add import
Name -> import progetti
Drupal dashboard for dummies with D3 - 15
Configura import - Basic
Periodic import: serve pe rimpostare import periodici di contenuti, lasciamo off
Import on submission: avvia l'import dopo conferma del modulo di import
Process in background: se flaggato avvia l'import di un certo numero di record a ogni cron.
Lasciamo off
Drupal dashboard for dummies with D3 - 16
Configura import - Fetcher
File upload
Drupal dashboard for dummies with D3 - 17
Path
Bisogna configurare la path qui: configuration->media->file sistem
(admin/config/media/file-system)
Drupal dashboard for dummies with D3 - 18
Configura import - Parser
Scegleire csv quindi csv -> settings
Drupal dashboard for dummies with D3 - 19
Configura import - Processor
Il processor va configurato per creare dei nodi
Drupal dashboard for dummies with D3 - 20
Configura import - Node processor settings
Scegliere Progetto per il tipo di contenuto, tutto il resto lascia uguale
Drupal dashboard for dummies with D3 - 21
Configura import - Node processor settings
Bisogna configurare il mapping dei campi del csv
Source = nome del campo nel csv
Target = nome del campo impostato nel tipo di contenuto
Drupal dashboard for dummies with D3 - 22
Import contractor
Avviare import
/import
Structure -> Feed importers
Link a import
Drupal dashboard for dummies with D3 - 23
Import progetti
Import completo
I progetti sono 1.000 (e non più mille)
Drupal dashboard for dummies with D3 - 24
Verifica contenuti
Import contractor
Ripetiamo i passaggi di import progetti. Aggiungamo mappatura location
Drupal dashboard for dummies with D3 - 25
Import collegamento
Impostre tutto come sopra ma dopo aver configruato i due campi id progetto e id contractor
configurare Tamper
Tamper
In Tamper fai add plugin
Drupal dashboard for dummies with D3 - 26
Configura Tamper
In tamper scegli Rewrite e imposta il titolo del nodo come unione dei campi id progetto e id
contratto. In questo modo il nodo ha un titolo univoco basato sulle informazioni del csv. Quindi
isalva e importa come sopra.
Drupal dashboard for dummies with D3 - 27
Viste
Drupal dashboard for dummies with D3 - 28
Conta categorie
Creiamo una nuova vista per contare quanti progetti appartengono a una certa categoria
Nuova vista
Creiamo una nuova vista
Structure->views->add view
Impostare la vista e clic su Continue & edit
Drupal dashboard for dummies with D3 - 29
Aggiungo campo
Aggiungiamo il campo Categoria quindi clic su Apply
Drupal dashboard for dummies with D3 - 30
Configurazione campo categoria
Per ora non configuriamo uleriormente il campo, quindi clic su Apply
Drupal dashboard for dummies with D3 - 31
Eliminiamo ti tolo
Eliminiamo il campo title che non serve, clic sulla freccina quiandi su Rearrange. Nella finestra
successiva eliminare il campo title
Drupal dashboard for dummies with D3 - 32
Aggregazione
Apriamo riquadro Advanced quindi clic su "Use aggregation: No" e impostatiamo "Use
aggregation" e salviamo
Drupal dashboard for dummies with D3 - 33
Impostazioni aggregazione
A questo punto compaiono nuove opzioni di configurazione delle aggregazioni per campi, filtri e
ordinamento. Impostiamo l'aggregazione del campo del quale vogliamo contare le occorrenze.
Drupal dashboard for dummies with D3 - 34
Contare
Impostiamo Aggregation type "Count" e Group column "Value". Il campo è composto da più
elementi, volgiamo contare le occorrenze delle diverse categorie.
Drupal dashboard for dummies with D3 - 35
Rimuoviamo i l sorting
Il sorting raggruppa ulteriormente secondo il criterio di ordinameto: questo confligge con
aggregation: cancelliamo il sorting.
Drupal dashboard for dummies with D3 - 36
Categorizzare l 'aggregazione
Ora abbiamo come risultato il conteggio totale dei nodi. Diamo una base di raggruppamento per
calcolare il numero di elementi per categoria
Tabella aggregata
Possiamo poi riarrangiare la tabella per milgiorare la leggibilità. Alla colonna aggregata diamo
ò'etichetta Numero di progetti e sotto fields->rearrange spostiamo a sinistra la colonna Categoria
Drupal dashboard for dummies with D3 - 37
Tabella aggretata
Drupal dashboard for dummies with D3 - 38
Creazione del grafico
D3
Drupal dashboard for dummies with D3 - 39
Configurazione D3
Library Pie chart
Per il campo Categoria
Display è "Display Value" (mostra il valore e utilizzalo come etichetta della riga)
Aggregation, none, usiamo aggregazioen di views
Data type è "Row label" (come usare in d3 il valore di questo campo)
Per il campo Numero progetti
Display è "Display Value"
Aggregation, none, usiamo aggregazioen di views
Data type è "Column" (come usare in d3 il valore di questo campo)
Show debug table: mostra la tabella inviata a D3
Quindi salviamo e visualizziamo.
Drupal dashboard for dummies with D3 - 40
Vista visualizzata
Drupal dashboard for dummies with D3 - 41
Fil tri su aggregazioni
Possiamo impostare un filtro per mostrare categorie con un certo numero di progetti. Torniamo
alla modifica della vista. Su "Filter ceriteria" clic su add e selezioniamo Categoria. Alla finestra
successiva scegliamo Aggregation Type: Count
Esponiamo i l fi l tro
Impostiamo il filtro esposto
Expose
Single filter
Drupal dashboard for dummies with D3 - 42
Expose operator
Salviamo la vista
Uso del fi l tro
Se imposto l'operatore su "maggiore o uguale" e scrivo 50 ottengo le categorie che contano 50 o
più progetti
Drupal dashboard for dummies with D3 - 43
Ordinare per numero di progetti
Possiamo aggiungere un criterio di ordinamento. Sceglaimo Categoria e poi Aggregation: Count.
Odiniamo in modo discendente e salviamo.
Drupal dashboard for dummies with D3 - 44
Risutlati ordinati
Drupal dashboard for dummies with D3 - 45
Conta progetti per anno per contractor
Contiamo i progetti per anno per contractor
Nuova vista
Aggiungiamo una nuova vista
type: Contractor
sorted by: none
Drupal dashboard for dummies with D3 - 46
Configurare vista
Configuriamo le relation
Tabella contractor, tabella progetti, tabella di collegamenti. Dobbiamo collegare i contractor e i
relativi progetti tramite tabella collegamento. E' un collegamento molti-molti, un contractor può
avere più progetti. Vedi slide.
Add relationship
Drupal dashboard for dummies with D3 - 47
Configuriamo la Relationship
Il tipo contenuto Contractor ha il campo title, che è l'id del contractor. Dobbiamo creare una
relazione con il campo id contractor dell contenuto Tabella di collegamento. Chiamo il campo del
tipo di contenuto Tabella di collegamento che referenzia il titolo del contenuto Contractor. Clic su
apply
Relationship
Copiamo l'identifier nell'administrative title. Clic su apply
Drupal dashboard for dummies with D3 - 48
Relationship con progetti
Usando la precedente relazione creo una seconda relazione tra il campo id del progetto del
contenuto Tabella di collegamento e il campo Titolo del tipo di contenuto Progetto
Configurazione relationship progetto
Drupal dashboard for dummies with D3 - 49
Campi
Content: Nome contractor
Content: Anno
Content: Titolo del progetto
Campo anno
Drupal dashboard for dummies with D3 - 50
Campo nome del contractor
Non usiamo relationship
Drupal dashboard for dummies with D3 - 51
Campo ti tolo del progetto
Drupal dashboard for dummies with D3 - 52
Tabella
Riarrangiamo l'ordien dei campi e otteniamo la tabella desiderata che mostra i progetti per ogni
contractor
Drupal dashboard for dummies with D3 - 53
Aggregazione
In advanced attiviamo l'aggreazione
Drupal dashboard for dummies with D3 - 54
Aggregazione Nome del contractor
Configurazione aggregazione ti tolo progetto
Contiamo i titoli di progetto
Drupal dashboard for dummies with D3 - 55
Count dei ti tol i
Possiamo anche cambiare l'etichetta del campo Titolo del progetto a Numero di progetti
Drupal dashboard for dummies with D3 - 56
Tabella aggregata
Drupal dashboard for dummies with D3 - 57
Sorting
Content: Titolo del progetto (body:format)
Aggregation type: count
Drupal dashboard for dummies with D3 - 58
Tabella ordinata
Possiamo aggiungere un ordinamento per anno (con relationship, non aggregazione)
Drupal dashboard for dummies with D3 - 59
Aggiungiamo fi l tro esposto
Add filter criteria
Content: Nome contractor (body)
Nessuna aggregazione
Salva la vista!
Drupal dashboard for dummies with D3 - 60
Dataviz
Drupal dashboard for dummies with D3 - 61
Grafico dei progetti per categoria
Visualizziamo la vista che estrae il numero di progetti per una certa categoria
Creazione del grafico
Modifichiamo la vista Categorie progetti e facciamo clic su Table per modificare il formato di
visualizzazione dei dati
Drupal dashboard for dummies with D3 - 62
Attivazione plugin D3 per Views
Cambiamo la visualizzazione da "Table" a D3
Configurazione D3
Bisogna indicare:
• quale tipo di grafico
• quale campo fornisce la base dati
• quale campo fornisce le etichette
Drupal dashboard for dummies with D3 - 63
Scegliamo "Library Pie chart"
Per il campo Categoria
Display è "Display Value" (mostra il valore e utilizzalo come etichetta della riga)
Aggregation, none, usiamo aggregazione di views
Data type è "Row label" (come usare in d3 il valore di questo campo)
Per il campo Numero progetti
Display è "Display Value"
Aggregation, none, usiamo aggregazioen di views
Data type è "Column" (come usare in d3 il valore di questo campo)
Show debug table: mostra la tabella inviata a D3
Quindi salviamo e visualizziamo.
Drupal dashboard for dummies with D3 - 64
Vista visualizzata
Il plugin D3 trasforma i dati in percentuali e li visualizza su una torta colorata. La tabella
sottostante serve per controllare che i dati siano impostati come desiderato. Nei prossimi passi si
mostra come aggiungere filtri dinamici e come ordinare i dati.
Drupal dashboard for dummies with D3 - 65
Fil tri esposti su aggregazioni
Un filtro esposto permette agli utenti di modificare i dati visualizzati in base a un aparticolare
quesry. Possiamo impostare un filtro per mostrare solo le categorie con un certo numero di
progetti. Torniamo alla modifica della vista. Su "Filter ceriteria" clic su add e selezioniamo
"Categoria". Alla finestra successiva scegliamo "Aggregation Type: Count"
Drupal dashboard for dummies with D3 - 66
Configurazione fi l tro esposto
Impostiamo il filtro esposto:
• Expose (permettiamo ali utenti di modificare il filtro)
• Single filter (per limitare a uno il numero di filtri a cascata)
• Expose operator (permette agli unteti di sceglienre anche l'operatore: uguale, minore,
maggiore o uguale eccetera)
• Salviamo la vista
Drupal dashboard for dummies with D3 - 67
Uso del fi l tro
Se imposto l'operatore su "maggiore o uguale" e scrivo 50 ottengo le categorie che contano 50 o
più progetti
Drupal dashboard for dummies with D3 - 68
Ordinare per numero di progetti
Possiamo aggiungere un criterio di ordinamento. Scegliamo Categoria e poi Aggregation: Count.
Ordiniamo in modo discendente e salviamo.
Drupal dashboard for dummies with D3 - 69
Risutlati ordinati
Vediamo che l'ordinamento riguarda sia la tabella dati sia il grafico: la torta parte mostrando nel
quadrante destro superiore la percentuale più alta e a seguire le percentuali più basse.
Drupal dashboard for dummies with D3 - 70
Grafico dei progetti per anno
Visualizziamo la vista che espone il numero di progetti per anno per un determinato contractor
Impostiamo D3
Modifichiamo la vista che conta il numero di progetti per anno
Drupal dashboard for dummies with D3 - 71
Selezioniamo un contractor
La vista restituisce un grafico solo per un crontractor alla volta. Il numero di progetti per contractor
è la serie dati che può essere rappresentata