Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web advanced-11-d3 js

76 views

Published on

Corso tecnologie Web Advanced per Data Journalist: alcune funzioni D3js

Published in: Software
  • Be the first to comment

  • Be the first to like this

Web advanced-11-d3 js

  1. 1. Corso Data Journalist gen-mar 2017 TECNOLOGIE WEB AVANZATO Libreria D3JS Parte 2
  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. 3. LEZIONE 1.. www.fordatascientist.org I00-Web-Advanced D3js-Multiline.ipynb
  4. 4. CONTATTI TELEFONO 051 22 35 20 EMAIL WORKSHOP@VICEM.IT

×