[13124, 13341, 9805],  //sun

  [5819, 11868, 231],  //mon

  [31, 14514, 114],  //tues

  [10552, 8925, 924],  //wed

  [5677, 12276, 478],  //thurs

  [6252, 4427],  //fri

  [1001, 7780],  //sat

];

​

let circles = [];

let angle = 0;

​

function setup() {

  createCanvas(600, 600);

  generateCircles();

}

​

function draw() {

  background(0);

  fill("white");

  circle(width / 2, height / 2, 600);

  translate(width / 2, height / 2);

  drawCircles();

  angle += 0.01;

}

​

function generateCircles() {

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

    let angleIncrement = 80 / stepsData[i].length; // circle angle

    let radius = i * 30 + 100; // adjust circle distance

    let dayColor = getColorForDay(i); // fill color

    let spacing = 120; // circle spacing

​

    for (let j = 0; j < stepsData[i].length; j++) {

      let circle = {  ////j is certain day steps

        size: max(20, Number(stepsData[i][j]) / 60), // circle size

        initialAngle: angle + spacing + j * angleIncrement,

        radius: radius,

        color: dayColor,

      };

      circles.push(circle);

      spacing += 120;

    }

​

    angle += angleIncrement;

  }

}

​

function drawCircles() {

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

    let c = circles[i];

    let x = cos(c.initialAngle + angle) * c.radius;

    let y = sin(c.initialAngle + angle) * c.radius;

​

    fill(c.color + "80");

    noStroke();

    circle(x, y, c.size);

  }

}

​

function getColorForDay(dayIndex) {

  let dayColors = ["#FF0000", "#FFA500", "#FFFF00", "#008000", "#0000FF", "#800080", "#FF0090"];

  return dayColors[dayIndex % dayColors.length];

}

​