vanhoesenj/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## index.html
<!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>
	<!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>
No results found