Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar
Last active April 13, 2016 15:03
Show Gist options
  • Save ramiroaznar/fb8407b3403ea2fc82b4 to your computer and use it in GitHub Desktop.
Save ramiroaznar/fb8407b3403ea2fc82b4 to your computer and use it in GitHub Desktop.
Category torque visualization

To know more about how to make animated torque visualizations using CartoDB.js click here.

<!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: '&copy; <a href="http://www.openstreetmap.org/copyright">OSM</a> contributors, &copy; <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