Web advanced-03-d3 js-base

Corso Data Journalist gen-mar 2017
TECNOLOGIE WEB AVANZATO
Libreria D3JS
Parte 1

D3
Caricamento della libreria d3js
<script src="https://d3js.org/d3.v3.min.js" >
</script>
Versione 3
<script src="https://d3js.org/d3.v4.min.js" >
</script>Versione 4
https://d3js.org/
https://github.com/d3/
d3-3.x-api-reference/blob/master/
API-Reference.md
API Reference
https://github.com/d3/
d3/blob/master/
API.md

D3: Una introduzione
Scott
Murray

D3: moduli
CORE -1
selezionare e
modificare HTML
CORE -2
caricare e trasformare
dati
CORE -3
gestione
dei colori
SCALE
conversione da
numeri a spazi
TIME
date e periodi
SVG
creare SVG

D3: modulo CORE -1 - selezione
Una SELEZIONE è una array di elementi estratti dal documento corrente.
D3 utilizza la sintassi dei selettori CSS.
Una volta selezionato un array di elementi, a questi possono essere applicati delle
azioni quali:
> aggiungere attributi e i loro valori
> estrarre o modificare il valore di un attributo
> modificare gli stili
> estrarre o modificare il valore del testo
Un’azione applicata ad una selezione opera su tutti gli elemento delle selezione
(come map di Python e forEach di javascript).
d3.select (selettore) d3.selectAll (selettore)
Seleziona il primo elemento che corrisponde
alla regola di selezione
Seleziona tutti gli elementi che corrispondono
alla regola di selezione

D3: modulo CORE -1 - selezione: azioni
.append(tag) Inserisce un elemento con il tag specificato
.text(‘...’) Inserisce il testo indicato
.attr(name)
.attr(name, value)
Estrae il valore dell’attributo di nome name
Attribuisce il valore all’attributo di nome name
.style(name,[value]) Agisce sullo stile come .attr sugli attributi
.html(‘...’) Inserisce il codice html contenuto nell’argomento

D3: modulo CORE -1 - selezione: sintassi di base
d3.select(Selettore).azione1(.....).azione2(.....) ........ .azioneN(......)
d3.select("#D3JS_Elements").append("p").text("This is a new paragraph");
un esempio
seleziona l’elemento con
id=D3JS_Elements e restituisce
un oggetto d3 che contiene un
punto di riferimento all’elemento
selezionato
appende un tag <p> di
apertura e chiusura e
un oggetto d3 che
contiene un punto di
riferimento al tag
inserito
inserisce il testo ‘This is
a new paragraph’
all’interno del tag di
riferimento
chiude la
catena di
comandi
L’ordine dei comandi è importante

D3: modulo CORE -2 - data binding
Data-binding in d3 Data-binding in generale
Il data-binding è una tecnica generale che
lega i dati alla loro rappresentazione, in
modo tali che modificazione nei dati si
riflettano automaticamente in un
cambiamento della loro rappresentazione.
A volte il data-binding è bidirezionale, nel
senso che non solo modificazione dei dati si
riflettono in cambiamenti nella loro
rappresentazione, ma vale anche l’opposto:
modificazione nella rappresentazione
generano una modificazione automatica dei
dati.
Il data binding in d3 consiste nel
legare/associare agli elementi del DOM
alcuni dati. Attraverso questa associazione,
tramite un elemento del DOM è possibile
recuperare i dati a questo associati.
Dopo aver associato (tramite un data binding
dei dati agli elemento del DOM), i dati
possono essere cercati tramite una ricerca
sugli elementi del DOM

var D1 =
[ 5, 10, 15, 20 ];
d3.select("body")
.selectAll("p")
.data(D1)
.enter()
.append("p")
.text("OK");
DATI DATA - BILDING DOM
body
p
p
p
p
5
10
15
20
Definisce quali elementi devono
essere selezionati
Assegna la lista dei dati
Crea un segnaposto per ogni
dato a cui non corrisponde un
elemento selezionato
Aggiunge un elemento per ogni
segnaposto creato

<html>
<head>
<script src="https://d3js.org/d3.v4.min.js">
</script>
</head>
<body> <script>
var DAT = [ 5, 10, 15, 20, 25 ];
var A =d3.select("body").selectAll('p')
.data(DAT)
.enter()
.append("p")
.text("New paragraph!");
console.log(d3.select('p'))
</script></body>
Ispezione tramite firebug
Dato associato
all’elemento p

D3: modulo CORE -2 - data binding: un esempio
<table>
<tr>
<td>11975</td>
<td>5871</td>
<td>8916</td>
<td>2868</td>
</tr>
<tr>
………
<tr>
<td>1013</td>
<td>990</td>
<td>940</td>
<td>6907</td>
</tr>
</table>
<html> <head>
<script src="https://d3js.org/d3.v4.min.js">
</script></head> <body> <script>
var MAT = [ [11975, 5871, 8916, 2868],
[ 1951, 10048, 2060, 6171],
[ 8010, 16145, 8090, 8045],
[ 1013, 990, 940, 6907] ];
var ROW =d3.select("body")
.append("table").selectAll("tr")
.data(MAT) .enter().append("tr");
var COL = ROW.selectAll("td")
.data(function(d) { return d; })
.enter().append("td")
.text(function(d) { return d; });
</script></body>

var ROW =d3.select("body")
.append("table")
.selectAll("tr")
.data(MAT)
.enter()
.append("tr");
MAT è un vettore di 4
elementi
Inserisce una struttura dati di 4
elementi in cui ciascun elemento è
a sua volta composto da un array
di 4 valori
La selezione avviene
solo alla fine della
catena delle azioni.
L’azione deve essere
specificata prima del
data binding

var COL = ROW.selectAll("td")
.data(function(d) { return d; })
.enter()
.append("td")
.text(function(d) { return d; });
ROW è un oggetto legato ad
una struttura di dati di 4
elementi
Le azioni agiscono per ogni elemento della
struttura dati. Quindi per 4 elementi
ciascuno composta da una array di 4 dati
La funzione anonima
vede a ciascun ciclo i
dati associati
all’ellemento. Quindi
di volta in volta
ciascun array di 4 dati
Crea un data binding
con l’array di 4 dati
corrispondente alla
riga processata
Ciascuna azione è eseguita per ciascun
elemento del data binding. Quindi per ciascun
dato contenuto nell’array associato alla riga
A questo punto il data binding è composta
dall’array della riga. Quindi la funzione anonima
restituisce i valori contenuti nell’array.

D3: Binding data
var E;
E=d3.select("#D3JS_Elements");
creo una lista di 6 numerivar LNUM=[1, 5, 8, 241, 66,22];
ST=E.selectAll("p")
.data(LNUM)
.enter()
.append("p") ;
ST.text("This is new");
ST.text(function(d){return d});
creo un oggetto E dalla libreria d3
contenente un punto di riferimento
all’elemento con id D3JS_Elements
inserisco all’interno dell’elemento di
riferimento dell’oggetto E (enter) tanti
elementi p (append) quanti sono i dati
contenuti il LNUM (data). Creo un
collegamento tra i dati e gli elementi <p>.
Assegno il risultato alla variabile ST
inserisco in tutti i <p> il testo “This is new”
inserisco in tutti i <p> il testo ricavato dal
dato che è stato collegato all’elemento

LEZIONE 1..
www.fordatascientist.org
I00-Web-Advanced
I22-D3JS-GettingStarted

D3- CORE - 2: dati di input: file json
Un file Json è un file di tipo testo che contiene dati espressi
nella forma di dizionari e liste.
[ {‘XER’:’DEU’,
‘MER’:’FRA’,
‘VALUE’: 29333},
{‘XER’:’ITA’,
‘MER’:’FRA’,
‘VALUE’: 3246},
…..
]
[0][‘VALUE’]
[1][‘XER’]
{ ‘XER’:[‘DEU’,’ITA’],
‘MER’:[’FRA’,FRA],
’VALUE’:[29333,3246]
…..
}
[‘XER’][0]
[‘VALUE’][1]

D3- CORE - 2: dati di input: funzione callback
Le funzioni callback sono funzioni che vengono eseguite quando è terminata una
interazione con il browser o con il server. Tramite una funzione callback si rende
sincrona una azione asincrona.
d3.json('Tools/DATA/WTI.json', function(d) { ……..} );
metodo json di d3 indirizzo file json funzione callback
Quando viene chiamato il metodo json, è letto il file json passato come input.
Quando la lettura è terminata, allora viene lanciata la callback passando come
argomento i dati letti

D3: modulo SCALE
Per trasformare dati in misure di spazio
dati numerici
dati ordinali/qualitativi
Dominio
.domain(......)
Codominio
.range(......)scale
dati temporali (date)
d3.scale.linear()
d3.scale.ordinal()
d3.time.scale()
pixel

D3: modulo SCALE: esempi
var TRAS1 = d3.scale.linear()
.domain([0,100])
.range([0, 1000]);
TRAS1 è una funzione che trasforma un
dato in input compreso tra 0 e 100 in un
misura in pixel compresa tra 0 e 1000.
TRAS1(17.3) = 173
var TRAS2 = d3.scale.ordinal()
.domain(['A','B','C'])
.range([100, 200, 300]);
var TRAS3 = d3.scale.ordinal()
.domain(['A','B','C'])
.rangeBands([0,1000]);
dato in input compreso nella lista
[‘A’,’B’,’C’] nel valore che ha la stessa
posizione nella lista valori in pixel
[100,200,300]
dato in input compreso nella lista
[‘A’,’B’,’C’] nel valore in pixel compreso
tra 0 e 1000

Funzioni di funzioni - 1
Molte delle istruzioni D3 sono composte da funzioni che hanno come argomento
altre funzioni.
var ScaleX = d3.time.scale().domain([T1,T2]).range([0, WIDTH]);
var T1, T2;
[T1,T2]=d3.extent(DSET.DATA, function(d) { return d.T; })
Il metodo extent di d3 estrae un vettore con minimo e massimo di una lista. La lista può essere estratta
dai valori corrispondenti alla chiave T di una lista di dizionari
Il metodo time.scale di d3 crea un funzione che crea una corrispondenza tra i valori del dominio e i valori
di un range di output. Ha come input un dato appartenente al dominio e come output il corrispondente
valore interno al range.

Funzioni di funzioni - 2
var XA = d3.svg.axis()
.scale(ScaleX)
.ticks(d3.time.year, 5)
.tickFormat(d3.time.format("%b" + "-" + "%y"))
.orient("bottom");
Questo comando costruisce
la funzione XA derivata dalla
funzione d3.svg.axis(),
utilizzando come scala i
parametri della funzione
ScaleX, ponendo una tacca
ogni 5 anni, con formato
“mese- anno”, orientata verso
l’alto
CANVAS.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + HEIGHT + ")")
.call(XA);
appende al CANVAS, un
elemento <g>, definisce gli
attributi di questo elemento e
poi chiama la funzione XA
che produce le istruzioni svg
per il disegno dell’asse.

LEZIONE 1..
www.fordatascientist.org
I00-Web-Advanced
D3js-Multiline.ipynb

CONTATTI TELEFONO
051 22 35 20
EMAIL
WORKSHOP@VICEM.IT

Web advanced-03-d3 js-base

Recommended

Recommended

More Related Content

Similar to Web advanced-03-d3 js-base

Similar to Web advanced-03-d3 js-base (20)

More from Studiabo

More from Studiabo (20)

Web advanced-03-d3 js-base