Visualizzazione dati .tsv

    let table;

function preload() {
    table = loadTable("bikes-mi.tsv", "tsv", "header");
}

function setup() {
    createCanvas(300,300);
    background(220);
}

function draw() {
    if (frameCount < table.getRowCount()) {
        let tableRow = table.getRow( frameCount-1 );

        let x = tableRow.getNum( "LON" ) - 9.15;
        let y = tableRow.getNum( "LAT" ) - 45.44;
        let diam = tableRow.getNum( "STALLI") / 3;

        circle( x*4000,height-y*6000, diam );
    }
}
  

  table = loadTable("bikes-mi.tsv", "tsv", "header");

Carica il file “bikes-mi.tsv” indicando il formato (tsv) e la presenza di una riga di intestazione (header).

  let tableRow = table.getRow( frameCount-1 );

Ricava la riga di dati corrispondente al numero di fotogramma corrente (-1 per partire da 0).

  let x = tableRow.getNum( "LON" ) - 9.15;
let y = tableRow.getNum( "LAT" ) - 45.44;
let diam = tableRow.getNum( "STALLI") / 3;

Ricava i valore numerici (getNum()) presenti alle colonne indicate fra parentesi tonde (LON, LAT e STALLI).

I valori di longitudine e latitudine vanno adattati alle coordinate del canvas. Nel caso della latitudine il valore va anche invertito (/*1*/height-/**/y*6000).
In alternativa si può usare la funzione map() indicando i valori minimo e massimo della longitudine dell’area da visualizzare (9.15 e 9.225) e quelli della latitudine (45.44 e 45.49):

      let x = map( tableRow.getNum("LON"), /*1*/9.15, 9.225/**/, 0, width );
    let y = map( tableRow.getNum("LAT"), /*1*/45.44, 45.49/**/, height, 0 );
    circle( x, y, diam );

Strutturazione dei file:

• CARTELLA-SKETCH
  • libs
    • p5.min.js
  • index.html
  • sketch.js
  • bikes-mi.tsv