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


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 ti tolo

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 i l 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


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


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


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 ti tolo 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 ti tolo progetto

Contiamo i titoli di progetto


Count dei ti tol i

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 fi l tro 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.


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"


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


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


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

Internet

Transcript of Drupal dashboard for dummies with d3