INFO247 / Lab 5 / #3 - full code

_.md

[ Launch: INFO247 / Lab 5 / #3 ] 5002933 by poezn
[ Launch: INFO247 / Lab 5 / #1 ] 5002821 by poezn
[ Launch: lab5_1 ] 5001505 by poezn

config.json

{"description":"INFO247 / Lab 5 / #3 - full code","endpoint":"","display":"div","public":true,"require":[{"name":"raphael.js","url":"http://poezn.github.com/raphael/raphael.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":15},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":15},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":15},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

data.json

[
    {"country": "India", "tonnes": 11000000},
    {"country": "Colombia", "tonnes": 1570000},
    {"country": "Burundi", "tonnes": 1514000},
    {"country": "Vietnam", "tonnes": 1242540},
    {"country": "Honduras", "tonnes": 860545},
    {"country": "Cameroon", "tonnes": 850000},
    {"country": "Panama", "tonnes": 838266},
    {"country": "Guatemala", "tonnes": 732545},
    {"country": "Papua New Guinea", "tonnes": 680000},
    {"country": "Bangladesh", "tonnes": 624735},
    {"country": "Egypt", "tonnes": 620000},
    {"country": "Brazil", "tonnes": 6339350},
    {"country": "Uganda", "tonnes": 610000},
    {"country": "Malaysia", "tonnes": 535000},
    {"country": "Bolivia", "tonnes": 435100},
    {"country": "Dominican Republic", "tonnes": 401766},
    {"country": "Spain", "tonnes": 375200},
    {"country": "Martinique", "tonnes": 321454},
    {"country": "Madagascar", "tonnes": 260000},
    {"country": "South Africa", "tonnes": 250000},
    {"country": "Ecuador", "tonnes": 5000000},
    {"country": "Australia", "tonnes": 230000},
    {"country": "Kenya", "tonnes": 210000},
    {"country": "Argentina", "tonnes": 175000},
    {"country": "Cuba", "tonnes": 153546},
    {"country": "Guinea", "tonnes": 150000},
    {"country": "Cambodia", "tonnes": 147000},
    {"country": "Guadeloupe", "tonnes": 141135},
    {"country": "Jamaica", "tonnes": 130000},
    {"country": "Israel", "tonnes": 129600},
    {"country": "Central African Republic", "tonnes": 115000},
    {"country": "China", "tonnes": 4812530},
    {"country": "Pakistan", "tonnes": 95000},
    {"country": "Malawi", "tonnes": 93000},
    {"country": "Nicaragua", "tonnes": 91636},
    {"country": "Liberia", "tonnes": 90000},
    {"country": "Yemen", "tonnes": 87663},
    {"country": "Philippines", "tonnes": 3560800},
    {"country": "Indonesia", "tonnes": 3165730},
    {"country": "Costa Rica", "tonnes": 2101450},
    {"country": "Mexico", "tonnes": 1802280},
    {"country": "Thailand", "tonnes": 1720000},
    {"country": "Haiti", "tonnes": 290000},
    {"country": "Angola", "tonnes": 290000},
    {"country": "Morocco", "tonnes": 110000},
    {"country": "Lebanon", "tonnes": 110000},
    {"country": "Saint Lucia", "tonnes": 80000},
    {"country": "Zimbabwe", "tonnes": 80000}
]

inlet.js

// School of Information, UC Berkeley
// INFO 247 Lab 5: Raphaël.js
// http://blogs.ischool.berkeley.edu/i247s13/lab-5-raphael-js/ 

// Get the dimensions of the content window. This is something specific to Tributary
//   and has nothing to do with Raphaël.js
var contentHeight = tb.sh,
    contentWidth  = tb.sw;

// HTML element to use for visualization
var contentElement = "display";

// Finally, let's create a "paper": A canvas you can draw on.
var paper = Raphael(contentElement, contentWidth, contentHeight);

// import the data. This is again something that is 
// specfic to Tributary. you can import any CSV or JSON
// file (shown in the yellow tab above)
var data = tb['data'];

// ===========================================================
// HELPER FUNCTIONS

// sort by production (descending)
var sortByProduction = function(a,b) {
  return b.tonnes - a.tonnes;
};

data.sort(sortByProduction)

// ===========================================================
// START DRAWING HERE               

for (var i = 0; i < 10; i++) {
  var currentRecord = data[i];
  var tonnes = currentRecord['tonnes'];
  var width = tonnes / 25000;

  // set the (base) vertical position for bars and labels
  var y = 90 + (i * 45);

  // set the height to 30 pixels
  var barHeight = 30;

  // draw the bars as rectangles and style them
  var bar = paper.rect(135, y, width, barHeight);
  bar.attr({
    "fill":   "#E6E054",
    "stroke": "#C7A235",
    "stroke-width": 1
  })

  // draw the country labels
  var label = paper.text(110, y + 15, currentRecord["country"]);
  label.attr({
    "text-anchor": "end",
    "font-size": 28,
    "font-family": "League Gothic"
  });
  
  // draw the labels at the end of the bars
  var barLabel = paper.text(150 + width, y + 15, parseInt(width));
  barLabel.attr({
    "text-anchor": "start",
    "font-size": 13,
    "fill": "#8F8F8F",
    "font-style": "italic"
  });

}

// finally, draw the title
var title = "Top 10 Banana Producers by Annual Production";
var titleText = paper.text(contentWidth / 2, 30, title);

titleText.attr({
  "text-anchor": "middle",
  "font-family": "League Gothic",
  "font-size": 48,
  "fill": "#8D4C06"
});