Last Summer Project

Last week was my final class for the summer and as part of our final assignment, we were told to create a data visualization on Processing. The data for this was the price of grapes and wine from 1996 to 2016.

The goal was to learn how to access external data and display it in a meaningful way to the users and some of us were just curious to see if the price of grapes affected the price of wine *laugh*.

We pulled the file with all the records and placed it in a “Table” in processing which is a feature/library that processing comes with. This provided us with many functions to manipulate the data to fit our needs.

We wanted to show the price of the wine and grapes from the year 1996–2016 side by side. The following is what my final visualization looks like.

It’s a fairly simple bar diagram and when you hover on a bar, a tooltip will pop up giving you additional information about the “item”.

The code for this project:

Table foodTable = null;
color wineColor = #FB7476;
color grapeColor = #81DED1;
color barColor = #FFFFFF;
color highlightColor = #888888;
float dataTipX=0;
float dataTipY = 0;
int dataTipYear = 0;
float dataTipPrice = 0;
String dataTipName;//name of item

int flag = 0;

void setup() {
 size(1200, 600);
 foodTable = loadTable(“ap.data.3.Food.txt”, “header,tsv”);
 foodTable.trim(“series_id”);
 noStroke();
}

void draw() {
 background(240);
 float x = 115;
 int startYear = 1996;
 float barWidth = 20; //width of bars
 int margin = 10; //margin between months
 String seriesId = “APU0000720311”; //wine code
 drawLine();
 drawBars(foodTable, seriesId, x, barWidth, margin, startYear, wineColor);//draw wine
 seriesId = “APU0000711417”; //grape code
 drawBars(foodTable, seriesId, x + barWidth, barWidth, margin, startYear, grapeColor);//draw grapes
 if (dataTipX > 0) {
 drawDataTip(dataTipX, dataTipY, dataTipYear, dataTipPrice, dataTipName);
 }
 dataTipX = -1;
 dataTipY = -1;
}

void drawLine() {
 stroke(230);
 for (int i=50; i<height; i+=50) {
 line(0, i, width, i);
 }
 noStroke();
}

void drawBars(Table foodTable, String seriesId, float x, float barWidth, int margin, int startYear, color barColor) {
 int i = 1;
 int numMonths = 12;
 float averagePrice = 0;
 for (TableRow row : foodTable.findRows(seriesId, “series_id”)) {
 int year = row.getInt(“year”);
 if ( year >= startYear) {
 float price = row.getFloat(“value”);
 averagePrice += price;
 if (i % numMonths == 0) {
 averagePrice /= numMonths;
 String month = row.getString(“period”);
 float h = averagePrice * 40;
 float y = height — h;
 fill(barColor);
 setHighlight(x, y, barWidth, h);
 rect(x, y, barWidth, h,10,10,0,0);
 dataTip(x, y, barWidth, h, year, averagePrice, seriesId);
 x= x + (barWidth*2) + margin;
 averagePrice = 0;
 }
 i++;
 }
 }
}

void setHighlight(float x, float y, float barWidth, float h) {
 if (mouseX >= x && mouseX <= x + barWidth && mouseY >= y && mouseY <= y + h) {
 fill(highlightColor);
 }
}

void drawDataTip (float x, float y, int year, float price, String dataTipName) {
 fill(10);
 rect( x, y, 150, 80,10);
 triangle(x+65, y+80, x+75, y+90, x+85, y+80);
 fill(255);
 text(“Item: “ + dataTipName, x+15, y+25);
 text(“Year: “ + year, x+15, y+45);
 text(“Price: $” + price, x+15, y+65);
}

void dataTip(float x, float y, float barWidth, float h, int year, float price, String seriesId) {
 if (mouseX >= x && mouseX <= x + barWidth && mouseY >= y && mouseY <= y + h) {
 if (seriesId ==”APU0000720311") {
 dataTipName = “Wine”;
 } else {
 dataTipName = “Grapes”;
 }
 dataTipX = mouseX-75;
 dataTipY = mouseY-100;
 dataTipYear = year;
 dataTipPrice = price;
 }
}