Skip to content

Instantly share code, notes, and snippets.

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

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

<!DOCTYPE html>
<html>
<head>
<title>Reacciones al #AccordDeParis</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:128
-torque-animation-duration:10;
-torque-time-attribute:"time"; // column with date type
-torque-aggregation-function:"CDB_Math_Mode(torque_category)";
-torque-resolution:2;
-torque-data-aggregation:linear;
}
#accorddeparis_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;
}
#accorddeparis_edited[frame-offset=1] {
marker-width:8;
marker-fill-opacity:0.45;
}
#accorddeparis_edited[frame-offset=2] {
marker-width:10;
marker-fill-opacity:0.225;
}
#accorddeparis_edited[value=1]{ // negative
marker-fill: #F11810; // red
}
#accorddeparis_edited[value=2] { // neutral
marker-fill: #4b4f51; // gray
}
#accorddeparis_edited[value=3] { // positive
marker-fill: #229A00; // green
}
</script>
</head>
<body>
<div id="map"></div>
<div class='cartodb-legend category'>
<ul>
<li>
<div class="bullet" style="background: #F11810"></div> negative
</li>
<li>
<div class="bullet" style="background: #81879d"></div> neutral
</li>
<li>
<div class="bullet" style="background: #229A00"></div> positive
</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, 0],
zoom: 2
});
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
query: "select *, (case when torque_cat = -1 then 1 when torque_cat = 0 then 2 when torque_cat = 1 then 3 end) as torque_category from accorddeparis_edited",
table_name: "accorddeparis_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