Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar

ramiroaznar/README.md

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.
Download ZIP
Sentiment 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>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