Go to file
Francisco López e20286ed84 Merge pull request #281 from CartoDB/clear-rect
Remove width trick to use clear rect, fix #280
2017-02-08 15:32:57 +01:00
dist Regenerate dist files 2015-12-15 16:16:25 +01:00
doc switched default tool from editor to builder in torque docs 2016-11-02 11:45:53 -04:00
examples Remove map instance as an option in example 2017-01-30 12:23:25 +01:00
img added example pause/play button 2013-04-02 20:50:49 -04:00
lib Merge pull request #281 from CartoDB/clear-rect 2017-02-08 15:32:57 +01:00
template recenter 2013-04-22 11:37:12 -04:00
test Adds key property to torque layers to keep property publicaly exposed 2015-12-15 14:53:46 +01:00
.gitignore Moves suite-bundle.js to dist dir inside test folder 2015-12-10 12:35:25 +01:00
.travis.yml second att 2015-08-04 16:51:42 +02:00
CONTRIBUTING.md Added contributing document 2017-01-25 10:52:04 +01:00
index.html adds loop option to gui 2014-12-15 16:04:53 +01:00
LICENSE.txt replaces Vizzuality with Cartodb 2015-07-30 16:01:57 +02:00
Makefile Fix #263 Implementation of torque layer for OpenLayers. Must be using OpenLayers 3.17 or later. 2016-07-18 12:42:01 -04:00
NEWS Placeholder for new release 2016-12-12 16:21:29 +01:00
package.json Placeholder for new release 2016-12-12 16:21:29 +01:00
README.md Removed contribution line 2017-01-25 10:52:38 +01:00

Torque

Build Status

Render big, timeseries data in the client. Uses CartoDB to generate a datacube format. For a brief introduction to the format and methods, see our presentation slides

CartoDB users can use this code right away. Specify your username/tablename and datecolumn to get mapping time immediatley.

Have fun!

Torque library reference

Torque lets you render big, timeseries or categorical data in the client. This is useful for many modern applications that need more than just a static map. Early versions of Torque have been used to visualize human movement, Twitter activity, biodiversity data, and many more large-scale datasets.

The library uses CartoDB to generate a layercube format. For a brief introduction to the format and methods, see our presentation slides. If you are not using CartoDB to host your data, you can modify the input parameters to point toward any layercube service.

Getting started

The simplest way to use a visualization with Torque is...

Create a simple Torque visualization
``` javascript ...
... // define the torque layer style using cartocss var CARTOCSS = [ 'Map {', '-torque-time-attribute: "date";', '-torque-aggregation-function: "count(cartodb_id)";', '-torque-frame-count: 760;', '-torque-animation-duration: 15;', '-torque-resolution: 2', '}', '#layer {', ' marker-width: 3;', ' marker-fill-opacity: 0.8;', ' marker-fill: #FEE391; ', ' comp-op: "lighten";', ' [value > 2] { marker-fill: #FEC44F; }', ' [value > 3] { marker-fill: #FE9929; }', ' [value > 4] { marker-fill: #EC7014; }', ' [value > 5] { marker-fill: #CC4C02; }', ' [value > 6] { marker-fill: #993404; }', ' [value > 7] { marker-fill: #662506; }', ' [frame-offset = 1] { marker-width: 10; marker-fill-opacity: 0.05;}', ' [frame-offset = 2] { marker-width: 15; marker-fill-opacity: 0.02;}', '}' ].join('\n');
  var map = new L.Map('map', {
    zoomControl: true,
    center: [40, 0],
    zoom: 3
  });

  L.tileLayer('http://{s}.api.cartocdn.com/base-dark/{z}/{x}/{y}.png', {
    attribution: 'CartoDB'
  }).addTo(map);

  var torqueLayer = new L.TorqueLayer({
    user       : 'viz2',
    table      : 'ow',
    cartocss: CARTOCSS
  });
  torqueLayer.addTo(map);
  torqueLayer.play()

<script>
[Grab the complete example source code](https://github.com/CartoDB/torque/blob/master/examples/navy_leaflet.html)
<div class="margin20"></div>

### API
[see reference](https://github.com/CartoDB/torque/blob/master/doc/API.md)