makella · February 1, 2019 17:48
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
    <title>Manhattan buildings by number of floors over the years | CARTO VL</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <script src="http://libs.cartocdn.com/carto-vl/v1.1.1/carto-vl.js"></script>
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            height: 100%;
            width: 100%;
        }

        #year {
            position: fixed;
            left: 48px;
            top: 48px;
            color: white;
            font-size: 42px;
            font-family: sans-serif;
        }
    </style>
 </head>

 <body>
    <div id="map"></div>
    <div id="year">
        1785
    </div>
    <script>
        const s = carto.expressions;

        const map = new mapboxgl.Map({
            container: 'map',
            style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
            center: [-73.97536949793329, 40.75490160473558],
            zoom: 12,
            dragRotate: false
        });

        carto.setDefaultAuth({
            user: 'cartovl',
            apiKey: 'default_public'
        });

        const source = new carto.source.Dataset('mnmappluto');

        const viz = new carto.Viz(`
          color: ramp(linear(log($numfloors), 1, 4), reverse(SunsetDark))
          strokeWidth: 0
          filter: $numfloors > 2 and animation(linear($yearbuilt,1785,2018), 20, fade(0.5, hold))
        `);
        const torque = viz.filter.b;

        const layer = new carto.Layer('layer', source, viz);
        layer.addTo(map);

        const year = document.querySelector('#year');
        setInterval(() => {
            year.innerText = Math.floor(torque.getSimTime());
        }, 250);

    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Manhattan buildings by number of floors over the years \| CARTO VL</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="UTF-8">
	<script src="http://libs.cartocdn.com/carto-vl/v1.1.1/carto-vl.js"></script>
	<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
	<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
	<style>
	body {
	margin: 0;
	padding: 0;
	}

	#map {
	position: absolute;
	height: 100%;
	width: 100%;
	}

	#year {
	position: fixed;
	left: 48px;
	top: 48px;
	color: white;
	font-size: 42px;
	font-family: sans-serif;
	}
	</style>
	</head>

	<body>
	<div id="map"></div>
	<div id="year">
	1785
	</div>
	<script>
	const s = carto.expressions;

	const map = new mapboxgl.Map({
	container: 'map',
	style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
	center: [-73.97536949793329, 40.75490160473558],
	zoom: 12,
	dragRotate: false
	});

	carto.setDefaultAuth({
	user: 'cartovl',
	apiKey: 'default_public'
	});

	const source = new carto.source.Dataset('mnmappluto');

	const viz = new carto.Viz(`
	color: ramp(linear(log($numfloors), 1, 4), reverse(SunsetDark))
	strokeWidth: 0
	filter: $numfloors > 2 and animation(linear($yearbuilt,1785,2018), 20, fade(0.5, hold))
	`);
	const torque = viz.filter.b;

	const layer = new carto.Layer('layer', source, viz);
	layer.addTo(map);

	const year = document.querySelector('#year');
	setInterval(() => {
	year.innerText = Math.floor(torque.getSimTime());
	}, 250);

	</script>
	</body>

	</html>