Corso tecnologie Web Advanced per Data Journalist: alcune funzioni D3js

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

2. Funzione svg.line
var LINE1 = d3.svg.line()
.interpolate("basis")
.x(function(d) { return ScaleX(d["T"]); })
.y(function(d) { return ScaleY(d["SPOT"]); });
var CANVAS =
d3.select("#ConsoleOut").append("svg")
.attr("width", WIDTH)
.attr("height",HEIGHT)
var PLOT = CANVAS.append('g');
PLOT.append("path")
.attr("class", "line blue")
.attr("d", LINE1(DSET.DATA));
Costruzione funzione LINE1
Data una struttura di dati passati come input
composta da una lista di dizionari con chiave T
(e per valore una data temporale) e chiave
SPOT (e valore un numero), questa funzione
trasforma (tramite la funzione ScaleX) la data in
una coordinata x e il valore SPOT in una
coordinata y. Restituisce una stringa così
formata
“M x1 y1 L x2 y2 x3 y3……….xn yn”
Costruzione elemento path
Inserisce un elemento path all’interno di un
elemento g di svg.
Assegna a questo elemento la stringa generata
dalla funzione LINE1, passando come input la
struttura dati contenuta in DSET.DATA

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

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