Data: JSON

Load JSON data and visualize object fields.

Example 1: JSON Bubble Plot

Code

let data;

function preload() {
  data = loadJSON('../assets/data/example.json');
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(252);
  for (const c of data.cities) {
    fill(255, 45, 140, 180);
    noStroke();
    circle(c.x, c.y, c.pop * 2.5);

    fill(20);
    text(c.name, c.x + 12, c.y);
  }
}

Try this: Map a different field to bubble size.

Open sketch in new tab

Example 2: JSON Bar Chart

Code

let data;

function preload() {
  data = loadJSON('../assets/data/example.json');
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(255);
  const arr = data.cities;
  const w = width / arr.length;

  for (let i = 0; i < arr.length; i++) {
    const h = map(arr[i].pop, 0, 40, 0, 280);
    fill(255, 45, 140);
    rect(i * w + 12, height - h - 40, w - 24, h, 4);
    fill(20);
    text(arr[i].name, i * w + w / 2, height - 18);
  }
}

Try this: Sort by pop before drawing to compare rankings.

Open sketch in new tab

Resources