VictorVelarde/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <title>Global histogram | CARTO</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <script src="https://libs.cartocdn.com/carto-vl/v1.2/carto-vl.min.js"></script>
  <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js"></script>
  <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="https://carto.com/developers/carto-vl/examples/maps/style.css">
</head>

<body>
  <div id="map"></div>
  <aside class="toolbox">
    <div class="box">
      <header>
        <h1>Add layer</h1>
      </header>
      <section>
        <p class="description open-sans">Global histogram, string field</p>
      </section>
      <footer class="js-footer open-sans"></footer>
    </div>
  </aside>


  <script>
    const map = new mapboxgl.Map({
      container: 'map',
      style: carto.basemaps.voyager,
      center: [-123.10, 49.25],
      zoom: 10,
      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('vancouver_trees');
    const viz = new carto.Viz(`
      color: blue
      width: 5
      @hd: globalHistogram($genus_name)
    `);
    const layer = new carto.Layer('layer', source, viz);

    layer.addTo(map, 'watername_ocean');
    layer.on('loaded', () => {
      const histogram = viz.variables.hd._categories;
      // These frequencies come from Windshaft:
      // ```sql
      // SELECT genus_name AS category, COUNT(*) AS frequency
      //   FROM (SELECT genus_name, cartodb_id, the_geom_webmercator FROM vancouver_trees) AS __cdb_query
      // GROUP BY genus_name ORDER BY 2 DESC
      // LIMIT 32768
      // ```

      // You can check the number of categories & the sum of frequencies matches the original source:
      //  The number of categories
      //     SELECT count(distinct (genus_name)) FROM vancouver_trees
      const nCategories = histogram.length;

      //  The frequencies
      //    SELECT count (*) FROM vancouver_trees
      const sum = histogram.reduce((a, b) => a + b.frequency, 0);

      const footer = document.querySelector('.js-footer');
      footer.innerHTML = `Nº categories: ${nCategories} | Sum: ${sum}`;
    });

  </script>
</body>

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

	<head>
	<title>Global histogram \| CARTO</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="UTF-8">
	<script src="https://libs.cartocdn.com/carto-vl/v1.2/carto-vl.min.js"></script>
	<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js"></script>
	<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="https://carto.com/developers/carto-vl/examples/maps/style.css">
	</head>

	<body>
	<div id="map"></div>
	<aside class="toolbox">
	<div class="box">
	<header>
	<h1>Add layer</h1>
	</header>
	<section>
	<p class="description open-sans">Global histogram, string field</p>
	</section>
	<footer class="js-footer open-sans"></footer>
	</div>
	</aside>


	<script>
	const map = new mapboxgl.Map({
	container: 'map',
	style: carto.basemaps.voyager,
	center: [-123.10, 49.25],
	zoom: 10,
	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('vancouver_trees');
	const viz = new carto.Viz(`
	color: blue
	width: 5
	@hd: globalHistogram($genus_name)
	`);
	const layer = new carto.Layer('layer', source, viz);

	layer.addTo(map, 'watername_ocean');
	layer.on('loaded', () => {
	const histogram = viz.variables.hd._categories;
	// These frequencies come from Windshaft:
	// ```sql
	// SELECT genus_name AS category, COUNT(*) AS frequency
	// FROM (SELECT genus_name, cartodb_id, the_geom_webmercator FROM vancouver_trees) AS __cdb_query
	// GROUP BY genus_name ORDER BY 2 DESC
	// LIMIT 32768
	// ```

	// You can check the number of categories & the sum of frequencies matches the original source:
	// The number of categories
	// SELECT count(distinct (genus_name)) FROM vancouver_trees
	const nCategories = histogram.length;

	// The frequencies
	// SELECT count (*) FROM vancouver_trees
	const sum = histogram.reduce((a, b) => a + b.frequency, 0);

	const footer = document.querySelector('.js-footer');
	footer.innerHTML = `Nº categories: ${nCategories} \| Sum: ${sum}`;
	});

	</script>
	</body>

	</html>