Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Data Representation Vis-1 US Debt Holders
China 1149.60
Japan 1117.10
Oil Exporters 262.30
Brazil 253.00
Carib Bnkng 246.20
Taiwan 196.10
Switzerland 190.10
Russia 154.30
Belgium 144.20
United Kingdom 140.90
// 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
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment