makella/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Ocean bathymetry | CARTO</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <!-- Include CARTO VL JS -->
  <script src="https://libs.cartocdn.com/carto-vl/v0.9.1/carto-vl.min.js"></script>
  <!-- Include Mapbox GL JS -->
  <script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
  <!-- Include Mapbox GL CSS -->
  <link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
  <link href="https://carto.com/developers/carto-vl/examples/maps/style.css" rel="stylesheet">
</head>
<body>
  <div id="map"></div>
  <aside class="toolbox">
    <div class="box">
      <header>
        <h1>Ocean bathymetry</h1>
      </header>
      <section>
        <p class="description open-sans">Since the ocean is forever active, and moving, we wanted to demonstrate how we could animate the points to give that sense of movement</p>
      </section>
      <footer class="js-footer"></footer>
    </div>
  </aside>
  <div id="loader">
    <div class="CDB-LoaderIcon CDB-LoaderIcon--big">
      <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
        <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
      </svg>
    </div>
  </div>
  <script>
    const map = new mapboxgl.Map({
      container: 'map',
      style: carto.basemaps.darkmatter,
      center: [-20, 20],
      zoom: 2,
      scrollZoom: false,


    });

    const nav = new mapboxgl.NavigationControl({
      showCompass: false
    });
    map.addControl(nav, 'top-left');

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

    // Define layer
    const source = new carto.source.Dataset('bathy_points');
    const viz = new carto.Viz(`
      @speed : 3*now()+$dn

      width: 5
      color: ramp(linear($dn,0,255),teal)
      filter: sin(@speed)*0.5+0.5
      strokeWidth: 0
    `);
    const layer = new carto.Layer('layer', source, viz);

    layer.addTo(map, 'watername_ocean');
    layer.on('loaded', hideLoader);

    function hideLoader() {
      document.getElementById('loader').style.opacity = '0';
    }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Ocean bathymetry \| CARTO</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="UTF-8">
	<!-- Include CARTO VL JS -->
	<script src="https://libs.cartocdn.com/carto-vl/v0.9.1/carto-vl.min.js"></script>
	<!-- Include Mapbox GL JS -->
	<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
	<!-- Include Mapbox GL CSS -->
	<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
	<link href="https://carto.com/developers/carto-vl/examples/maps/style.css" rel="stylesheet">
	</head>
	<body>
	<div id="map"></div>
	<aside class="toolbox">
	<div class="box">
	<header>
	<h1>Ocean bathymetry</h1>
	</header>
	<section>
	<p class="description open-sans">Since the ocean is forever active, and moving, we wanted to demonstrate how we could animate the points to give that sense of movement</p>
	</section>
	<footer class="js-footer"></footer>
	</div>
	</aside>
	<div id="loader">
	<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
	<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
	<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
	</svg>
	</div>
	</div>
	<script>
	const map = new mapboxgl.Map({
	container: 'map',
	style: carto.basemaps.darkmatter,
	center: [-20, 20],
	zoom: 2,
	scrollZoom: false,


	});

	const nav = new mapboxgl.NavigationControl({
	showCompass: false
	});
	map.addControl(nav, 'top-left');

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

	// Define layer
	const source = new carto.source.Dataset('bathy_points');
	const viz = new carto.Viz(`
	@speed : 3*now()+$dn

	width: 5
	color: ramp(linear($dn,0,255),teal)
	filter: sin(@speed)*0.5+0.5
	strokeWidth: 0
	`);
	const layer = new carto.Layer('layer', source, viz);

	layer.addTo(map, 'watername_ocean');
	layer.on('loaded', hideLoader);

	function hideLoader() {
	document.getElementById('loader').style.opacity = '0';
	}
	</script>
	</body>
	</html>