Skip to content

Instantly share code, notes, and snippets.

@vanhoesenj
Last active December 21, 2015 01:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vanhoesenj/6226531 to your computer and use it in GitHub Desktop.
Save vanhoesenj/6226531 to your computer and use it in GitHub Desktop.
GMC Animated Oxen Map

Animated Oxen Map

This map makes use of data derived from an online petition focusing on Green Mountain College's decision to slaughter two oxen in the fall of 2012. The data is stored in a CartoDB table and visualized using the Torque library - also from CartoDB.

Adding a temporal element to the data illustrates how quickly the petition 'spread' via social media not only within the United States but throughout the world. Most locations in the United States are concentrated in areas of high population density, predominantly urban and within counties characterized by high educational attainment, above the U.S. national average income and with ready access to supermarkets.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>GMC Oxen Petition Signatures Timeline</title>
<link rel="shortcut icon" href="http://cartodb.com/favicon/favicon_32x32.ico" />
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
<script type="text/javascript" src="http://cartodb.github.com/torque/lib/class.js"></script>
<script type="text/javascript" src="http://cartodb.github.com/torque/lib/backbone.cartodb.js"></script>
<script type="text/javascript" src="http://cartodb.github.com/torque/src/canvas_tile_layer.js"></script>
<script type="text/javascript" src="http://cartodb.github.com/torque/src/grid_layer.js"></script>
<script type="text/javascript" src="http://cartodb.github.com/torque/src/torque.js"></script>
<script type="text/javascript">
var gui;
function initialize() {
var user_name = "gmcmaplab";
var table_name = "oxen_dates";
var column_name = "date";
// initialise the google map
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(20.27,-8.24),
zoom: 3,
mapTypeId:google.maps.MapTypeId.SATELLITE,
mapTypeControl:false,
minZoom:3,
scrollwheel: true,
panControl: false,
zoomControl: true,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
});
var map_style = {};
map_style.google_maps_customization_style = [
{
stylers:[
{ invert_lightness:true },
{ weight:1 },
{ saturation:-100 },
{ lightness:-40 }
]
},
{
elementType:"labels",
stylers:[
{ visibility:"simplified" }
]
}
];
var Soft = function () {
this.Soft = function () {
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
map.setOptions({styles:map_style.google_maps_customization_style});
}
}
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
map.setOptions({styles:map_style.google_maps_customization_style});
var TorqueOptions = {
user: user_name,
table: table_name,
column: column_name,
cumulative: true,
resolution: 1,
steps: 400,
fps: 6,
fitbounds: false,
clock: false,
blendmode: 'source-over',
trails: true,
point_type:'circle',
cellsize:1
}
var torque = null;
Torque(function (env) {
Torque.app = new env.app.Instance();
torque = new Torque.app.addLayer(map, TorqueOptions);
Torque.env = env;
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<div class="torque_time"></div>
<a class="cartodb_logo" href="http://www.cartodb.com" target="_blank">CartoDB</a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment