​

let peopleSG;

​

let eyeColors = [];

let filmsCount = [];

​

function setup() {

  createCanvas(600, 600);

  background(222, 200, 222);

  textSize(18);

  fill(255);

  loadJSON(url, getData); // loading the JSON file at the URL specified into the variable 'data',

                          // then calling the call-back function getData

}

​

function draw() {

}

​

function getData(data) {

  peopleSG = data; // assigning data to peopleSG (but we're not using peopleSG in this sketch)

​

  for (let i = 0; i < data.length; i++) {

    eyeColors.push(data[i].eye_color); // pushing all eye_color values into the eyeColors array

    filmsCount.push(data[i].films.length);  // counting the films each character appears in and pushing                                                   // this number into the filmsCount array

  }

​

  translate(width / 2, height / 2);

​

  for (let i = 0; i < eyeColors.length; i++) {

    fill(eyeColors[i]); // using eyeColors array elements as a fill for each ellipse

    rotate(2 * PI / eyeColors.length * i); // rotating by the right amount to make a full circle

    ellipse(100, 100, 20);

    text(filmsCount[i], 120, 120); // adding film count as text next to each ellipse

  }

​

  print(filmsCount);

  print(data);

}