drupal dashboard for dummies with d3
DESCRIPTION
Riccardo Scalco @ Drupal Days 2014 tutorial: http://eidogram.com/tutorials/datajoin.htmlTRANSCRIPT
![Page 1: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/1.jpg)
Drupal dashboard for
dummies with D3
![Page 2: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/2.jpg)
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
![Page 3: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/3.jpg)
Drupal dashboard for dummies with D3 - 3
Import contenuti
![Page 4: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/4.jpg)
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
![Page 5: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/5.jpg)
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)
![Page 6: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/6.jpg)
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
![Page 7: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/7.jpg)
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
![Page 8: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/8.jpg)
Drupal dashboard for dummies with D3 - 8
Quindi su Add content type
Modifica generale
Name: Progetto
Title field label: ID progetto
![Page 9: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/9.jpg)
Drupal dashboard for dummies with D3 - 9
Impostazione dei singoli field
Edit label: Titolo del progetto
Data -> Date
![Page 10: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/10.jpg)
Drupal dashboard for dummies with D3 - 10
Date
Impostiamo a Day la granularità minima
![Page 11: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/11.jpg)
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
![Page 12: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/12.jpg)
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
![Page 13: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/13.jpg)
Drupal dashboard for dummies with D3 - 13
![Page 14: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/14.jpg)
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
![Page 15: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/15.jpg)
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
![Page 16: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/16.jpg)
Drupal dashboard for dummies with D3 - 16
Configura import - Fetcher
File upload
![Page 17: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/17.jpg)
Drupal dashboard for dummies with D3 - 17
Path
Bisogna configurare la path qui: configuration->media->file sistem
(admin/config/media/file-system)
![Page 18: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/18.jpg)
Drupal dashboard for dummies with D3 - 18
Configura import - Parser
Scegleire csv quindi csv -> settings
![Page 19: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/19.jpg)
Drupal dashboard for dummies with D3 - 19
Configura import - Processor
Il processor va configurato per creare dei nodi
![Page 20: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/20.jpg)
Drupal dashboard for dummies with D3 - 20
Configura import - Node processor settings
Scegliere Progetto per il tipo di contenuto, tutto il resto lascia uguale
![Page 21: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/21.jpg)
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
![Page 22: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/22.jpg)
Drupal dashboard for dummies with D3 - 22
Import contractor
Avviare import
/import
Structure -> Feed importers
Link a import
![Page 23: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/23.jpg)
Drupal dashboard for dummies with D3 - 23
Import progetti
Import completo
I progetti sono 1.000 (e non più mille)
![Page 24: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/24.jpg)
Drupal dashboard for dummies with D3 - 24
Verifica contenuti
Import contractor
Ripetiamo i passaggi di import progetti. Aggiungamo mappatura location
![Page 25: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/25.jpg)
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
![Page 26: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/26.jpg)
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.
![Page 27: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/27.jpg)
Drupal dashboard for dummies with D3 - 27
Viste
![Page 28: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/28.jpg)
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
![Page 29: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/29.jpg)
Drupal dashboard for dummies with D3 - 29
Aggiungo campo
Aggiungiamo il campo Categoria quindi clic su Apply
![Page 30: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/30.jpg)
Drupal dashboard for dummies with D3 - 30
Configurazione campo categoria
Per ora non configuriamo uleriormente il campo, quindi clic su Apply
![Page 31: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/31.jpg)
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
![Page 32: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/32.jpg)
Drupal dashboard for dummies with D3 - 32
Aggregazione
Apriamo riquadro Advanced quindi clic su "Use aggregation: No" e impostatiamo "Use
aggregation" e salviamo
![Page 33: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/33.jpg)
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.
![Page 34: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/34.jpg)
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.
![Page 35: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/35.jpg)
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.
![Page 36: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/36.jpg)
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
![Page 37: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/37.jpg)
Drupal dashboard for dummies with D3 - 37
Tabella aggretata
![Page 38: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/38.jpg)
Drupal dashboard for dummies with D3 - 38
Creazione del grafico
D3
![Page 39: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/39.jpg)
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.
![Page 40: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/40.jpg)
Drupal dashboard for dummies with D3 - 40
Vista visualizzata
![Page 41: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/41.jpg)
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
![Page 42: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/42.jpg)
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
![Page 43: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/43.jpg)
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.
![Page 44: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/44.jpg)
Drupal dashboard for dummies with D3 - 44
Risutlati ordinati
![Page 45: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/45.jpg)
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
![Page 46: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/46.jpg)
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
![Page 47: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/47.jpg)
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
![Page 48: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/48.jpg)
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
![Page 49: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/49.jpg)
Drupal dashboard for dummies with D3 - 49
Campi
Content: Nome contractor
Content: Anno
Content: Titolo del progetto
Campo anno
![Page 50: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/50.jpg)
Drupal dashboard for dummies with D3 - 50
Campo nome del contractor
Non usiamo relationship
![Page 51: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/51.jpg)
Drupal dashboard for dummies with D3 - 51
Campo ti tolo del progetto
![Page 52: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/52.jpg)
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
![Page 53: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/53.jpg)
Drupal dashboard for dummies with D3 - 53
Aggregazione
In advanced attiviamo l'aggreazione
![Page 54: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/54.jpg)
Drupal dashboard for dummies with D3 - 54
Aggregazione Nome del contractor
Configurazione aggregazione ti tolo progetto
Contiamo i titoli di progetto
![Page 55: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/55.jpg)
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
![Page 56: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/56.jpg)
Drupal dashboard for dummies with D3 - 56
Tabella aggregata
![Page 57: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/57.jpg)
Drupal dashboard for dummies with D3 - 57
Sorting
Content: Titolo del progetto (body:format)
Aggregation type: count
![Page 58: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/58.jpg)
Drupal dashboard for dummies with D3 - 58
Tabella ordinata
Possiamo aggiungere un ordinamento per anno (con relationship, non aggregazione)
![Page 59: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/59.jpg)
Drupal dashboard for dummies with D3 - 59
Aggiungiamo fi l tro esposto
Add filter criteria
Content: Nome contractor (body)
Nessuna aggregazione
Salva la vista!
![Page 60: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/60.jpg)
Drupal dashboard for dummies with D3 - 60
Dataviz
![Page 61: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/61.jpg)
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
![Page 62: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/62.jpg)
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
![Page 63: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/63.jpg)
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.
![Page 64: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/64.jpg)
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.
![Page 65: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/65.jpg)
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"
![Page 66: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/66.jpg)
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
![Page 67: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/67.jpg)
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
![Page 68: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/68.jpg)
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.
![Page 69: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/69.jpg)
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.
![Page 70: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/70.jpg)
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
![Page 71: Drupal dashboard for dummies with d3](https://reader033.vdocuments.us/reader033/viewer/2022052822/554bce46b4c905706a8b49dc/html5/thumbnails/71.jpg)
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