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

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

- nome progetto

- id progetto

- data estesa

- data solo anno

- total finanziamento

- pga (senza fp7-)

Campi tabella contractors

- 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

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

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

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.

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

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

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

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

financial reportsreadingthe-eye.eu/public/books/for...

affectation catégories arbitres saison 2019/2020...brioua...

how to go from non-drupal to drupal 8 - bixal · installing...

d3 meetup (backbone and d3)

physics i for dummies cheat sheet - for dummies

drupal 6 to drupal 7

for dummies · for dummies. series include . internet...

drupal global training day by drupal mumbai 6th sep - drupal...

sw drupal summit: html5+drupal

drupal caching for dummies

pumped indirect domestic hot water system …...d3-30i,...

visualization d3 data data...create custom d3js drupal...

from drupal 7 to drupal 8 - drupal intensive course overview

gravity for dummies and dummies for gravity equations

drupal - understanding drupal

drupal global training day by drupal mumbai 6th sep - drupal...

dummies book volte for dummies - university relations

visualizations in drupal with d3.js – alan sherry

Володимир Сидор - contributing in drupal: full...

drupal global training day by drupal mumbai 6th sep - drupal...