Dades i art (I)

Per què utilitzar dades en l'art?

Les dades són el reflex quantitatiu del món: temperatures, preus, emocions, moviments. L'art de dades (data art) transforma aquesta informació abstracta en experiències visuals i emocionals.

• Visualitzar canvis climàtics amb colors i formes.
• Crear retrats generatius a partir de dades personals.
• Mapejar ciutats, xarxes socials o qualsevol conjunt de dades.
• Fer art generatiu que evoluciona amb dades en temps real (APIs).

Carregar CSV: await loadTable()

Un fitxer CSV (Comma-Separated Values) és una taula de dades. Amb p5.js v2, el carreguem dins d'async setup() amb await loadTable().

let taula;

async function setup() {
  createCanvas(400, 200);
  taula = await loadTable('dades.csv', 'csv', 'header');
  println(taula.getRowCount());
  let valor = taula.getNum(0, 'temperatura');
}

Exemple: visualitzar un CSV simulat de temperatures mensuals amb barres.

for (let i = 0; i < taula.getRowCount(); i++) {
  let temp = taula.getNum(i, 'temp');
  let alt = map(temp, 0, 35, 0, height - 40);
  fill(255, 100, 0, 200);
  rect(i * ampleBarra, height - alt, ampleBarra - 2, alt);
  fill(0); textAlign(CENTER);
  text(taula.getString(i, 'mes'), i * ampleBarra + ampleBarra/2, height - 10);
}

Carregar JSON: await loadJSON()

JSON (JavaScript Object Notation) és un format estructurat. Amb p5.js v2, el carreguem amb await loadJSON().

let dades;

async function setup() {
  createCanvas(400, 200);
  dades = await loadJSON('dades.json');
  println(dades.ciutat);
  println(dades.temperatura);
}

Exemple: visualitzar dades meteorològiques en JSON.

text('Ciutat: ' + dades.ciutat, 20, 40);
text('Temperatura: ' + dades.temperatura + '°C', 20, 70);
for (let i = 0; i < dades.pluja.length; i++) {
  let angle = map(i, 0, dades.pluja.length, 0, TWO_PI);
  let r = map(dades.pluja[i], 0, 5, 10, 40);
  ellipse(cos(angle) * r, sin(angle) * r, 8, 8);
}

Dades vives: APIs i await loadJSON() amb URLs

Podem carregar dades directament d'APIs passant una URL a loadJSON().

let dades;

async function setup() {
  createCanvas(400, 200);
  let url = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson';
  dades = await loadJSON(url);
  for (let terratremol of dades.features) {
    let mag = terratremol.properties.mag;
    let lloc = terratremol.properties.place;
  }
}

Algunes APIs requereixen clau d'accés. Per a prototips, pots descarregar les dades en un fitxer JSON local.

Mapeig de dades a visuals

La clau de l'art de dades és decidir com traduir cada valor numèric en una propietat visual:

• Temperatura → color (fred = blau, càlid = vermell).
• Població → mida dels cercles en un mapa.
• Velocitat del vent → rotació d'un molinet o aspes.
• Sèrie temporal → posició Y en una línia de temps.

Exemple: dataset simulat de poblacions de ciutats, visualitzat amb cercles de mida proporcional.

let maxPob = ciutats[0].pob;
for (let i = 0; i < ciutats.length; i++) {
  let x = 40 + i * 65; let y = height / 2;
  let mida = map(ciutats[i].pob, 0, maxPob, 10, 60);
  fill(100, 150, 255, 180); ellipse(x, y, mida, mida);
  fill(0); textAlign(CENTER); text(ciutats[i].nom, x, y + 5);
}

Exemples creatius pas a pas

for (let i = 0; i < emocions.length; i++) {
  let x = map(i, 0, emocions.length-1, 20, width-20);
  let y = map(emocions[i], 0, 10, height-20, 20);
  stroke(lerpColor(color(255,0,0), color(0,255,0), emocions[i]/10));
  vertex(x, y);
}

let keys = Object.keys(habilitats);
let valors = Object.values(habilitats);
for (let i = 0; i < keys.length; i++) {
  let angle = map(i, 0, keys.length, 0, TWO_PI) - PI/2;
  let r = map(valors[i], 0, 100, 0, maxR);
  vertex(cx + cos(angle) * r, cy + sin(angle) * r);
}

Consells per treballar amb dades

• Explora les dades primer: imprimeix-les amb print() o console.log() abans de visualitzar-les.
• Neteja de dades: comprova valors nuls o extrems. Utilitza constrain() per limitar visuals.
• Escala amb map(): la majoria de dades no estan en rangs visuals (0-255, 0-width).
• Utilitza await dins d'async setup(): sempre carrega fitxers CSV/JSON amb await.
• Comença amb dades petites: un CSV de 10 files és suficient per provar.