web advanced-03-d3 js-base
TRANSCRIPT
Corso Data Journalist gen-mar 2017
TECNOLOGIE WEB AVANZATO
Libreria D3JSParte 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 -1selezionare e
modificare HTML
CORE -2caricare e trasformare
dati
CORE -3gestione dei colori
SCALEconversione da numeri a spazi
TIMEdate e periodi
SVGcreare 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 testoUn’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
D3: modulo CORE -2 - data binding
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
5101520
Definisce quali elementi devono essere selezionatiAssegna la lista dei dati
Crea un segnaposto per ogni dato a cui non corrisponde un elemento selezionato
Aggiunge un elemento per ogni segnaposto creato
D3: modulo CORE -2 - data binding
<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>
D3: modulo CORE -2 - data binding: un esempio
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
D3: modulo CORE -2 - data binding: un esempio
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-AdvancedI22-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]);
TRAS2 è una funzione che trasforma un dato in input compreso nella lista [‘A’,’B’,’C’] nel valore che ha la stessa posizione nella lista valori in pixel [100,200,300]
TRAS3 è una funzione che trasforma un 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-AdvancedD3js-Multiline.ipynb
