Tributary inlet

_.md

[ Launch: Tributary inlet ] 4982559 by poezn

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[{"name":"heatmap.js","url":"https://raw.github.com/pa7/heatmap.js/master/src/heatmap.js"}],"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},"stations.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}

inlet.js

var month = "1";

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

var stations = tb['stations'];

var config = {
    "radius": 30,
    "element": "heatmapEl",
    "visible": true,
    "opacity": 40,
    "gradient": { 0.45: "rgb(0,0,255)", 0.55: "rgb(0,255,255)", 0.65: "rgb(0,255,0)", 0.95: "yellow", 1.0: "rgb(255,0,0)" }
};


console.log(heatmapFatctory);
//var h = heatmapFactory.create(config);

var addDataPoint = function(p) {
  var coords = d3.geo.centroid(p);
  var cs = projection(coords);
//  h.store.addDataPoint(cs[0], cs[1], p.properties["val" + month]); 
}




_.chain(stations.features)
	.filter(function(d, i) { return d.properties["val" + month] > 0 && d.properties["val" + month] < 1800}) // filter out unknown results
	.sortBy(function(d, i) { return d.properties["val" + month]} )
	.each(addDataPoint)
	.values();




/*

var r = 50,
    month = 12; // 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);

path.pointRadius(r);

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

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

// background
path(countries);
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.5)');
  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] > 0 && d.properties["val" + month] < 1800}) // filter out unknown results
	.sortBy(function(d, i) { return d.properties["val" + month]} )
	.each(drawPoint)
	.values();
c.restore();
*/

stations.json