Data-Art: Visualizing Data

The concept

Data-art maps numerical values to visual properties: position, size, color, rotation. Unlike infographics (clarity), data-art seeks expressiveness and beauty. Data is encoded in the form itself, without explicit legends.

The code

// Data-art: animated bar heights from noise
let data = [];
function setup() {
  createCanvas(400, 280);
  for (let i=0; i<30; i++) data.push(0);
}
function draw() {
  background(11,15,20);
  let bw = width/data.length;
  for (let i=0; i<data.length; i++) {
    data[i] = noise(i*0.2, frameCount*0.01) * height * 0.8;
    noStroke(); fill(55, 227, 195, 180);
    rect(i*bw+2, height-data[i], bw-4, data[i]);
  }
}

Going further

Explore other free courses on the Learn page, or book a call to discuss your project.