TECNOLOGIE WEB AVANZATOJavascript:

le librerie Jquery e D3

Jquery: sintassi di base

‘tag1’‘#id1’‘.class1’‘tag1.class1’

‘tag1 .class1

’‘tag1, tag2’…….

id2

$(selettore).azione()

tutti gli elementi con tag1l’elemento con id1gli elementi di class1gli elementi con tag1 e class1gli elementi con class1 discendenti di elementi con tag1gli elementi con tag1 e tag2

gli elementi con id2

selettori.click(function).hide(‘slow’).show(‘fast’).toggle().animate()

al click esegue la funzionenasconde lentamenteappare velocementeappare e scomparecrea 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

LEZIONE 1..www.fordatascientist.orgI00-Web-Advanced

I11-Jquery-Introduction.ipynb

LEZIONE 1..www.fordatascientist.org

I00-Web-AdvancedI10-CreateEnv.ipynb

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

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

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]

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

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.

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.

LEZIONE 1..www.fordatascientist.org

I00-Web-AdvancedD3js-Multiline.ipynb

CONTATTI TELEFONO

051 22 35 20

EMAIL WORKSHOP@VICEM.IT