Torque.js v2

Torque.js is an efficient and stylish rendering method to animate your data.

What is Torque.js?

Torque.js is an efficient and stylish rendering method to animate your data.

Torque.js uses TileCubes, which are JSON representations of multidimensional data with geospatial coordinates, to render data on the client. To understand the fundamentals of Torque.js, read the guides. To view the source code, browse the open-source repository in Github and contribute. Otherwise, view examples, read the full reference API, or find different support options.

Guides

Quick reference guides for learning how to use Torque.js features.

Reference

Browse the interactive API documentation to search for specific Torque.js methods, arguments, and sample code that can be used to build your applications.

Check Full Reference API 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// Create new Torque Layer
var torqueLayer = new L.TorqueLayer({
  user: 'viz2',
  table: 'ow',
  cartocss: '<cartocss here>'
});

map.addLayer(torqueLayer);

// An event example to print the current step to the console log.

torqueLayer.on('change:steps', function(step) {
  // do something with step
  console.log('Current step is ' + step);
});

Examples

Play with real examples and learn by doing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

<!DOCTYPE html>
<html>
  <head>
    <title>Heat map simple | CartoDB.js</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
    <!--[if lte IE 8]>
      <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
    <![endif]-->
    <script type="sql/html" id="cartocss_template">
      /** torque_cat visualization */

      Map {
      -torque-frame-count:64;
      -torque-animation-duration:30;
      -torque-time-attribute:"posttime";
      -torque-aggregation-function:"sum(1)+CDB_Math_Mode(direction)*100";
      -torque-resolution:2;
      -torque-data-aggregation:linear;
      }

      #cleveland_spring_points{
        comp-op: source-over;
        marker-fill-opacity: 1;
        marker-line-color: #FFF;
        marker-line-width: 0;
        marker-line-opacity: 1;
        marker-type: ellipse;
        marker-width: 1;
        marker-fill: #F84F40;
      }
      #cleveland_spring_points[value>101] {
       marker-width:2;
      }
      #cleveland_spring_points[value>102] {
       marker-width:3;
      }
      #cleveland_spring_points[value>103] {
       marker-width:5;
      }
      #cleveland_spring_points[value>104] {
       marker-width:8; 
      }
      #cleveland_spring_points[value>105] {
       marker-width:12; 
      }
      #cleveland_spring_points[value>106] {
       marker-width:15; 
      }


      #cleveland_spring_points[value>200] {
        marker-fill: #5CA2D1;
       marker-width:1;
      }
      #cleveland_spring_points[value>201] {
       marker-width:2;
      }
      #cleveland_spring_points[value>202] {
       marker-width:3;
      }
      #cleveland_spring_points[value>203] {
       marker-width:5;
      }
      #cleveland_spring_points[value>204] {
       marker-width:8; 
      }
      #cleveland_spring_points[value>205] {
       marker-width:12; 
      }
      #cleveland_spring_points[value>206] {
       marker-width:15; 
      }

      #cleveland_spring_points[frame-offset=1] {
       marker-width:2;
       marker-fill-opacity:0.45; 
      }
      #cleveland_spring_points[frame-offset=2] {
       marker-width:4;
       marker-fill-opacity:0.225; 
      }
    </script>
  </head>
  <body>
    <div id="map"></div>
    
    <!-- include cartodb.js library -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

    <script>
      function main() {
        var map = new L.Map('map', {
          zoomControl: false,
          center: [40.72209113, -73.99824792],
          zoom: 14
        });
        
        var layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',{
          attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
        }).addTo(map);

        cartodb.createLayer(map, {
          type: "torque",
          order: 1,
          options: {
            query: "",
            table_name: "cleveland_spring_points",
            user_name: "andrew",
            tile_style: $('#cartocss_template').html()
            }
        }).done(function(layer) {
          map.addLayer(layer);
        });
      }

      // you could use $(window).load(main);
      window.onload = main;
    </script>
  </body>
</html>

Support

Get help or learn about known issues.