Data visualization: uso di una classe

I dati da visualizzare possono essere memorizzati e gestiti (meglio) attraverso una classe. Nel costruttore si possono già ricavare e salvare informazioni da usare spesso, ad esempio la posizione in cui visualizzare il singolo elemento.

    class Stato {
    constructor(info) {
        this.info = info;                  // Salva informazioni JSON
        let coord = info.latlng;           // Leggi coordinate geografiche
        let x = map(coord[1], -180, 180, 0, width);  // Converti in 
        let y = map(coord[0], 90, -90, 0, height);   // coord. cartesiane
        this.pos = createVector(x, y);     // Crea vettore posizione
    }
    display() {
        circle(this.pos.x, this.pos.y, 2);  // Centro dello stato
    }
}
let json;        // Dati letti dal servizio
let stati = [];  // Istanze con i dati per ogni stato

function preload() {
    let servizio = "https://restcountries.com/v3.1/all";
    let parametri = "?fields=name,latlng,population";  
    json = loadJSON(servizio + parametri);  // Carica JSON
}
function setup() {
    createCanvas(600, 300);
    for (let indice in json) {
        stati.push( new Stato(json[indice]) );  // Aggiungi istanza
    }
}
function draw() {
    background(255);
    for (let stato of stati) {
        stato.display();  // Visualizza stato
    }
}

Usando l’URL https://restcountries.com/v3.1/all?fields=name,latlng,population si può vedere il file JSON restituito dal servizio.
Attraverso particolari estensioni del browser (come “JSON Viewer Pro”, per Chrome e Firefox) è possibile vedere i dati e la loro struttura in modo più leggibile.

REST Countries, Campi selezionabili