Drupal dashboard for dummies with d3

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

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

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)

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

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

Quindi su Add content type
Modifica generale
Name: Progetto
Title field label: ID progetto

Impostazione dei singoli field
Edit label: Titolo del progetto
Data -> Date

Date
Impostiamo a Day la granularità minima

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

Attivare locative information
Per i contractor dobbiamo attivare le informazioni necessarie per registrare l'indirizzo.
Tipo contenuto Tabella 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

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

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

Configura import - Fetcher
File upload

Path
Bisogna configurare la path qui: configuration->media->file sistem
(admin/config/media/file-system)

Configura import - Parser
Scegleire csv quindi csv -> settings

Configura import - Processor
Il processor va configurato per creare dei nodi

Configura import - Node processor settings
Scegliere Progetto per il tipo di contenuto, tutto il resto lascia uguale

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

Import contractor
Avviare import
/import
Structure -> Feed importers
Link a import

Import progetti
Import completo
I progetti sono 1.000 (e non più mille)

Verifica contenuti
Import contractor
Ripetiamo i passaggi di import progetti. Aggiungamo mappatura location

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

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.

Viste

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

Aggiungo campo
Aggiungiamo il campo Categoria quindi clic su Apply

Configurazione campo categoria
Per ora non configuriamo uleriormente il campo, quindi clic su Apply

Eliminiamo titolo
Eliminiamo il campo title che non serve, clic sulla freccina quiandi su Rearrange. Nella finestra
successiva eliminare il campo title

Aggregazione
Apriamo riquadro Advanced quindi clic su "Use aggregation: No" e impostatiamo "Use
aggregation" e salviamo

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.

Contare
Impostiamo Aggregation type "Count" e Group column "Value". Il campo è composto da più
elementi, volgiamo contare le occorrenze delle diverse categorie.

Rimuoviamo il sorting
Il sorting raggruppa ulteriormente secondo il criterio di ordinameto: questo confligge con
aggregation: cancelliamo il sorting.

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

Tabella aggretata

Creazione del grafico
D3

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"
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.

Vista visualizzata

Filtri 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 il filtro
Impostiamo il filtro esposto
Expose
Single filter

Expose operator
Salviamo la vista
Uso del filtro
Se imposto l'operatore su "maggiore o uguale" e scrivo 50 ottengo le categorie che contano 50 o
più progetti

Ordinare per numero di progetti
Possiamo aggiungere un criterio di ordinamento. Sceglaimo Categoria e poi Aggregation: Count.
Odiniamo in modo discendente e salviamo.

Risutlati ordinati

Conta progetti per anno per contractor
Contiamo i progetti per anno per contractor
Nuova vista
Aggiungiamo una nuova vista
type: Contractor
sorted by: none

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

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

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

Campi
Content: Nome contractor
Content: Anno
Content: Titolo del progetto
Campo anno

Campo nome del contractor
Non usiamo relationship

Campo titolo del progetto

Tabella
Riarrangiamo l'ordien dei campi e otteniamo la tabella desiderata che mostra i progetti per ogni
contractor

Aggregazione
In advanced attiviamo l'aggreazione

Aggregazione Nome del contractor
Configurazione aggregazione titolo progetto
Contiamo i titoli di progetto

Count dei titoli
Possiamo anche cambiare l'etichetta del campo Titolo del progetto a Numero di progetti

Tabella aggregata

Sorting
Content: Titolo del progetto (body:format)
Aggregation type: count

Tabella ordinata
Possiamo aggiungere un ordinamento per anno (con relationship, non aggregazione)

Aggiungiamo filtro esposto
Add filter criteria
Content: Nome contractor (body)
Nessuna aggregazione
Salva la vista!

Dataviz

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

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

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"
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.

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.

Filtri 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"

Configurazione filtro 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

Uso del filtro
Se imposto l'operatore su "maggiore o uguale" e scrivo 50 ottengo le categorie che contano 50 o
più progetti

Ordinare per numero di progetti
Possiamo aggiungere un criterio di ordinamento. Scegliamo Categoria e poi Aggregation: Count.
Ordiniamo in modo discendente e salviamo.

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.

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

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

Drupal dashboard for dummies with d3

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Drupal dashboard for dummies with d3

Ähnlich wie Drupal dashboard for dummies with d3 (20)

Mehr von Eugenio Minardi

Mehr von Eugenio Minardi (20)

Drupal dashboard for dummies with d3