cartodb/torque
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

merge OW work. first draft

Browse Source
This commit is contained in:
Simon Tokumine 2012-10-01 00:33:17 +01:00
parent a17da4b7aa
commit 0115852319
5 changed files with 464 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

125
index.html
View File

@ -24,10 +24,8 @@
function initialize() {
// initialise the google map
var map = new google.maps.Map(document.getElementById('map_canvas'), {
//center: new google.maps.LatLng(40.656420109573624, -73.99903535842896),
center: new google.maps.LatLng(38.27268853598097,-88.2421875),
//zoom: 13,
zoom: 5,
center: new google.maps.LatLng( 30.95940879245423, -0.609375),
zoom: 2,
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControl: false,
minZoom: 1
@ -60,16 +58,21 @@
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
map.setOptions({styles: map_style.google_maps_customization_style});
var TorqueOptions = {
user : 'viz2',
table : 'us_po_offices',
column : 'built',
steps : 250,
resolution : 4,
cumulative : true,
table : 'ow',
column : 'date',
steps : 750,
resolution : 2,
cumulative : false,
clock : true,
fps : 32,
fitbounds : false
fps : 20,
fitbounds : false,
blendmode : 'lighter',
trails : true,
point_type : 'circle',
cellsize : 1
}
var torque = null;
@ -79,18 +82,36 @@
Torque.env = env;
});
var tablename = 'us_po_offices';
var blend_modes = [
"lighter",
"source-over",
"copy",
"destination-atop",
"destination-in",
"destination-out",
"destination-over",
"source-atop",
"source-in",
"source-out",
"xor"
];
var tablename = 'ow';
dat.GUI.DEFAULT_WIDTH = 300;
var toggle = new dat.GUI();
//var toggle = gui.addFolder("Settings",true);
toggle.add(TorqueOptions, 'user').listen();
toggle.add(TorqueOptions, 'table').listen();
toggle.add(TorqueOptions, 'column').listen();
toggle.add(TorqueOptions, 'resolution', [1,2,4,8,16,32]).listen();
toggle.add(TorqueOptions, 'cellsize', 0, 50 ).listen();
toggle.add(TorqueOptions, 'cumulative').listen();
toggle.add(TorqueOptions, 'steps', 10, 500 ).listen();
toggle.add(TorqueOptions, 'trails').listen();
toggle.add(TorqueOptions, 'steps', 10, 750 ).listen();
toggle.add(TorqueOptions, 'fps', 0.05, 48, false).listen();
toggle.add(TorqueOptions, 'blendmode', blend_modes).listen();
toggle.add(TorqueOptions, 'point_type', ['circle','square']).listen();
var that = this;
var updateTorque = function(){
this.updateTorque = function(){
@ -105,7 +126,47 @@
}
toggle.add(new updateTorque(), 'updateTorque');
var pause = function(){
this.pause = function(){
torque.pause();
}
}
toggle.add(new pause(), 'pause');
var PresetOptions = function(){
this.old_weather_agg = function(){
TorqueOptions.user = "viz2";
TorqueOptions.table = "ow";
TorqueOptions.column = "date";
TorqueOptions.blendmode = 'source-over';
TorqueOptions.trails = false;
TorqueOptions.point_type = 'square';
TorqueOptions.cumulative = true;
TorqueOptions.resolution = 2;
TorqueOptions.steps = 750;
TorqueOptions.fps = 30;
TorqueOptions.fitbounds = 1;
TorqueOptions.clock = true;
tablename = TorqueOptions.table;
torque.setOptions(TorqueOptions)
}
this.old_weather_live = function(){
TorqueOptions.user = "viz2";
TorqueOptions.table = "ow";
TorqueOptions.column = "date";
TorqueOptions.cumulative = false;
TorqueOptions.resolution = 2;
TorqueOptions.steps = 750;
TorqueOptions.fps = 30;
TorqueOptions.fitbounds = 1;
TorqueOptions.clock = true;
TorqueOptions.blendmode = 'lighter';
TorqueOptions.trails = true;
TorqueOptions.point_type = 'circle';
tablename = TorqueOptions.table;
torque.setOptions(TorqueOptions)
}
this.ny_bus = function(){
TorqueOptions.user = "viz2";
TorqueOptions.table = "ny_bus";
@ -124,11 +185,14 @@
TorqueOptions.table = "us_po_offices";
TorqueOptions.column = "built";
TorqueOptions.cumulative = true;
TorqueOptions.resolution = 4;
TorqueOptions.resolution = 2;
TorqueOptions.steps = 250;
TorqueOptions.fps = 32;
TorqueOptions.fitbounds = 1;
TorqueOptions.clock = true;
TorqueOptions.blendmode = 'source-over';
TorqueOptions.trails = false;
TorqueOptions.point_type = 'square';
tablename = TorqueOptions.table;
torque.setOptions(TorqueOptions)
}
@ -142,6 +206,25 @@
TorqueOptions.fps = 16;
TorqueOptions.fitbounds = 1;
TorqueOptions.clock = true;
TorqueOptions.blendmode = 'source-over';
TorqueOptions.trails = false;
TorqueOptions.point_type = 'square';
tablename = TorqueOptions.table;
torque.setOptions(TorqueOptions)
}
this.stop_frisk_live = function(){
TorqueOptions.user = "viz2";
TorqueOptions.table = "sfrisk_dates";
TorqueOptions.column = "datestop";
TorqueOptions.cumulative = false;
TorqueOptions.blendmode = 'lighter';
TorqueOptions.trails = true;
TorqueOptions.point_type = 'circle';
TorqueOptions.resolution = 2;
TorqueOptions.steps = 200;
TorqueOptions.fps = 50;
TorqueOptions.fitbounds = 1;
TorqueOptions.clock = true;
tablename = TorqueOptions.table;
torque.setOptions(TorqueOptions)
}
@ -169,6 +252,9 @@
TorqueOptions.fitbounds = 1;
TorqueOptions.clock = true;
TorqueOptions.countby = 'sum(mmio)';
TorqueOptions.blendmode = 'source-over';
TorqueOptions.trails = false;
TorqueOptions.point_type = 'square';
tablename = TorqueOptions.table;
torque.setOptions(TorqueOptions);
}
@ -182,6 +268,9 @@
TorqueOptions.fps = 21;
TorqueOptions.fitbounds = 1;
TorqueOptions.clock = true;
TorqueOptions.blendmode = 'source-over';
TorqueOptions.trails = false;
TorqueOptions.point_type = 'square';
//TorqueOptions.countby = 'sum(mmio)';
tablename = TorqueOptions.table;
torque.setOptions(TorqueOptions);
@ -196,6 +285,9 @@
TorqueOptions.fps = 2;
TorqueOptions.fitbounds = 1;
TorqueOptions.clock = true;
TorqueOptions.blendmode = 'source-over';
TorqueOptions.trails = false;
TorqueOptions.point_type = 'square';
tablename = TorqueOptions.table;
torque.setOptions(TorqueOptions)
}
@ -207,8 +299,11 @@
presets.add(ps, 'quake_total');
presets.add(ps, 'quake_size');
presets.add(ps, 'stop_frisk');
presets.add(ps, 'stop_frisk_live');
presets.add(ps, 'jatorre_flights');
presets.add(ps, 'ny_bus');
presets.add(ps, 'old_weather_agg');
presets.add(ps, 'old_weather_live');
}
</script>
</head>

2
lib/cartodb.css
View File

@ -23,4 +23,4 @@ div.cartodb_infowindow div.bottom a:hover {background:linear-gradient(-90deg, #C
background:-moz-linear-gradient(-90deg, #CACBCE, #FFFFFF); background: -o-linear-gradient(#CACBCE,#FFFFFF); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#CACBCE', endColorstr='#FFFFFF'); cursor:pointer;}
a.cartodb_logo {position:absolute; bottom:8px; left:75px; display:block; width:69px; height:27px; background:url('http://cartodb.s3.amazonaws.com/embed/embed_sprite.png') no-repeat -61px 0;
text-indent:-9999px; line-height:0; font-size:0;}
div.torque_time {position:absolute; bottom:28px; right:15px; display:block; width:189px; height:27px;}
div.torque_time {position:absolute; bottom:28px; right:15px; display:block; width:189px; height:27px;color:white;}

128
src/grid_layer.js
View File

@ -12,6 +12,7 @@ function TimePlayer(min_date, end, step, options) {
this.MIN_DATE = min_date;
this.MAX_UNITS = options.steps+2;
this.MAX_VALUE = 0;
this.MAX_VALUE_LOG = 0;
this.BASE_UNIT = 0;
this.canvas_setup = this.get_time_data;
this.render = this.render_time;
@ -21,7 +22,6 @@ function TimePlayer(min_date, end, step, options) {
this.t_column = options.column;
this.resolution = options.resolution;
this.countby = options.countby
//this.base_url = 'http://sql.wri-01.cartodb.com/api/v2/sql';
this.base_url = 'http://'+this.user+'.cartodb.com/api/v2/sql';
this.options = options;
}
@ -39,6 +39,7 @@ TimePlayer.prototype.set_time = function(t) {
};
TimePlayer.prototype.reset_max_value = function() {
this.MAX_VALUE = 0;
this.MAX_VALUE_LOG = 0;
};
/**
* change table where the data is choosen
@ -90,7 +91,6 @@ TimePlayer.prototype.pre_cache_months = function(rows, coord, zoom) {
ycoords = [];
values = [];
// array buffer set by default to 0
// fucking javascript arrays not
for(var i = 0; i < rows.length*this.MAX_UNITS; ++i){
values[i] = 0;
}
@ -111,6 +111,7 @@ TimePlayer.prototype.pre_cache_months = function(rows, coord, zoom) {
values[base_idx + row.dates[j]] = row.vals[j];
if (row.vals[j] > this.MAX_VALUE) {
this.MAX_VALUE = row.vals[j];
this.MAX_VALUE_LOG = Math.log(this.MAX_VALUE);
}
};
@ -119,6 +120,7 @@ TimePlayer.prototype.pre_cache_months = function(rows, coord, zoom) {
values[base_idx + j] += values[base_idx + j - 1];
if (values[base_idx + j] > this.MAX_VALUE) {
this.MAX_VALUE = values[base_idx + j];
this.MAX_VALUE_LOG = Math.log(this.MAX_VALUE);
}
}
}
@ -158,7 +160,7 @@ TimePlayer.prototype.get_time_data = function(tile, coord, zoom) {
" x, y, array_agg(c) vals, array_agg(d) dates "+
" FROM ( "+
" SELECT "+
" st_xmax(hgrid.cell) x, st_ymax(hgrid.cell) y, " +
" round(CAST (st_xmax(hgrid.cell) AS numeric),4) x, round(CAST (st_ymax(hgrid.cell) AS numeric),4) y, " +
" {0} c, floor((date_part('epoch',{1})- {2})/{3}) d ".format(this.countby, this.t_column, this.MIN_DATE, this.step) +
" FROM "+
" hgrid, {0} i ".format(this.table) +
@ -213,41 +215,127 @@ TimePlayer.prototype.render_time = function(tile, coord, zoom) {
];
var fillStyle;
//ctx.fillStyle = '#000';
// clear canvas
tile.canvas.width = w;
var ci = 0;
var cu = 0;
ctx.strokeStyle = ctx.fillStyle = colors[cu];
ctx.globalCompositeOperation = this.options.blendmode;
var xc = cells.xcoords;
var yc = cells.ycoords;
var vals = cells.values;
var dz = 256 / Math.pow(2,zoom)
// render cells
//var data = ctx.getImageData(0, 0, w, h);
//var pixels = data.data;
var len = cells.length;
var pixel_size = cells.size;
var pixel_size = this.resolution ;
var numTiles = 1 << zoom;
var pixel_size = this.resolution//*this.options.cellsize;
var pixel_size_trail_circ = pixel_size*2;
var pixel_size_trail_squa = pixel_size*1.5;
var offset = Math.floor((pixel_size-1)/2);
var tau = Math.PI*2;
// memoize sprite canvases
if(self.sprite_1 == undefined){
self.sprite_1 = [];
$(colors).each(function(){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.width = canvas.width = pixel_size*2;
ctx.height = canvas.height = pixel_size*2;
ctx.globalAlpha = 1;
ctx.fillStyle = this.toString();
ctx.beginPath();
ctx.arc(pixel_size, pixel_size, pixel_size, 0, tau, true, true);
ctx.closePath();
ctx.fill();
self.sprite_1.push(canvas);
});
}
if(self.sprite_2 == undefined){
self.sprite_2 = [];
$(colors).each(function(){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.width = canvas.width = pixel_size_trail_circ*2;
ctx.height = canvas.height = pixel_size_trail_circ*2;
ctx.globalAlpha = 0.3;
ctx.fillStyle = this.toString();
ctx.beginPath();
ctx.arc(pixel_size_trail_circ, pixel_size_trail_circ, pixel_size_trail_circ, 0, tau, true, true);
ctx.closePath();
ctx.fill();
self.sprite_2.push(canvas);
});
}
if(self.sprite_3 == undefined){
self.sprite_3 = [];
$(colors).each(function(){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.width = canvas.width = pixel_size*2;
ctx.height = canvas.height = pixel_size*2;
ctx.globalAlpha = 0.3;
ctx.fillStyle = this.toString();
ctx.beginPath();
ctx.arc(pixel_size, pixel_size, pixel_size, 0, tau, true, true);
ctx.closePath();
ctx.fill();
self.sprite_3.push(canvas);
});
}
var numTiles = 1 << zoom;
for(i = 0; i < len; ++i) {
//var idx = (4*(256*yc[i] + xc[i]))>>0;
// set pixel by hand
// faster than doing fill rect (below)
if(cells.values[this.MAX_UNITS*i + month]) {
ci = cells.values[this.MAX_UNITS*i + month] == 0 ? 0 : Math.floor((colors.length-1) * (Math.log(cells.values[this.MAX_UNITS*i + month])/Math.log(this.MAX_VALUE)));
var cell = cells.values[this.MAX_UNITS*i + month];
if(cell) {
ci = cell == 0 ? 0 : Math.floor((colors.length-1) * (Math.log(cell)/this.MAX_VALUE_LOG));
if (ci != cu) {
cu = ci < colors.length? ci : cu;
ctx.strokeStyle = ctx.fillStyle = colors[cu];
ctx.fillStyle = colors[cu];
}
if(this.options.point_type == 'circle'){
ctx.drawImage(self.sprite_1[cu],xc[i]-pixel_size, yc[i]-pixel_size)
} else if(this.options.point_type == 'square') {
ctx.fillRect(xc[i]-offset, yc[i]-offset, pixel_size, pixel_size);
}
}
if(this.options.trails == true){
cell = cells.values[this.MAX_UNITS*i + month-1];
if(cell) {
ci = cell == 0 ? 0 : Math.floor((colors.length-1) * (Math.log(cell)/this.MAX_VALUE_LOG));
if (ci != cu) {
cu = ci < colors.length? ci : cu;
ctx.fillStyle = colors[cu];
}
if(this.options.point_type == 'circle'){
//alignment hack - sorry to the gods of graphics
ctx.drawImage(self.sprite_2[cu],xc[i]-pixel_size_trail_squa-1, yc[i]-pixel_size_trail_squa-1)
} else if(this.options.point_type == 'square') {
ctx.fillRect(xc[i]-offset, yc[i]-offset, pixel_size_trail_squa, pixel_size_trail_squa);
}
}
cell = cells.values[this.MAX_UNITS*i + month-2];
if(cell) {
ci = cell == 0 ? 0 : Math.floor((colors.length-1) * (Math.log(cell)/this.MAX_VALUE_LOG));
if (ci != cu) {
cu = ci < colors.length? ci : cu;
ctx.fillStyle = colors[cu];
}
if(this.options.point_type == 'circle'){
ctx.drawImage(self.sprite_3[cu],xc[i]-pixel_size, yc[i]-pixel_size)
} else if(this.options.point_type == 'square') {
ctx.fillRect(xc[i]-offset, yc[i]-offset, pixel_size, pixel_size);
}
}
ctx.fillRect(xc[i] - Math.floor((pixel_size-1)/2), yc[i] - Math.floor((pixel_size-1)/2), pixel_size, pixel_size);
}
}
//ctx.putImageData(data, 0, 0);
};
@ -271,7 +359,7 @@ String.prototype.format = (function(i, safe, arg) {
}
return str;
}
format.native = String.prototype.format;
//format.native = String.prototype.format;
return format;
})();

106
src/torque.js
View File

@ -1,3 +1,14 @@
// iOS fix
if(Function.prototype.bind == undefined){
Function.prototype.bind = function (bind) {
var self = this;
return function () {
var args = Array.prototype.slice.call(arguments);
return self.apply(bind || null, args);
};
};
}
function Torque() {
var args = Array.prototype.slice.call(arguments),
callback = args.pop(),
@ -55,12 +66,16 @@ Torque.modules.layer = function(torque) {
steps : 250,
resolution : 3,
cumulative : false,
fps : 125,
fps : 24,
autoplay : true,
clock : false,
zindex : 0,
fitbounds : false,
countby : 'count(i.cartodb_id)'
countby : 'count(i.cartodb_id)',
blendmode : 'source-over',
trails : false,
point_type : 'square',
subtitles : false
}
this.options = _.defaults(options, this._defaults);
@ -79,6 +94,14 @@ Torque.modules.layer = function(torque) {
this.getDeltas();
},
pause: function(){
if (this.running == true){
this.running = false;
} else {
this.running = true;
this.play();
}
},
setOptions: function(new_options){
this.running = false;
@ -108,9 +131,14 @@ Torque.modules.layer = function(torque) {
this.fitBounds(this.options.fitbounds);
this.running = true;
this.running = false;
torque.clock.clear();
if(this.options.autoplay){
this.running = true;
this.play();
}
torque.log.info('Layer is now running!');
},
_setupListeners: function(){
@ -170,7 +198,15 @@ Torque.modules.layer = function(torque) {
} else {
this._current = this.start;
}
torque.clock.set((new Date(this._current*1000)).toString().substr(4).split(' ').slice(0, 4).join(' '))
var date = new Date(this._current*1000);
var date_arry = date.toString().substr(4).split(' ');
torque.clock.set('<span id="month">' + date_arry[0] + '</span> <span id="year">' + date_arry[2] + '</span>');
if(this.options.subtitles){
torque.subtitles.set(date);
}
this._display.set_time((this._current-this.start)/this._step);
if (this.running){
@ -197,6 +233,68 @@ Torque.modules.clock = function(torque) {
};
};
Torque.modules.subtitles = function(torque) {
torque.subtitles = {
subs: [
{
from: new Date("March 01, 1913 00:00:00"),
to: new Date("July 01, 1914 00:00:00"),
sub: "Pre war"
},
{
from: new Date("August 01, 1914 00:00:00"),
to: new Date("February 01, 1915 00:00:00"),
sub: "War begins with Germany"
},
{
from: new Date("February 02, 1915 00:00:00"),
to: new Date("October 01, 1916 00:00:00"),
sub: "North Sea naval blockade"
},
{
from: new Date("October 02, 1917 00:00:00"),
to: new Date("April 01, 1917 00:00:00"),
sub: "Atlantic U-boat warfare"
},
{
from: new Date("April 02, 1917 00:00:00"),
to: new Date("September 01, 1917 00:00:00"),
sub: "USA enters war"
},
{
from: new Date("September 02, 1917 00:00:00"),
to: new Date("November 01, 1918 00:00:00"),
sub: "Destroyers begin to escort convoys in Atlantic"
},
{
from: new Date("November 02, 1918 00:00:00"),
to: new Date("August 01, 1920 00:00:00"),
sub: "End of WWI"
},
{
from: new Date("August 02, 1920 00:00:00"),
to: new Date("August 01, 1925 00:00:00"),
sub: "Trade routes resume"
}
]
};
torque.subtitles.clear = function() {
$('.torque_subs').html('');
};
torque.subtitles.set = function(date) {
$.each(this.subs, function(){
if(this.from < date && this.to > date){
torque.subtitles._update(this.sub);
}
});
};
torque.subtitles._update = function(msg) {
$('.torque_subs').html(msg);
};
};
/**
* Logging module that torquetes log messages to the console and to the Speed
* Tracer API. It contains convenience methods for info(), warn(), error(),