To know more about how to make animated torque visualizations using CartoDB.js click here.
Last active
April 13, 2016 15:03
-
-
Save ramiroaznar/fb8407b3403ea2fc82b4 to your computer and use it in GitHub Desktop.
Category torque visualization
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Mariano Rajoy vs Pedro Sanchez, el #caraacara</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:"time"; // column with date type | |
| -torque-aggregation-function:"CDB_Math_Mode(torque_category)"; | |
| -torque-resolution:2; | |
| -torque-data-aggregation:linear; | |
| } | |
| #caraacara_edited[frame-offset=1] { | |
| marker-width:8; | |
| marker-fill-opacity:0.45; | |
| } | |
| #caraacara_edited[frame-offset=2] { | |
| marker-width:10; | |
| marker-fill-opacity:0.225; | |
| } | |
| #caraacara_edited{ | |
| comp-op: source-over; | |
| marker-fill-opacity: 0.9; | |
| marker-line-color: #FFF; | |
| marker-line-width: 0; | |
| marker-line-opacity: 1; | |
| marker-type: ellipse; | |
| marker-width: 6; | |
| marker-fill: #0F3B82; | |
| } | |
| #caraacara_edited[value=1] { // Mariano Rajoy | |
| marker-fill: #5CA2D1; // blue | |
| } | |
| #caraacara_edited[value=2] { // Pedro Sanchez | |
| marker-fill: #F11810; // red | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <!-- Legend --> | |
| <div class='cartodb-legend category'> | |
| <ul> | |
| <li> | |
| <div class="bullet" style="background: #0F3B82"></div> Mariano Rajoy | |
| </li> | |
| <li> | |
| <div class="bullet" style="background: #F11810"></div> Pedro Sanchez | |
| </li> | |
| </ul> | |
| </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', { | |
| center: [40, -1], | |
| zoom: 6 | |
| }); | |
| var layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',{ | |
| attribution: '© <a href="http://www.openstreetmap.org/copyright">OSM</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>' | |
| }).addTo(map); // base map | |
| cartodb.createLayer(map, { | |
| type: "torque", | |
| order: 1, | |
| options: { | |
| // sql query that transform torque_cat values to torque_category ones [this time is redundant but quite useful in other cases] | |
| query: "select *, (case when torque_cat = 1 then 1 when torque_cat = 2 then 2 end) as torque_category from caraacara_edited", | |
| table_name: "caraacara_edited", | |
| user_name: "ramiroaznar", | |
| tile_style: $('#cartocss_template').html() | |
| } | |
| }).done(function(layer) { | |
| map.addLayer(layer); | |
| }); | |
| } | |
| // you could use $(window).load(main); | |
| window.onload = main; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment