Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar

ramiroaznar/README.md

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.
Download ZIP
Category torque visualization
Raw
README.md

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

Raw
index.html
<!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