INFO247 / Lab 5 / #5

_.md

[ Launch: INFO247 / Lab 5 / #3 - full code ] 5002988 by poezn
[ 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 / #5","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},"data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data_1970.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data_2011.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":true,"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_1970.csv

data_2011.csv

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_1970 = tb['data_1970'];
var data_2011 = tb['data_2011'];

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

var circles = paper.set();
var currentYear = 1970;

var moveCircles = function() {
  var dataSet;
  if (currentYear == 1970) {
	dataSet = data_2011;
    currentYear = 2011;
  } else {
	dataSet = data_1970;
    currentYear = 1970;
  }
    
  circles.forEach(function(d, i) {
    var record = dataSet[i];
    var hourly = record["hourlyearnings_adjusted"];
    var width  = hourly * 10;
    d.animate({"cx": 260 + width}, 1500, "easeOut");
  });
  
};

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

for (var i = 0; i < data_1970.length; i++) {
  var currentRecord = data_1970[i];
  
  var hourly = currentRecord["hourlyearnings_adjusted"];

  var width = hourly * 10;

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

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

  // draw the bars as rectangles and style them
  var bar = paper.rect(260, y, width, barHeight);
  bar.attr({
    "fill":   "#E6E054",
    "stroke": "#47412F",
    "stroke-width": 1
  });
  
  bar.click(moveCircles);
  
  // draw the industry labels
  var label = paper.text(240, y + 9, currentRecord["industry"]);
  label.attr({
    "text-anchor": "end",
    "font-size": 23,
    "font-family": "League Gothic"
  });
  
  // draw the labels at the end of the bars
  var barLabel = paper.text(277 + width, y + 10, hourly);
  barLabel.attr({
    "text-anchor": "start",
    "font-size": 13,
    "fill": "#BDBDBD",
    "font-style": "italic"
  });

  // draw the dots
  var circle = paper.circle(260 + width, y + barHeight/2, 4)
  circle.attr({
    "fill": "#D6681F",
    "stroke": "#851515",
    "stroke-width": 2
  });
	
  circles.push(circle);
}


// finally, draw the title
var title = "Hourly Wages Per Industry 1970";
var titleText = paper.text(contentWidth / 2, 30, title);

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

var subtitle = "(inflation adjusted; click the bars for 2011)";

var subTitleText = paper.text(contentWidth / 2, 70, subtitle);

subTitleText.attr({
  "text-anchor": "middle",
  "font-family": "League Gothic",
  "font-size": 20,
  "fill": "#747373"
});