Visualizzazione dati .tsv

// height=300 lines=auto
let table;

function preload() {
    table = loadTable("assets/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("assets/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 (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"), 9.15, 9.225, 0, width );
    let y = map( tableRow.getNum("LAT"), 45.44, 45.49, height, 0 );
    circle( x, y, diam );

Strutturazione dei file:

Crediti: