Week 4(Data Analysis)

Description:

I wrote a code that reads from the billboard top 100 songs (not the most recent). I edit the .csv file I found online to remove redundant data that I did not need and I used the left data to draw circles at random locations for each of the top 100.

I added a small alpha value to show the layering of circles as they are random.

I had to deal with longer song names and make them wrap around.

 

Instead of trying to find a library that works, I decided to try to make the wrap work myself to explore and know what I can do to manipulate a string.

key:

Code:

I started with a circle class to draw each circle at a random location and depending on circle details. I added an array to save the circles.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
String names[];
int ranks[];
int weeks[];
boolean arrDone[] = new boolean[100];
boolean flag = false;
int counterDone = 0;
PFont myFont;
class Circles {
//attributes
PVector pos ;
int col;
int diam;
String text;
// number of weeks on board gives color shade, and rank determines radius
Circles(int weeks, int ranks, String _text) {
pos = new PVector(random(0, width), random(0, height));
//calculate fraction from 255
col = int((255*weeks/87));
text = _text;
//max diam = 70
diam =int((width)/ranks);
diam = constrain(diam, 50, 500);
}
void draw_circle() {
fill(0, 0, col, 200);
//fill(255,100);
noStroke();
ellipse(pos.x, pos.y, diam, diam);
// split text into lines
String[] words = split(text, ' ' );
writetext(words);
}
String names[]; int ranks[]; int weeks[]; boolean arrDone[] = new boolean[100]; boolean flag = false; int counterDone = 0; PFont myFont; class Circles { //attributes PVector pos ; int col; int diam; String text; // number of weeks on board gives color shade, and rank determines radius Circles(int weeks, int ranks, String _text) { pos = new PVector(random(0, width), random(0, height)); //calculate fraction from 255 col = int((255*weeks/87)); text = _text; //max diam = 70 diam =int((width)/ranks); diam = constrain(diam, 50, 500); } void draw_circle() { fill(0, 0, col, 200); //fill(255,100); noStroke(); ellipse(pos.x, pos.y, diam, diam); // split text into lines String[] words = split(text, ' ' ); writetext(words); }
String names[];
int ranks[];
int weeks[];
boolean arrDone[] = new boolean[100];
boolean flag = false;
int counterDone = 0;

PFont myFont;


class Circles {
  //attributes
  PVector pos ;
  int col;
  int diam;

  String text;

  // number of weeks on board gives color shade, and rank determines radius
  Circles(int weeks, int ranks, String _text) {
    pos = new PVector(random(0, width), random(0, height));
    //calculate fraction from 255
    col = int((255*weeks/87));
    text = _text;
    //max diam = 70
    diam =int((width)/ranks);
    diam = constrain(diam, 50, 500);
  }

  void draw_circle() {
    fill(0, 0, col, 200);
    //fill(255,100);
    noStroke();
    ellipse(pos.x, pos.y, diam, diam);

    // split text into lines
    String[] words = split(text, ' ' );

    writetext(words);
  }

The next function is part of the circle class, I put it here separately because it includes the code for the wrap of the text.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
void writetext(String[] arr) {
String[] temp = new String[arr.length];
int n=0;
for (int i=0; i<arr.length; i++) {
fill(255);
textSize(diam/5);
textAlign(CENTER);
if (arr.length>1) {
if (i<arr.length-1) {
if ((textWidth(arr[i])+textWidth(arr[i+1]))<diam/2) {
temp[i] = arr[i] + " " + arr[i+1];
n++;
//i++;
continue;
} else {
temp[i] = arr[i];
n++;
}
} else {
temp[i] = arr[i];
n++;
}
} else {
temp[i] = arr[i];
n++;
}
}
for (int k=-1; k<n-1; k++) {
if (arr.length>1 && textWidth(temp[k+1])>0) {
if (n>=3) {
text(temp[k+1], pos.x, pos.y+k*diam/5);
} else {
text(temp[k+1], pos.x, pos.y+(k+1)*diam/5);
}
} else {
text(arr[0], pos.x, pos.y+(k+1)*diam/5);
}
}
}
}
void writetext(String[] arr) { String[] temp = new String[arr.length]; int n=0; for (int i=0; i<arr.length; i++) { fill(255); textSize(diam/5); textAlign(CENTER); if (arr.length>1) { if (i<arr.length-1) { if ((textWidth(arr[i])+textWidth(arr[i+1]))<diam/2) { temp[i] = arr[i] + " " + arr[i+1]; n++; //i++; continue; } else { temp[i] = arr[i]; n++; } } else { temp[i] = arr[i]; n++; } } else { temp[i] = arr[i]; n++; } } for (int k=-1; k<n-1; k++) { if (arr.length>1 && textWidth(temp[k+1])>0) { if (n>=3) { text(temp[k+1], pos.x, pos.y+k*diam/5); } else { text(temp[k+1], pos.x, pos.y+(k+1)*diam/5); } } else { text(arr[0], pos.x, pos.y+(k+1)*diam/5); } } } }
void writetext(String[] arr) {
    String[] temp = new String[arr.length];
    int n=0;
    for (int i=0; i<arr.length; i++) {
      fill(255);
      textSize(diam/5);
      textAlign(CENTER);
      if (arr.length>1) {
        if (i<arr.length-1) {
          if ((textWidth(arr[i])+textWidth(arr[i+1]))<diam/2) {
            temp[i] = arr[i] + " " + arr[i+1];
            n++;
            //i++;
            continue;
          } else {
            temp[i] = arr[i];
            n++;
          }
        } else {
          temp[i] = arr[i];
          n++;
        }
      } else {
        temp[i] = arr[i];
        n++;
      }
    }
    for (int k=-1; k<n-1; k++) {
      if (arr.length>1 && textWidth(temp[k+1])>0) {
        if (n>=3) {
          text(temp[k+1], pos.x, pos.y+k*diam/5);
        } else {
          text(temp[k+1], pos.x, pos.y+(k+1)*diam/5);
        }
      } else {
        text(arr[0], pos.x, pos.y+(k+1)*diam/5);
      }
    }
  }
}

Here, I declared the circle’s object array and then loaded and processed the data from the .csv file.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
void readData() {
String stuff[] = loadStrings("charts.csv");
String data[]= new String[3];
// Convert String into an array of integers using ',' as a delimiter
// string array is returned, which we cast to an int array
names = new String[stuff.length];
ranks = new int[stuff.length];
weeks = new int[stuff.length];
for (int i=1; i<stuff.length; i++) {
data = split(stuff[i], ',' );
//fill arrays with data
ranks[i] = int(data[0]);
names[i] = data[1];
weeks[i] = int(data[2]);
}
}
void readData() { String stuff[] = loadStrings("charts.csv"); String data[]= new String[3]; // Convert String into an array of integers using ',' as a delimiter // string array is returned, which we cast to an int array names = new String[stuff.length]; ranks = new int[stuff.length]; weeks = new int[stuff.length]; for (int i=1; i<stuff.length; i++) { data = split(stuff[i], ',' ); //fill arrays with data ranks[i] = int(data[0]); names[i] = data[1]; weeks[i] = int(data[2]); } }
void readData() {
  String stuff[] = loadStrings("charts.csv");
  String data[]= new String[3];
  // Convert String into an array of integers using ',' as a delimiter
  // string array is returned, which we cast to an int array
  names = new String[stuff.length];
  ranks = new int[stuff.length];
  weeks = new int[stuff.length];

  for (int i=1; i<stuff.length; i++) {
    data = split(stuff[i], ',' );

    //fill arrays with data
    ranks[i] = int(data[0]);
    names[i] = data[1];
    weeks[i] = int(data[2]);
  }
}

in the creat function here I added a boolean array to check if the song has been output on the screen or not to avoid repitition.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
void create() {
int num = int(random(1, 99));
boolean flag = false;
if (arrDone[num]) {
flag= true;
} else {
arrDone[num] = true;
}
if (!flag && count<=100) {
// int weeks, int ranks, String _text){
circle[count] = new Circles(weeks[num], ranks[num], names[num]);
circle[count].draw_circle();
count++;
}
}
void create() { int num = int(random(1, 99)); boolean flag = false; if (arrDone[num]) { flag= true; } else { arrDone[num] = true; } if (!flag && count<=100) { // int weeks, int ranks, String _text){ circle[count] = new Circles(weeks[num], ranks[num], names[num]); circle[count].draw_circle(); count++; } }
void create() {
  int num =  int(random(1, 99));
  boolean flag = false;
  if (arrDone[num]) {
    flag= true;
  } else {
    arrDone[num] = true;
  }

  if (!flag && count<=100) {
    // int weeks, int ranks, String _text){
    circle[count] = new Circles(weeks[num], ranks[num], names[num]);
    circle[count].draw_circle();
    count++;
  }
}

I only used the draw function for the text to appear at the beginning of the code running time. I generated the circles with mouse clicks instead to give time for the user to analyze each new circle.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
void setup() {
size(1000, 1000);
background(200);
readData();
}
void draw() {
myFont = createFont("SourceCodePro-Light.ttf", 60);
textFont(myFont);
if (frameCount<25) {
String textt = "Press at a random location";
textSize(60);
text(textt, width/2-(textWidth(textt)/2), height/2-32/2);
}else if(frameCount<30){
background(200);
}
}
void mouseClicked() {
if (frameCount>30){
create();
}
}
void setup() { size(1000, 1000); background(200); readData(); } void draw() { myFont = createFont("SourceCodePro-Light.ttf", 60); textFont(myFont); if (frameCount<25) { String textt = "Press at a random location"; textSize(60); text(textt, width/2-(textWidth(textt)/2), height/2-32/2); }else if(frameCount<30){ background(200); } } void mouseClicked() { if (frameCount>30){ create(); } }
void setup() {
  size(1000, 1000);
  background(200);
  readData();
}

void draw() {
  myFont = createFont("SourceCodePro-Light.ttf", 60);
  textFont(myFont);
  if (frameCount<25) {
    String textt = "Press at a random location";
    textSize(60);

    text(textt, width/2-(textWidth(textt)/2), height/2-32/2);
  }else if(frameCount<30){
    background(200);
  }
  
}

void mouseClicked() {
  if (frameCount>30){
    create();
  }
}

 

Video:

 

 

One thought on “Week 4(Data Analysis)”

Leave a Reply