Created
October 23, 2012 18:20
-
-
Save evanemolo/3940501 to your computer and use it in GitHub Desktop.
Data Representation Vis-1 US Debt Holders
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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