INFO 247 - Lab 7 - #3 - Putting it together

_.md

[ Launch: INFO 247 - Lab 7 - #3 - Putting it together ] 5113265 by akselx
[ Launch: INFO 247 - Lab 6 - #3 ] 5054877 by poezn
[ Launch: INFO 247 - Lab 6 - #1 ] 5054749 by poezn
[ Launch: INFO 247 - Lab 6 - #1 ] 5054734 by poezn

config.json

{"description":"INFO 247 - Lab 7 - #3 - Putting it together","endpoint":"","display":"svg","public":true,"require":[],"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},"matrix-data.json":{"default":true,"vim":false,"emacs":false,"fontSize":15}},"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}

inlet.js

// School of Information, UC Berkeley
// INFO 247 Lab 7: D3.js
// http://blogs.ischool.berkeley.edu/i247s13/lab-7-d3-js-part-2/ 

// get the data from the 'matrix-data.json' data file
var data = tb['matrix-data'];

// YOUR TURN!!!
// Create a color scale that has the following colors:
// minimum: 15; red
// maximum: 40; green
// center:  23; yellow
// You can modify the color scale below.

var start = 17;
var middle = 29;
var end = 39;
var legendSquareWidth = 32;

var colorScale = d3.scale.linear()
.domain([start, middle, end])
.range(['#BD0508','#FCEA84', '#99AF93']);

// for each race, let's add a row that will eventually
// contain all squares for that particular race.
// We're using the SVG <g> element for this. <g> elements
// are invisible but can be moved around on the screen

var rows = g.selectAll("g.row")
.data(data)
.enter().append("g")
.attr({
  "class": "row",
  "transform": function(d, i) {
    var tx = 101 ;
    var ty = -559 + i* 50
    var rotation = 5*90 //degrees
    return "rotate("+rotation+") translate(" + [tx, ty] + ")"
  }
});

// within each of these rows, let's add 9 squares (one for 
// each data point)

rows.selectAll("rect")
.data(function(d, i) { return d.values; })
.enter().append("rect")
.attr({
  "transform": function(d, i) {
    var tx = i * 50;
    var ty = 0;
    return "translate(" + [tx, ty] + ")"
  },
  "width": 50,
  "height": 50
})
.style({
  "fill": function(d, i) {
    return colorScale(d); // <== YOU MIGHT WANT TO CHANGE THIS 
  }, 
  "stroke": "#FFFFFF"
});

matrix-data.json

[
  {"race": "Asian",             "values": [22,17,20,20,26,26,25,21,29] },
  {"race": "Black",             "values": [34,28,31,34,37,34,32,39,38] },
  {"race": "Hispanic / Latin",  "values": [22,19,24,19,23,26,26,21,30] },
  {"race": "Indian",            "values": [18,21,25,18,24,27,21,33,30] },
  {"race": "Middle Eastern",    "values": [27,21,25,23,23,32,23,32,28] },
  {"race": "Native American",   "values": [31,27,29,27,36,35,34,32,34] },
  {"race": "Other",             "values": [30,24,27,28,29,32,32,35,33] },
  {"race": "Pacific Islander",  "values": [23,25,24,24,28,29,22,30,29] },
  {"race": "White",             "values": [21,21,22,20,25,27,26,23,29] }
]