Weather stations pseudo heatmap (using topoJSON; colored by Voronoi; simplified land shapes; quantized)

_.md

[ Launch: Weather stations pseudo heatmap (using topoJSON; colored by Voronoi; simplified land shapes; quantized) ] 5131096 by poezn
[ Launch: Weather stations pseudo heatmap (using topoJSON) ] 5130752 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":"Weather stations pseudo heatmap (using topoJSON; colored by Voronoi; simplified land shapes; quantized)","endpoint":"","display":"canvas","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},"countries_simplified.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"stations.geojson":{"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

countries_simplified.json

inlet.js

var r = 5,
    month = Math.floor(10) % 12 + 1; // 1 = January, 12 = December

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

var c = tb.ctx;
c.fillStyle = '#5C5C5C';

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

var world = tb['countries_simplified'];
var countries = topojson.object(world, world.objects.world);

c.fillStyle = "#6F6F6F";
c.rect(0,0, 1000, 800)
c.fill()

// clipping path 
c.beginPath();
path(countries);
c.closePath();
c.clip();

// background
path(countries);
c.fill();

//var values = _.map(stations.features
var colorScale = d3.scale.quantize()
	.domain([-500, 4000])
	.range(["#21C4F7","#A3DBDA","#e4f3ba","#F1C488","#e87e53","#d52323"])

var stations = tb['stations'];
var delta = 9500;
var lowerLimit = -4000;
var upperLimit = lowerLimit + delta;

var data = _.filter(stations.features, function(d, i) { 
  return d.properties["val" + month] > lowerLimit && d.properties["val" + month] < upperLimit;
}); // filter out unknown results

var drawGradient = function(p, i) {
  var coords = _.map(p, function(d, i) { return projection(d) });
 
  var station = data[i]; 
  var value = station.properties["val" + month];
  path.pointRadius(r);
  c.fillStyle = colorScale(value);
  c.strokeStyle = colorScale(value);
  c.beginPath();
  c.moveTo(coords[0][0], coords[0][1]);
  _.each(coords.splice(1, coords.length-1), function(d) {
    c.lineTo(d[0], d[1]);
  }), 
  c.fill(); 
  c.stroke(); 
  c.closePath();
};
 
var drawPoint = function(p) {
  path.pointRadius(0.5);

  var color = colorScale(p.properties["val" + month]);
  c.fillStyle = "#B9B9B9";
  c.beginPath();
  path(p)
  c.closePath();
  c.fill();

};

c.save();

var dataVoronoi = _.map(data, function(d) { return d.geometry.coordinates; });

var points = d3.geom.voronoi(dataVoronoi);
_.each(points, drawGradient);
//_.each(data, drawPoint);

c.restore();

stations.json