Go to file

Daniel G. Aubert ef9de16c2d Merge pull request #300 from CartoDB/audit-deps Audit dependencies		6 years ago
dist	Build dist files	6 years ago
doc	switched default tool from editor to builder in torque docs	8 years ago
examples	Fixed some examples (updated Leaflet to 1.0.3)	8 years ago
img	added example pause/play button	12 years ago
lib	Do not forget callbacks	6 years ago
template	recenter	12 years ago
test	Update devel deps	6 years ago
.gitignore	Moves suite-bundle.js to dist dir inside test folder	9 years ago
.travis.yml	Add support for Node 8 & 10	6 years ago
CONTRIBUTING.md	Added contributing document	8 years ago
LICENSE.txt	replaces Vizzuality with Cartodb	9 years ago
Makefile	Fix #263 Implementation of torque layer for OpenLayers. Must be using OpenLayers 3.17 or later.	8 years ago
NEWS	Update NEWS	6 years ago
README.md	README.md	7 years ago
index.html	adds loop option to gui	10 years ago
package-lock.json	Update devel deps	6 years ago
package.json	Update devel deps	6 years ago

README.md

Torque

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!

Play with your own data: http://cartodb.github.com/torque/
The Guardian's Data Blog write-up of Royal Navy ships in WWI: http://www.guardian.co.uk/news/datablog/interactive/2012/oct/01/first-world-war-royal-navy-ships-mapped
A car in Nürburgring track: http://cartodb.github.com/torque/examples/car.html

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

  ...
  <body>
    <div id="map"></div>
    ...
    <script>
      // 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>
  </body>

Grab the complete example source code

API

see reference