INFO247 / Lab 5 / #3

_.md

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

config.json

{"description":"INFO247 / Lab 5 / #3","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               

var max = data[0]['tonnes'];
var cap = (contentWidth-30);

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

  var norm = cap * tonnes / max;
  paper.rect(10, 40 + i * 40, norm, 30);
  
}