----- Coding Tutorial by Patt Vira ----- 

Name: Habit Tracker - Data Visualization 

Video Tutorial: https://youtu.be/mQ4Cst7o4Ek

​

Connect with Patt: @pattvira

https://www.pattvira.com/

----------------------------------------

*/

​

let table;

let dates = []; let months = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

let runningDates = [];

​

let b = 3; let size = 9; let scl = 1.3;

let colorPalette = ["#0794cd", "#35d528", "#fee712", "#ffac49", "#ff6f7d", "#fd40a9"];

let fontR, fontB;

let border = 15;

​

function preload() {

  table = loadTable('runninglog.csv', 'csv', 'header');

  fontR = loadFont('Outfit-Regular.ttf');

  fontB = loadFont('Outfit-Black.ttf');

}

​

function setup() {

  createCanvas(450, 450);

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

    for (let j=0; j<months[i]; j++) {

      dates.push({month: i+1, date: j+1});

    }

  }

  for (let row=0; row<table.getRowCount(); row++) {

    let runningMonth = table.getNum(row, 'month');

    let runningDate = table.getNum(row, 'date');

    let didIRun = (element) => element.month == runningMonth && element.date == runningDate;

    let index = dates.findIndex(didIRun);

    if(index != -1) {

      runningDates.push(index);

    }

  }

​

}

​

function draw() {

  background("#e3e4db");

  strokeWeight(0.5);

  line(0, border, width, border);

  line(0, height-border, width, height-border);

  line(border, 0, border, height);

  line(width-border, 0, width-border, height);

  translate(width/2, height/2);

  noStroke();

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

    let val = runningDates[i];

    let angle = sqrt(val) * b;

    let r = b * angle;

    let x = r*cos(angle);

    let y = r*sin(angle);

    fill(random(colorPalette));

    ellipse(x, y, size*scl, size*scl);

  }

  textAlign(CENTER, CENTER);

  textSize(size);

  fill(0);

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

    let angle = sqrt(i) * b;

    let r = b * angle;

    let x = r * cos(angle);

    let y = r * sin(angle);

    if (dates[i].date == 1){

      textFont(fontB);

    } else {

      textFont(fontR);

    }

    push();

    translate(x, y);

    if (i != 0) {

      rotate(angle + PI/2);

    }

    text(dates[i].date, 0, 0);

    pop();

  }

  noLoop();

}