Skip to content
This repository

Temporal mapping for CartoDB using the SQL API

branch: master
Octocat-spinner-32 css scrubbable torque March 29, 2013
Octocat-spinner-32 dist updated torque March 21, 2014
Octocat-spinner-32 doc updated api November 11, 2013
Octocat-spinner-32 examples fixed ow-scrub example December 02, 2013
Octocat-spinner-32 img added example pause/play button April 02, 2013
Octocat-spinner-32 lib fixed rendering when the lineWidth it's a float April 08, 2014
Octocat-spinner-32 template recenter April 22, 2013
Octocat-spinner-32 test fixed windshaft provider with https February 25, 2014
Octocat-spinner-32 vendor updated leaflet to 0.7.4 March 24, 2014
Octocat-spinner-32 .gitignore build scripts July 30, 2013
Octocat-spinner-32 LICENSE.txt more cleanup September 30, 2012
Octocat-spinner-32 Makefile fixed diet file creation August 29, 2013
Octocat-spinner-32 NEWS updated news April 08, 2014
Octocat-spinner-32 README.md updated readme example November 27, 2013
Octocat-spinner-32 index.html fixed index February 25, 2014
Octocat-spinner-32 package.json news and package for 2.3.0 February 24, 2014
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!

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>
        </body>
      ...
      // 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

API

see reference

Something went wrong with that request. Please try again.