Phil is a Statistical Prosthesis

I was finally able to get my Spotify data for the first part of the year. This comes is in the form of a JSON file. 

[
  {
    "endTime" : "2020-04-13 15:16",
    "artistName" : "Doom Side of the Moon",
    "trackName" : "Time",
    "msPlayed" : 7810
  },...

I only needed the "artistName"  and the number of times each artisitName appears in the file for the visualization I wanted to produce. To do this I fist converted the JSON into a CSV file and removed all the extra data, then I converted it back into a JSON file to use a p5 word counting sketch to determine how many times each artistName was in the file. Then exported a CSV from p5 of the atristName counts, I could then use this CSV file to generate a visualization for my streaming history since January first 2021.

I used code found in this repo by Benjamin Cooley. https://github.com/bendoesdata/year_of_2019

I had to adjust a bit of the code to match the way I exported my data. The final version of the code I ended up using is below.

var circles = [];
let width, height, chartWidth, chartHeight;
let name, totals, size;

// make sure data is loaded first
function preload() {
  table = loadTable('ArtistCountAdj.csv', 'csv', 'header');
}

function setup() {
  width = windowWidth - 10;
  height = windowHeight + 10;

  chartWidth = width - 100;
  chartHeight = windowHeight + 50;
  createCanvas(width, height);
  background(30);

  var protection = 0;

  while (circles.length < 50) {
    for (let r = 0; r < table.getRowCount(); r++) {
      name = table.getString(r, 0);
      totals = table.getNum(r, 1);
      noStroke();
      fill(250, 80);
      // map the size of circle
      size = map(totals, 0, 553, 1, 150);
      // console.log(size)

      var circle = {
        x: random(20, windowWidth - 20),
        y: random(50, chartHeight - 100),
        r: size,
        artist: name
      }

      var overlapping = false;
      for (var j = 0; j < circles.length; j++) {
        var other = circles[j];
        var d = dist(circle.x, circle.y, other.x, other.y);
        if (d < circle.r + other.r) {
          overlapping = true;
        }
      }

      if (!overlapping) {
        circles.push(circle);
      }

      protection++;
      if (protection > 100000) {
        break;
      }
    }
  }

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

    // draw the circles and text
    fill(random(0, 255), random(0, 10), random(0, 255), 150);
    noStroke();
    ellipse(circles[i].x, circles[i].y, circles[i].r * 5, circles[i].r * 5);
    textSize(12);
    fill(250);
    noStroke();
    textAlign(CENTER);
    if ((circles[i].r * 2) > 80) {
      text(circles[i].artist, circles[i].x - 50, circles[i].y - 7, 100, 50)
    }

  }

}

Here is the full-screen p5 sketch.

https://editor.p5js.org/phil-in-a-can/full/T9Uu1oydB

And the editor view.

https://editor.p5js.org/phil-in-a-can/sketches/T9Uu1oydB

The code The code randomizes the color and placement of each data point.

I also used this opportunity to setup and use Visual Studio Code. I enjoy the interface and the ease of use for larger supplemental files. One thing of note. In the p5 web editor the data points(circles) would always overlap and when using Visual Studio Code the overlap worked as expected and kept the data points(circles). There is no difference in the code running in the p5 web-editor and the code running in Visual Studio Code.