Week 5 Data Visualization – Leo Shirky

Inspiration:

I find that Google Trends is great for telling time when you search for seasonal or repetitive events. For example, searches for Mariah Carey’s “All I Want for Christmas” always increases around the start of the holiday season in the United States. I eventually chose to use Ramadan, as it occurs once per calendar year, but changes when in the calendar year it occurs.

Process:

I started by downloading the Google Trends spreadsheet and adding it to Processing. I first made a simple version of what I wanted the final graph to look like, simply by telling Processing to pull the dates and searches from the .csv file. This made a simple bar chart, at which point I started to mess with the scale I wanted. I had to map the values from the .csv chart into x and y coordinates. I did this simply by messing around with different values until I found a scale I liked.

Next I added a title and a date/searches counter to display the values from the .csv file. I thought that labelling each date and having a scale on the y-axis would be too difficult for the user to read. This calculator allowed the user to easily tell exactly when and how much “Ramadan” was being searched.

The final aspect that I wanted in my graph was to highlight the bar that was being selected. I wanted the color and thickness of the bar to change to make it very clear which was being selected. Rather than have the user click each bar, I wanted it to happen automatically based on where the users mouse was.

Final Work:

Below is a video displaying how the graph works.

Challenges:

I had a lot of trouble figuring out the highlighting. I made an integer mx for the x position of the mouse. I initially tried “if (mx == x)” with x being the x value of the bar, but that would only highlight a few bars when the mouse hovered over them, rather than each bar. In the end I used if(abs(mx>3)), which worked much better.

Code:

Table table;
PFont titleFont;
int mx = 30; // mouseX position
void setup() {
  size(1280, 400);
 titleFont =  createFont("Courier New", 15);
 table = loadTable("RamadanTimeline.csv", "header");
 smooth(0);
 
}
void draw() {
  background(235,236,237);
  textFont(titleFont);
  stroke(0);
  fill(227,70,126);
  textAlign(CENTER);
  text("Interest in Ramadan by Week over past 5 years", width/2, 50);
  fill(253,93,96);
  text("Data via Google Trends", width/2, 70);
  
//take data from the .csv file
  for (int row = 0; row < table.getRowCount(); row++) {
    String dates = table.getString(row, 0);
    float searches = table.getFloat(row, 1);
    float x = map(row, 0, 216, 0, width);
    float y = map(searches, 0, 100, 375, 60);
    
//draw the lines on the graph, and change the color of the selected line
    line(x, y, x, 375);
    if(abs(mx - x)<3){
      strokeWeight(6);
      stroke(252,192,109);
    }else{
      strokeWeight(2);
      stroke(60,73,129);
    }

//display the date and data for each selected line
    if(abs(mx - x) < 3) {
      fill(66,190,171);
      text(dates, width-50, 50);
      text(nfp(searches, 1, 3), width-50, 80);
      }
    }
  }
 
void mouseMoved() {
  mx = mouseX;
}