Le librerie javascript jquery e d3js

1. TECNOLOGIE WEB AVANZATO
Javascript:
le librerie Jquery e D3

2. Jquery: sintassi di base
‘tag1’
‘#id1’
‘.class1’
‘tag1.class1’
‘tag1 .class1
’
‘tag1, tag2’
…….
id2
$(selettore).azione()
tutti gli elementi con tag1
l’elemento con id1
gli elementi di class1
gli elementi con tag1 e
class1
gli elementi con class1
discendenti di elementi
con tag1
gli elementi con tag1 e
tag2
gli elementi con id2
selettori
.click(function)
.hide(‘slow’)
.show(‘fast’)
.toggle()
.animate()
al click esegue la funzione
nasconde lentamente
appare velocemente
appare e scompare
crea una animazione
effetti
modifiche html
.text ()
.text(‘testo’)
.attr(attributo)
.attr(attributo,
valore)
.css(proprietà)
.css(proprietà,
valore)
‘get’ il contenuto elemento
‘set’ ‘testo’ nell’elemento
‘get’ il valore dell’attributo
‘set’ il valore all’attributo
‘get’ il valore del parametro
‘set’ il valore al parametro

3. LEZIONE 1..
www.fordatascientist.org
I00-Web-Advanced
I11-Jquery-Introduction.ipynb

4. LEZIONE 1..
www.fordatascientist.org
I00-Web-Advanced
I10-CreateEnv.ipynb

5. D3: 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

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

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

8. 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]

9. Dati di input: funzione callback
Le funzioni callback sono funzioni che vendono 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

10. 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. Questa può essere estratta
da una lista di dizionari, specificando la chiave di interesse
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.

11. 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
elementio <g>, definisce gli
attributi di questo elemento e
poi chiama la funzione XA
che produce le istruzioni svg
per il disegno dell’asse.

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

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