Spain GDP & Government Debt Visualization (2002 - 2011)

I’ve just been playing around with Processing and figuring out how I can make my European Debt Crisis Information Graphic time-based.  I need to start somewhere and here’s the code I’ve written so far:

float[] data;
float[] debt;
int time;
int step;
int yeaar;
float x, y;

void setup() {
  size(300, 300); 
  String[] spain = loadStrings("data.txt");
  String[] debt_data = loadStrings("debt.txt");
  data = float(split(spain[0], ","));
  debt = float(split(debt_data[0], ","));
  time = millis();
  step = 0;
  yeaar = 2002;
  PFont f = createFont("Arial", 16, true);
  textFont(f);
}

void draw() {
  background(255);
 
  // Timer
  int passedtime = millis() - time;
 
  // Counter
  if(passedtime >= 1000) {
    if(step < 9) {
      step = step + 1;
      yeaar = yeaar + 1;
    } else {
      step = 0;
      yeaar = 2002;
    }
    // Reset time
    time = millis();
  }
 
  // Debt position
  x = ((width - data[step]) / 2);
  y = ((height - data[step]) / 2);
 
  //GDP Block
  noStroke();
  fill(43, 56, 189);
  rectMode(CENTER);
  rect(150, 150, data[step], data[step]);
 
  // Debt % Block
  fill(255, 0, 10, 200);
  rectMode(CORNER);
  rect(x, y, (data[step] * debt[step]), data[step]);
 
  // Text
  fill(0);
  text(yeaar, 130, 240);
  text("Spain Government Debt & GDP", 40, 50);
}