Data Representation Vis-1 US Debt Holders

debtholders.csv

usdebt.pde

// Top 10 US Debt Holders

String[] countries;
float[] debts;

void setup () {
  size(1000, 800);
  background(255);
  colorMode(RGB);
  smooth();
  noStroke();

  loadData();
  drawChart();
  titleText();
  
}

void draw () {  
}

void loadData() {

  // load data from .csv file into two arrays (countries and debts)

  String[] rows = loadStrings("debtholders.csv");
  countries = new String[rows.length];
  debts = new float[rows.length];
  
  for(int i=0; i<rows.length; i++) {
    String[] columns = rows[i].split(",");
    String country = columns[0];
    float debt = float(columns[1]);
    countries[i] = country;
    debts[i] = debt;
  }

}

void drawChart() {

  // y-axis labels and lines
  for (int i=0; i<debts.length-3; i++) {

    fill(0);
    strokeWeight(1);
    stroke(0, 0, 0);
    // lines across chart
    // yh and h are the same map(). yh is iterating over
    // i * 200 while h is iterating over each debt amount 
    float yh = map(i * 200, 0, max(debts), 0, height-300);
    line(0, height-100-yh, width, height-100-yh);
    // y-axis label
    text(i*200, 41, height-103 - yh);
    print(i);
  }

  // draw bars
  for (int i=0; i<debts.length; i++) {
    float n = debts[i];

    float c = map(n, 0, max(debts), 90, 255);
    // mapped height from debts
    float h = map(n, 0, max(debts), 0, height-300);
    // mapped width from number of countries
    // adjust last value for gap width
    float x = map(i, 0, debts.length-1, 0, 750);
    float y = height-h;
    // push the bars and labels to the right
    float xOffset = x + 100;

    fill(c, 0, 0);
    rect(xOffset, y-100, 40, h);

    // bar labels

    fill(0);
    // formatting decimal places, commas
    String debtsFormatted  = nfc(debts[i], 2);
    // center the debt amounts above the bars
    float dtw = textWidth(debtsFormatted);
    text(debtsFormatted, x+100 - dtw/2 + 20, y-105);
    
    // center the bar labels to the bar
    float lw = textWidth(countries[i]);
    text(countries[i], x+100 - lw/2 + 20, height-80);
  }

}

void titleText() {
  fill(0);
  PFont fontTitle = loadFont("DialogInput-30.vlw");
  textFont(fontTitle,18);
  text(
    "Major Foreign Holders of US Treasury Securities\n(in billions of dollars)", width-500, 40
  );
}