alrocar/index.html

## 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;
      }
      .leaflet-tile {
        filter: inherit;
        visibility: hidden;
        width: 257px !important;
        height: 257px !important;
      }
    </style>
    <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/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: 200;
        -torque-animation-duration: 8;
        -torque-time-attribute: "dateano";
        -torque-aggregation-function: "count(1)";
        -torque-resolution: 5;
        -torque-data-aggregation: cumulative;
      }
      #layer {
        marker-width: 1;
        marker-fill: #ecd476;
        marker-fill-opacity: 1;
        marker-line-width: 0;
        marker-line-color: #FFF;
        marker-line-opacity: 1;
        comp-op: lighter;
      }
      #layer[frame-offset=1] {
        marker-width: 3;
        marker-fill-opacity: 0.5;
      }
      #layer[frame-offset=2] {
        marker-width: 5;
        marker-fill-opacity: 0.3;
      }
      #layer[frame-offset=3] {
        marker-width: 6;
        marker-fill-opacity: 0.1;
      }
      #layer[frame-offset=4] {
        marker-width: 7;
        marker-fill-opacity: 0.05;
      }
    </script>
  </head>
  <body>
    <div id="map"></div>

    <!-- include cartodb.js library -->
    <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>

    <script>
      function main() {
        var map = new L.Map('map', {
          center: [-18.229351,-128.554688],
          zoom: 3,
          attributionControl: false
        });

        var layer = L.tileLayer('http://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/{style}/{z}/{x}/{y}.png',{
          minZoom: 0,
          maxZoom: 18,
          style: 'dark_all',
          domains: 'abcd',
          attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).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 * from map1_total_youth_population_over_time_copy_1000perdot",
            table_name: "map1_total_youth_population_over_time_copy_1000perdot",
            user_name: "alissa-carto",
            tile_style: $('#cartocss_template').html()
            }
        }, {https: true}).done(function(layer) {
          map.addLayer(layer);
        });
      }
      // you could use $(window).load(main);
      window.onload = main;
    </script>
  </body>
</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;
	}
	.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	width: 257px !important;
	height: 257px !important;
	}
	</style>
	<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/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: 200;
	-torque-animation-duration: 8;
	-torque-time-attribute: "dateano";
	-torque-aggregation-function: "count(1)";
	-torque-resolution: 5;
	-torque-data-aggregation: cumulative;
	}
	#layer {
	marker-width: 1;
	marker-fill: #ecd476;
	marker-fill-opacity: 1;
	marker-line-width: 0;
	marker-line-color: #FFF;
	marker-line-opacity: 1;
	comp-op: lighter;
	}
	#layer[frame-offset=1] {
	marker-width: 3;
	marker-fill-opacity: 0.5;
	}
	#layer[frame-offset=2] {
	marker-width: 5;
	marker-fill-opacity: 0.3;
	}
	#layer[frame-offset=3] {
	marker-width: 6;
	marker-fill-opacity: 0.1;
	}
	#layer[frame-offset=4] {
	marker-width: 7;
	marker-fill-opacity: 0.05;
	}
	</script>
	</head>
	<body>
	<div id="map"></div>

	<!-- include cartodb.js library -->
	<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>

	<script>
	function main() {
	var map = new L.Map('map', {
	center: [-18.229351,-128.554688],
	zoom: 3,
	attributionControl: false
	});

	var layer = L.tileLayer('http://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/{style}/{z}/{x}/{y}.png',{
	minZoom: 0,
	maxZoom: 18,
	style: 'dark_all',
	domains: 'abcd',
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	}).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 * from map1_total_youth_population_over_time_copy_1000perdot",
	table_name: "map1_total_youth_population_over_time_copy_1000perdot",
	user_name: "alissa-carto",
	tile_style: $('#cartocss_template').html()
	}
	}, {https: true}).done(function(layer) {
	map.addLayer(layer);
	});
	}
	// you could use $(window).load(main);
	window.onload = main;
	</script>
	</body>
	</html>