Weather stations (recreated with SVG)

_.md

[ Launch: Tributary inlet ] 5786233 by poezn

config.json

{"description":"Weather stations (recreated with SVG)","endpoint":"","display":"svg","public":true,"require":[{"name":"TopoJSON","url":"http://d3js.org/topojson.v1.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"countries_simplified.json":{"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},"mask.svg":{"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_simplified.json

inlet.js

var r = 5,
    month = Math.floor(37) % 12 + 1; // 1 = January, 12 = December
width = 1000,
height = 520;
console.log(tributary)

var projection = d3.geo.equirectangular()
	.center([0,0])
	.scale(145)

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

var world = tb['countries_simplified'];

var countries = topojson.feature(world, world.objects.world);

//var values = _.map(stations.features
var colorScale = d3.scale.linear()
	.domain([-2000, 1500, 4000])
	.range(['#21C4F7', '#F0F8B3', '#D52323'])
    .interpolate(d3.interpolateLab)

var color = function(d, i) {
  var value = data[i].properties.val1;
  return colorScale(value);
//  var color = value >= -2000 && value < 4000 ? colorScale(value) : "#515268";
//  return color;
}

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

var data = _.chain(stations.features)
.map(function(d, i) {
  var temps = _.chain(d3.range(1, 13))
  .map(function(month, i) {
    return d.properties["val" + month];
  })
  .filter(function(d, i) {
    return !_.isNull(d) && d > -9999;
  })
  .value();
  d.properties.temps = temps;
  return d;  
})
.filter(function(d, i) { 
  return d.properties.temps.length == 12;
})
.value(); // filter out unknown results

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

points = d3.geom.voronoi(points);

// clipping voronoi (this is not important for rendering, but is necessary to export SVG)
var padding = 0;
var bounds = d3.geom.polygon([
  [padding, padding],
  [padding, height - padding],
  [width - padding, height - padding],
  [width - padding, padding]
]);


var shapes = g.selectAll("path")
.data(points);

shapes.enter().append("path");
shapes.exit().remove();
shapes.attr({
    "d": function(d, i) {
        return "M" + bounds.clip(d).join("L") + "Z";
    }
})
.style({
    "fill": color,
    "stroke": color
});


gClip = g.select("#continent-clip");
gClip.selectAll("path.continent")
.data(countries.features)
.enter().append("path")
.attr({
    "class": "continent",
    "d": function(d, i) {
        return path(d)
    }
})

g.append("rect")
.attr({
    "width": width,
    "height": height
})
.style({
    "mask": "url(#continent-clip)",
    "fill": "#181730"
})

mask.svg

stations.json