Corso Data Journalist gen-mar 2017

TECNOLOGIE WEB AVANZATO

Libreria D3JSParte 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

LEZIONE 1..www.fordatascientist.org

I00-Web-AdvancedD3js-Multiline.ipynb

CONTATTI TELEFONO

051 22 35 20

EMAIL WORKSHOP@VICEM.IT