temperatures matrix chart (by year and by decade)

_.md

[ Launch: temperatures (decades) ] 5034444 by poezn
[ Launch: Weather stations pseudo heatmap (using topoJSON) ] 4990094 by poezn
[ Launch: Weather stations pseudo heatmap (using topoJSON) ] 4759487 by poezn
[ Launch: Weather stations pseudo heatmap ] 4758743 by poezn
[ Launch: Weather stations pseudo heatmap ] 4746489 by poezn
[ Launch: Weather stations pseudo heatmap ] 4744710 by poezn
[ Launch: Weather stations ] 4743404 by poezn

config.json

{"description":"temperatures matrix chart (by year and by decade)","endpoint":"","display":"svg","public":true,"require":[{"name":"TopoJSON","url":"http://d3js.org/topojson.v0.min.js"},{"name":"TopoJSON","url":"http://d3js.org/topojson.v0.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"stations.json":{"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},"countries.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"stations_1910.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"observations.csv":{"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}

inlet.js

//var values = _.map(stations.features
var colorScale = d3.scale.linear()
	.domain([500, 1750, 3000])
	.range(['#21C4F7', '#F0F8B3', '#D52323'])
    .interpolate(d3.interpolateLab);

var yearMin = 1868;
var yearMax = 2012;

var r = 200,
	minRadius = 0.2*r;

var data = _.chain(tb['observations'])
  .map(function(d, i) {
    return _.map(_.range(12), function(idx) {
      return {
        value: parseInt(d['val' + (idx + 1)]), 
        yr: parseInt(d['yr']),
        month: idx + 1      
      };
    }); 
  })
  .flatten()
  .filter(function(d, i) {
    return d.yr >= yearMin && d.yr <= yearMax;
  })
  .value();

var months = _.range(1, 13, 1);
var decadeData = _.chain(data)
.groupBy(function(d, i) {
  return d.yr - d.yr % 10;
})
.map(function(d, decade) {
  return _.map(months, function(month, i) {
	var numYears = 0;
    var sumValue = _.chain(d)
          .filter(function(d) {
            return month == d.month;
          })
          .reduce(function(memo, num) {
            if (num.value) {
	          numYears++;
    	      return num.value + memo;
            }
            return memo;
        }, 0)
        .value();
	console.log('sumValue', sumValue, 'numYears', numYears)
    var avgValue = sumValue / numYears;

	//console.log(sumValue);
    return {
      decade: parseInt(decade),
      month:  month,
      value:  avgValue
    }
  }) 
})
.flatten()
.value();

var decadeMin = yearMin - yearMin % 10;
var decadeMax = yearMax - yearMax % 10 + 10;


console.log(decadeData);
//console.log(data);

var width = 30;
var height = 2;

g.selectAll('rect.years')
	.data(data)
	.enter().append('rect')
	.attr({
      'class': 'years',
      'transform': function(d, i) {
        var tx = (d.month - 1) * width;
        var ty = (d.yr - yearMin) * height
        return 'translate(' + [tx, ty] + ')';
      },
      'height': height,
      'width': width
    })
	.style({
      fill: function(d, i) {
        return d.value ? colorScale(d.value) : '#E7E7E7';
      },
      "stroke-width": 0 
    })

g.selectAll('rect.decade')
	.data(decadeData)
	.enter().append('rect')
	.attr({
      'class': 'decade',
      'transform': function(d, i) {
        var tx = (d.month - 1) * width;
        var ty = 300 + (d.decade - yearMin) * height
        return 'translate(' + [tx, ty] + ')';
      },
      'height': height*10,
      'width': width
    })
	.style({
      fill: function(d, i) {
        return colorScale(d.value);
      },
      "stroke-width": 0 
    });

observations.csv