Weather stations pseudo heatmap (color scale, blurry, clipped)

_.md

[ 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":"Weather stations pseudo heatmap (color scale, blurry, clipped)","endpoint":"","display":"canvas","public":true,"require":[],"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}},"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}

countries.json

inlet.js

var r = 50,
    month = 1; // 1 = January, 12 = December

var projection = d3.geo.equirectangular()
    .scale(143)

var c = tb.ctx;

var path = d3.geo.path()
    .projection(projection)
    .context(c);

path.pointRadius(r);

c.fillStyle = '#5C5C5C';

// clipping path 
c.beginPath();
_.each(tb['countries'].features, function(d, i) {
	path(d);
});
c.closePath();
c.clip();

// background
_.each(tb['countries'].features, function(d, i) {
	path(d);
    c.fill();
});


//var values = _.map(stations.features
var colorScale = d3.scale.linear()
	.domain([-1000, 1500, 3000])
	.range(['#2165F7', '#F0F8B3', '#D52323'])

var drawPoint = function(p) {
  var coords = d3.geo.centroid(p);
  var cs = projection(coords);
  var grd = c.createRadialGradient(cs[0], cs[1], 0, cs[0], cs[1], r);
 
  
  var color = colorScale(p.properties["val" + month]);
  var rgbColor = d3.rgb(color);
  var colorString = [rgbColor.r, rgbColor.g, rgbColor.b].join();
  grd.addColorStop(0, 'rgba(' + colorString +', 0.4)');
  grd.addColorStop(1, 'rgba(' + colorString +', 0)');
  c.fillStyle = grd;
  c.beginPath();
  path(p)
  c.closePath();
  c.fill();
};

var stations = tb['stations'];

c.save();
_.chain(stations.features)
	.filter(function(d, i) { return d.properties["val" + month] > -9999}) // filter out unknown results
	.sortBy(function(d, i) { return d.properties["val" + month]} )
	.each(drawPoint)
	.values();
c.restore();

stations.json