Torque.js v2

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

This library is still under support but it will not be further developed. We don’t recommend starting new projects with it as it will eventually become deprecated. Instead, learn more about our current CARTO for deck.gl library here

Bubble Map

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

      <!DOCTYPE html>
<html>
  <head>
    <title>Static bubble map | 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="https://cartodb.com/assets/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
    <link rel="stylesheet" href="https://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">
        Map { 
        -torque-frame-count:0.5; 
        -torque-animation-duration:0; 
        -torque-time-attribute:"cartodb_id"; 
        -torque-aggregation-function:"max(no2)"; 
        -torque-resolution:2; 
        -torque-data-aggregation:cumulative; 
        } 
        #aqi{
          comp-op: lighter;
          marker-fill-opacity: 0.9;
          marker-line-color: #FFF;
          marker-line-width: 1.5;
          marker-line-opacity: 1;
          marker-type: ellipse;
          marker-width: 30;
          marker-fill: #F84F40;
                [value < 50]{ 
                  marker-width: 24;
                  [value < 40]{ 
                    marker-width: 18;
                    [value < 30]{ 
                      marker-width: 12;
                      [value < 20]{ 
                        marker-width: 6;
                      [value < 10]{ 
                        marker-width: 3;
                      }
                      }
                    }
                  }
                }
        }

    </script>
  </head>
  <body>
    <div id="map"></div>
    
    <!-- include cartodb.js library -->
    <script src="https://libs.cartocdn.com/cartodb.js/v3/cartodb.uncompressed.js"></script>

    <script>
      function main() {
        var map = new L.Map('map', {
          zoomControl: false,
          center: [39.9304, 116.423239],
          zoom: 8
        });
        var layer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_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: {
            table_name: "harvard_aqi",
            user_name: "andrew",
            tile_style: $('#cartocss_template').html()
            }
        }, {
          https: true,
          tiler_protocol: 'https',
          tiler_port: 443
        }).done(function(layer) {
          map.addLayer(layer);
        });
      }

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

Heatmap

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

      <!DOCTYPE html>
<html>
  <head>
    <title>Torque heatmap | 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="https://cartodb.com/assets/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
    <link rel="stylesheet" href="https://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">
      Map { 
        -torque-frame-count:0.5; 
        -torque-animation-duration:0; 
        -torque-time-attribute:"cartodb_id"; 
        -torque-aggregation-function:"count(cartodb_id)"; 
        -torque-resolution:2; 
        -torque-data-aggregation:cumulative; 
      } 
      #monkey_jump{ 
        // comp-op: lighter; 
        marker-opacity: 0.9; 
        marker-line-color: #FFF; 
        marker-line-width: 0; 
        marker-line-opacity: 1; 
        marker-type: arrow; 
        marker-width: 2;
        marker-fill: #B10026; 
        [value < 12]{ 
          marker-fill:#FC4E2A;
          [value < 4]{ 
            marker-fill:#FD8D3C;
            [value < 3]{ 
              marker-fill:#FEB24C;
              [value < 2]{ 
                marker-fill:#FFFFB2;
              }
            }
          }
        }
      }

    </script>
  </head>
  <body>
    <div id="map"></div>
    
    <!-- include cartodb.js library -->
    <script src="https://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

    <script>
      function main() {
        var map = new L.Map('map', {
          zoomControl: false,
          center: [-6.514293, 110],
          zoom: 7
        });
        
        var layer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_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: "twitter_wowfakta",
            user_name: "andrew",
            tile_style: $('#cartocss_template').html()
            }
        }, {
          https: true,
          tiler_protocol: 'https',
          tiler_port: 443
        }).done(function(layer) {
          map.addLayer(layer);
        });
      }

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

Heatmap Simple

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

      <!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="https://cartodb.com/assets/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
    <link rel="stylesheet" href="https://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">
      Map { 
        -torque-frame-count:0.5; 
        -torque-animation-duration:0; 
        -torque-time-attribute:"cartodb_id"; 
        -torque-aggregation-function:"count(cartodb_id)"; 
        -torque-resolution:2; 
        -torque-data-aggregation:cumulative; 
      } 
      #monkey_jump{ 
        comp-op: lighter; 
        marker-opacity: 0.9; 
        marker-line-color: #FFF; 
        marker-line-width: 0; 
        marker-line-opacity: 1; 
        marker-type: ellipse; 
        marker-width: 4;
        marker-fill: #FF2900; 
      }
    </script>
  </head>
  <body>
    <div id="map"></div>
    
    <!-- include cartodb.js library -->
    <script src="https://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

    <script>
      function main() {
        var map = new L.Map('map', {
          zoomControl: false,
          center: [-6.514293, 110],
          zoom: 7
        });
        
        var layer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_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: "twitter_wowfakta",
            user_name: "andrew",
            tile_style: $('#cartocss_template').html()
            }
        }, {
          https: true,
          tiler_protocol: 'https',
          tiler_port: 443
        }).done(function(layer) {
          map.addLayer(layer);
        });
      }

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

Light Bright

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

      <!DOCTYPE html>
<html>
  <head>
    <title>Light bright effect | 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="https://cartodb.com/assets/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
    <link rel="stylesheet" href="https://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">
      Map {
      -torque-frame-count:32;
      -torque-animation-duration:14;
      -torque-time-attribute:"postedtime";
      -torque-aggregation-function:"count(cartodb_id)";
      -torque-resolution:16;
      -torque-data-aggregation:linear;
      }

      #twitter_wowfakta{
        comp-op: lighter;
        marker-fill-opacity: 0.9;
        marker-line-color: #FFF;
        marker-line-width: 0;
        marker-line-opacity: 1;
        marker-type: ellipse;
        marker-width: 1;
        marker-fill: #F84F40;
      }
      #twitter_wowfakta[value>1] {
       marker-width:2;
      }
      #twitter_wowfakta[value>2] {
       marker-width:3;
      }
      #twitter_wowfakta[value>4] {
       marker-width:5;
      }
      #twitter_wowfakta[value>8] {
       marker-width:7; 
      }
      #twitter_wowfakta[value>16] {
       marker-width:9; 
      }
      #twitter_wowfakta[value>32] {
       marker-width:8; 
      }
    </script>
  </head>
  <body>
    <div id="map"></div>
    
    <!-- include cartodb.js library -->
    <script src="https://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

    <script>
      function main() {
        var map = new L.Map('map', {
          zoomControl: false,
          center: [-6.964483, 107.634506],
          zoom: 7
        });
        var layer = L.tileLayer('https://{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: {
            table_name: "twitter_wowfakta",
            user_name: "andrew",
            tile_style: $('#cartocss_template').html()
            }
        }, {
          https: true,
          tiler_protocol: 'https',
          tiler_port: 443
        }).done(function(layer) {
          map.addLayer(layer);
        });
      }

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

Dual Encode

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
131
132
133
134
135

      <!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="https://cartodb.com/assets/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
    <link rel="stylesheet" href="https://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="https://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('https://{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()
            }
        }, {
          https: true,
          tiler_protocol: 'https',
          tiler_port: 443
        }).done(function(layer) {
          map.addLayer(layer);
        });
      }

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

Navy Ships GMaps

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

      <html>
  <style>
    #map, html, body {
      width: 100%; height: 100%; padding: 0; margin: 0;
    }
  </style>
  <body>
    <div id="map"></div>


    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script src="https://libs.cartocdn.com/torque.js/2.16.5/torque.full.js"  type="application/javascript" charset="utf-8"></script>


    <script>
    function initialize() {
      var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(40.4166909, -3.7003454),
          zoom: 2,
          mapTypeId:google.maps.MapTypeId.SATELLITE,
          mapTypeControl:false,
          minZoom:1,
          scaleControl: false,
          streetViewControl: false,
          overviewMapControl: false,
      });

      var map_style = {};
      map_style.google_maps_customization_style = [
          {
              stylers:[
                  { invert_lightness:true },
                  { weight:1 },
                  { saturation:-100 },
                  { lightness:-40 }
              ]
          },
          {
              elementType:"labels",
              stylers:[
                  { visibility:"simplified" }
              ]
          }
      ];

      map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
      map.setOptions({styles:map_style.google_maps_customization_style});


      // 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: #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: 8;marker-fill-opacity: 0.05;}',
          '  [frame-offset = 2] {  marker-width: 20;marker-fill-opacity: 0.02;}',
          '}'

      ].join('\n');
      var torqueLayer = new torque.GMapsTorqueLayer({
        user       : 'viz2',
        table      : 'ow',
        cartocss: CARTOCSS,
        tiler_protocol: 'https',
        tiler_port: 443
      });
      torqueLayer.error(function(err){
        for(error in err){
          console.warn(err[error]);
        }
      });
      torqueLayer.setMap(map);
      torqueLayer.play()
    }
    window.onload = initialize;
    
    </script>
  </body>
</html>
Group Created with Sketch.

Navy Ships Leaflet

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

      <html>
  <style>
    #map, html, body {
      width: 100%; height: 100%; padding: 0; margin: 0;
    }
  </style>
  <body>
    <div id="map"></div>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>
    <script src="https://libs.cartocdn.com/torque.js/2.16.5/torque.full.js"  type="application/javascript" charset="utf-8"></script>


    <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('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
        attribution: 'CartoDB'
      }).addTo(map);

      var torqueLayer = new L.TorqueLayer({
        user       : 'viz2',
        table      : 'ow',
        zIndex: 100,
        cartocss: CARTOCSS,
        tiler_protocol: 'https',
        tiler_port: 443
      });
      torqueLayer.error(function(err){
        for(error in err){
          console.warn(err[error]);
        }
      });
      torqueLayer.addTo(map);
      torqueLayer.play()
    </script>
  </body>
</html>
Group Created with Sketch.

Navy Ships OpenLayers

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

      <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CartoDb Torque Layer Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.css" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.js"></script>
    <style>
        #map, html, body {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://libs.cartocdn.com/torque.js/2.16.5/torque.full.js"  type="application/javascript" charset="utf-8"></script>


    <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 ol.Map({
            target: "map",
            view: new ol.View({
                center: [40, 0],
                zoom: 3
            }),
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({ url: 'https://basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png'})
                })
            ],
            interactions: ol.interaction.defaults({
                dragPan: false
            }).extend([
                new ol.interaction.DragPan({kinetic: false})
            ])
        });

        var torqueLayer = new ol.TorqueLayer({
            user       : 'viz2',
            table      : 'ow',
            cartocss: CARTOCSS,
            tiler_protocol: 'https',
            tiler_port: 443
        });

        torqueLayer.onAdd(map);
        torqueLayer.play()
    </script>
</body>
</html>
Group Created with Sketch.