Small multiples - Variable string keys

_.md

[ Launch: Missing Data ] 6763430 by roundrobin
[ Launch: Data workshop responsive layout ] 6757863 by dwskau
[ Launch: Responsive svg layout ] 6745386 by roundrobin
[ Launch: Responsive svg layout ] 6745287 by roundrobin
[ Launch: Tributary inlet ] 6509693 by roundrobin

config.json

{"description":"Small multiples - Variable string keys","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"test.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/fk1ABrj.png"}

inlet.js

var data = tributary.test;
var columns = 2;

var width = 515;
var height = 221;

var chartX = 80;
var chartY = 90;

var costColor = "#AD6023";
var weightColor = "#74B8C5";

/**
*
* Data aggregation phase
*
**/

var keys = _.keys(data);
var nrOfEls = keys.length;

var aggregatedData = {};

_.each(keys,function(d, i){
	
  var values = data[d];
  var costVals = _.values(values.Cost);
  var weightVals = _.values(values.Weight);
  
  var totalCost = _.reduce(costVals, function(memo, num){ return memo + num; }, 0);
  var totalWeight = _.reduce(weightVals, function(memo, num){ return memo + num; }, 0);
  
  aggregatedData[d] = {"cost": totalCost, "weight": totalWeight};
  
});



var maxCost = _.chain(aggregatedData).values().pluck("cost").max().value();
var maxWeight = _.chain(aggregatedData).values().pluck("weight").max().value();


var totalRange = d3.range(nrOfEls);
var range =  d3.range(Math.ceil(nrOfEls / columns));


/**
*
* "Create needed scales" phase!
*
**/
var heightScale = d3.scale.ordinal().domain(range).rangeBands([0, height], 0.1);
var widthScale = d3.scale.ordinal().domain(d3.range(columns)).rangeBands([0, width], 0.1);


var smallMultipleScaleCost = d3.scale.linear().domain([0, maxCost]).range([0,heightScale.rangeBand()]);
var smallMultipleScaleWeight = d3.scale.linear().domain([0, maxWeight]).range([0,heightScale.rangeBand()]);


/**
*
* Draw on canvas phase!
*
**/

var chartGroup = g.append("g")
  .attr({
    transform: "translate("+[chartX,chartY]+")",
    "class": "group"
  });


var backgroundRect = chartGroup.append("rect")
.attr({
  width: width,
  height: height,
  fill: "#868686"
});


var xIndex = 0;
var yIndex = 0;
var yIndexHelper = 0;
var ySum = 0;

var legendGroup = chartGroup.append("g")
  .attr({
    transform: "translate("+[0,-20]+")",
    "class": "group"
  });

var legendRectAttrs = {
    width: 10,
    height: 10,
    fill: costColor
};

legendGroup.append("rect")
.attr(legendRectAttrs);

legendGroup.append("rect")
.attr(legendRectAttrs)
.attr({ y: -15, fill: weightColor});

legendGroup.append('text')
.text("Total Weight")
.attr({
  x : 13,
  y: -6,
  "font-size": 10
});

legendGroup.append('text')
.text("Total Cost")
.attr({
  x : 13,
  y: 8,
  "font-size": 10
});

  


var selection = chartGroup.selectAll('.circleGroups')
.data(keys)
.enter();


var x = 0;
var y = 0;
var rectGroup = selection.append("g")
.attr({
  transform: function(d,i){
    if(xIndex % columns === 0){
      xIndex = 0;
    }
    xIndex++; 
    
    if(yIndexHelper % columns === 0){
      yIndex++;
      yIndexHelper = 0;
    }  
    yIndexHelper++;
    
    y = heightScale(yIndex-1);
    x = widthScale(xIndex-1);
    
    return "translate("+[x, y]+")";
  },
  "class": "zickzack-group"
});

rectGroup.append("rect")
.attr({
  width: widthScale.rangeBand(),
  height: heightScale.rangeBand(),
  fill: "#C7C7C7"
});


var texts = rectGroup.append('text')
.text(function(d,i){
  return d;
})
.attr({
  fill: "#000000",
  x : (widthScale.rangeBand()/20),
  y: heightScale.rangeBand()*0.7,
  "font-size": heightScale.rangeBand()*0.4
});

texts.each(function(){
  
  var el = d3.select(this);
  fitTextToBox((widthScale.rangeBand())*0.8,heightScale.rangeBand()*0.5,el);
  
});


rectGroup.append("rect")
.attr({
  width: widthScale.rangeBand()/20,
  height: function(d, i){
    return smallMultipleScaleCost(aggregatedData[d].cost);
  },
  y: function(d,i){
    return heightScale.rangeBand() - smallMultipleScaleCost(aggregatedData[d].cost);
  },
  x: function(d,i){
    return widthScale.rangeBand() - widthScale.rangeBand()/20;
  },
  fill: costColor
});

rectGroup.append("rect")
.attr({
  width: widthScale.rangeBand()/20,
  height: function(d, i){
    return smallMultipleScaleWeight(aggregatedData[d].weight);
  },
  y: function(d,i){
    return heightScale.rangeBand() - smallMultipleScaleWeight(aggregatedData[d].weight);
  },
  x: function(d,i){
    return widthScale.rangeBand() - (widthScale.rangeBand()/20)*2;
  },
  fill: weightColor
});





function fitTextToBox(boxWidth, boxHeight, text){

  var textWidth = text.node().getComputedTextLength();
  var textHeight = text.node().getBBox().height;
  
  var currentFS = 0;
  if(!text.attr("font-size")){
    console.log("fitTextToBox: No Font-size set");
  } else {
    currentFS = text.attr("font-size");
  }
  
  
  var maxWidth  = (boxWidth / textWidth );
  var maxHeight = (boxHeight /textHeight);   
  var max       = Math.min(maxWidth, maxHeight);
  var fontsize  = (currentFS * max);
  text.attr("font-size", fontsize)
  return text;

} 

test.json

{
	"Mokka":{
		"Cost":{
			"1/1/2012": 5.34,
			"2/1/2012": 4.67,
			"3/1/2012": 5.95,
			"4/1/2012": 6.23,
			"5/1/2012": 4.26,
			"6/1/2012": 5.96,
			"7/1/2012": 5.51,
			"8/1/2012": 7.35,
			"9/1/2012": 6.53,
			"10/1/2012": 5.77,
			"11/1/2012": 7.57,
			"12/1/2012": 5.74,
			"1/1/2013": 5.48,
			"2/1/2013": 7.15,
			"3/1/2013": 6.84,
			"4/1/2013": 7.07,
			"5/1/2013": 5.84,
			"6/1/2013": 5.44,
			"7/1/2013": 6.44,
			"8/1/2013": 5.26,
			"9/1/2013": 4.34,
			"10/1/2013": 4.7,
			"11/1/2013": 3.42,
			"12/1/2013": 1.88
			},
		"Weight":{
			"1/1/2012": 28,
			"2/1/2012": 28,
			"3/1/2012": 21,
			"4/1/2012": 22,
			"5/1/2012": 30,
			"6/1/2012": 20,
			"7/1/2012": 26,
			"8/1/2012": 19,
			"9/1/2012": 27,
			"10/1/2012": 31,
			"11/1/2012": 37,
			"12/1/2012": 44,
			"1/1/2013": 44,
			"2/1/2013": 50,
			"3/1/2013": 58,
			"4/1/2013": 60,
			"5/1/2013": 56,
			"6/1/2013": 53,
			"7/1/2013": 41,
			"8/1/2013": 40,
			"9/1/2013": 36,
			"10/1/2013": 38,
			"11/1/2013": 30,
			"12/1/2013": 23
		}},
	"Arusha":{
		"Cost":{
			"1/1/2012": 5.65,
			"2/1/2012": 5.1,
			"3/1/2012": 5.55,
			"4/1/2012": 7.32,
			"5/1/2012": 5.37,
			"6/1/2012": 5,
			"7/1/2012": 3.22,
			"8/1/2012": 3.93,
			"9/1/2012": 4.37,
			"10/1/2012": 3.33,
			"11/1/2012": 2.46,
			"12/1/2012": 2.18,
			"1/1/2013": 2.28,
			"2/1/2013": 3.32,
			"3/1/2013": 4.78,
			"4/1/2013": 3.76,
			"5/1/2013": 2.99,
			"6/1/2013": 2.05,
			"7/1/2013": 1.46,
			"8/1/2013": 1.71,
			"9/1/2013": 3.1,
			"10/1/2013": 2.81,
			"11/1/2013": 3.94,
			"12/1/2013": 2.83
			},
		"Weight":{
			"1/1/2012": 21,
			"2/1/2012": 28,
			"3/1/2012": 29,
			"4/1/2012": 21,
			"5/1/2012": 27,
			"6/1/2012": 32,
			"7/1/2012": 26,
			"8/1/2012": 27,
			"9/1/2012": 27,
			"10/1/2012": 36,
			"11/1/2012": 38,
			"12/1/2012": 35,
			"1/1/2013": 45,
			"2/1/2013": 44,
			"3/1/2013": 35,
			"4/1/2013": 30,
			"5/1/2013": 22,
			"6/1/2013": 21,
			"7/1/2013": 26,
			"8/1/2013": 29,
			"9/1/2013": 29,
			"10/1/2013": 31,
			"11/1/2013": 40,
			"12/1/2013": 42
		}},
	"EthiopianYirgacheffe":{
		"Cost":{
			"1/1/2012": 8.99,
			"2/1/2012": 10.38,
			"3/1/2012": 12.17,
			"4/1/2012": 11.27,
			"5/1/2012": 11.36,
			"6/1/2012": 11.76,
			"7/1/2012": 13.35,
			"8/1/2012": 15.19,
			"9/1/2012": 14.82,
			"10/1/2012": 15.26,
			"11/1/2012": 15.59,
			"12/1/2012": 17.18,
			"1/1/2013": 17.37,
			"2/1/2013": 15.71,
			"3/1/2013": 16.89,
			"4/1/2013": 15.72,
			"5/1/2013": 14.44,
			"6/1/2013": 13.87,
			"7/1/2013": 13.41,
			"8/1/2013": 12.26,
			"9/1/2013": 13.88,
			"10/1/2013": 12.5,
			"11/1/2013": 14.13,
			"12/1/2013": 13.35
			},
      "Weight":{
			"1/1/2012": 28,
			"2/1/2012": 32,
			"3/1/2012": 28,
			"4/1/2012": 20,
			"5/1/2012": 23,
			"6/1/2012": 28,
			"7/1/2012": 24,
			"8/1/2012": 32,
			"9/1/2012": 29,
			"10/1/2012": 33,
			"11/1/2012": 32,
			"12/1/2012": 25,
			"1/1/2013": 19,
			"2/1/2013": 10,
			"3/1/2013": 20,
			"4/1/2013": 16,
			"5/1/2013": 23,
			"6/1/2013": 21,
			"7/1/2013": 14,
			"8/1/2013": 8,
			"9/1/2013": 12,
			"10/1/2013": 10,
			"11/1/2013": 20,
			"12/1/2013": 15
		}},
	"K7":{
		"Cost":{
			"1/1/2012": 6.34,
			"2/1/2012": 6.67,
			"3/1/2012": 6.2,
			"4/1/2012": 5.45,
			"5/1/2012": 4.68,
			"6/1/2012": 2.82,
			"7/1/2012": 4.42,
			"8/1/2012": 3.03,
			"9/1/2012": 1.77,
			"10/1/2012": 3.37,
			"11/1/2012": 1.64,
			"12/1/2012": 1.28,
			"1/1/2013": 3.08,
			"2/1/2013": 3.01,
			"3/1/2013": 2.37,
			"4/1/2013": 4.32,
			"5/1/2013": 4.82,
			"6/1/2013": 6.14,
			"7/1/2013": 7.21,
			"8/1/2013": 5.53,
			"9/1/2013": 4.51,
			"10/1/2013": 3.17,
			"11/1/2013": 4.93,
			"12/1/2013": 3.07
			},
		"Weight":{
			"1/1/2012": 18,
			"2/1/2012": 22,
			"3/1/2012": 28,
			"4/1/2012": 38,
			"5/1/2012": 29,
			"6/1/2012": 32,
			"7/1/2012": 25,
			"8/1/2012": 24,
			"9/1/2012": 19,
			"10/1/2012": 15,
			"11/1/2012": 15,
			"12/1/2012": 22,
			"1/1/2013": 28,
			"2/1/2013": 38,
			"3/1/2013": 28,
			"4/1/2013": 35,
			"5/1/2013": 38,
			"6/1/2013": 42,
			"7/1/2013": 38,
			"8/1/2013": 46,
			"9/1/2013": 49,
			"10/1/2013": 51,
			"11/1/2013": 59,
			"12/1/2013": 58
			}},
	"Pacas":{
		"Cost":{
			"1/1/2012": 7.25,
			"2/1/2012": 8.96,
			"3/1/2012": 7.91,
			"4/1/2012": 6.11,
			"5/1/2012": 5.78,
			"6/1/2012": 4.61,
			"7/1/2012": 5.84,
			"8/1/2012": 6.73,
			"9/1/2012": 6.49,
			"10/1/2012": 8.04,
			"11/1/2012": 6.51,
			"12/1/2012": 8.17,
			"1/1/2013": 7.81,
			"2/1/2013": 7.18,
			"3/1/2013": 6.46,
			"4/1/2013": 5.65,
			"5/1/2013": 7.53,
			"6/1/2013": 8.03,
			"7/1/2013": 9.3,
			"8/1/2013": 7.85,
			"9/1/2013": 8,
			"10/1/2013": 7.58,
			"11/1/2013": 8.23,
			"12/1/2013": 8.62
			},
		"Weight":{
			"1/1/2012": 29,
			"2/1/2012": 22,
			"3/1/2012": 31,
			"4/1/2012": 30,
			"5/1/2012": 34,
			"6/1/2012": 24,
			"7/1/2012": 25,
			"8/1/2012": 15,
			"9/1/2012": 22,
			"10/1/2012": 17,
			"11/1/2012": 14,
			"12/1/2012": 19,
			"1/1/2013": 18,
			"2/1/2013": 21,
			"3/1/2013": 28,
			"4/1/2013": 25,
			"5/1/2013": 17,
			"6/1/2013": 27,
			"7/1/2013": 22,
			"8/1/2013": 29,
			"9/1/2013": 36,
			"10/1/2013": 45,
			"11/1/2013": 55,
			"12/1/2013": 59
		}},
	"Uganda":{
		"Cost":{
			"1/1/2012": 8.67,
			"2/1/2012": 10.46,
			"3/1/2012": 11.71,
			"4/1/2012": 10.48,
			"5/1/2012": 10.35,
			"6/1/2012": 8.63,
			"7/1/2012": 7.97,
			"8/1/2012": 8.94,
			"9/1/2012": 8,
			"10/1/2012": 8.08,
			"11/1/2012": 7.03,
			"12/1/2012": 5.74,
			"1/1/2013": 5.71,
			"2/1/2013": 4.54,
			"3/1/2013": 2.67,
			"4/1/2013": 2.44,
			"5/1/2013": 3.89,
			"6/1/2013": 4.47,
			"7/1/2013": 4.65,
			"8/1/2013": 4.12,
			"9/1/2013": 2.95,
			"10/1/2013": 1.58,
			"11/1/2013": 1.85,
			"12/1/2013": 1.98
			},
		"Weight":{
			"1/1/2012": 10,
			"2/1/2012": 12,
			"3/1/2012": 6,
			"4/1/2012": 2,
			"5/1/2012": 5,
			"6/1/2012": 3,
			"7/1/2012": 5,
			"8/1/2012": 10,
			"9/1/2012": 11,
			"10/1/2012": 1,
			"11/1/2012": 5,
			"12/1/2012": 1,
			"1/1/2013": 0,
			"2/1/2013": 7,
			"3/1/2013": 5,
			"4/1/2013": 11,
			"5/1/2013": 10,
			"6/1/2013": 11,
			"7/1/2013": 17,
			"8/1/2013": 15,
			"9/1/2013": 20,
			"10/1/2013": 25,
			"11/1/2013": 17,
			"12/1/2013": 8
        }}}