chriswhong/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head profile="http://www.w3.org/2005/10/profile">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="./favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <link rel="icon" type="image/png" href="./favicon.png">
  </head>

  <style>
    html, body, #container {
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    body {
      padding-top: 50px;
    }

    #map {
      width: auto;
      height: 100%;
    }

    .chart {
      background: #444;
      position: absolute;
      top: 60px;
      left: 48px;
      z-index: 100;
      min-width: 320px;
      max-width: 408px;
      padding: 4px;
    }

    .bar {
      height: 24px;
      width: 125px;
      background: #969696;
      margin: 4px;
      vertical-align: middle;
      float: left;
      clear: none;
      color: white;
    }

    .bar p {
      padding: 3px 4px;
      position: absolute;
    }

    .colorBar {
      height: 100%;
      float: left;
    }

  </style>

  <body>

    <nav class="navbar navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Simple Chart - Drag the map, the chart will reflect what is in the current map bounds.</a>
        </div>
        <!-- <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div id="container">
      <div class="chart">
      </div>
      <div id="map">
      </div>

    </div><!-- /.container -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script>

    var map = new L.Map('map', {
      center: [39.283759,-76.602173],
      zoom: 13
    });

    L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
    }).addTo(map);

    var layerUrl = 'https://cwhong.cartodb.com/api/v2/viz/02ba821c-6904-11e5-aea0-0e3ff518bd15/viz.json';

    cartodb.createLayer(map, layerUrl)
      .addTo(map)
      .on('done', function(layer) {
        getData();
      }).on('error', function() {
        //log the error
      });

    //listen for new bounds
    map.on('moveend',function(){
      getData();
    });
    map.on('zoomend',function(){
      getData();
    });


    function getData() {

      var sqlTemplate = 'SELECT category, count(*) FROM chartwidgetdemo WHERE ST_INTERSECTS(the_geom, ST_MakeEnvelope({{west}}, {{south}}, {{east}}, {{north}}, 4326)) GROUP BY category ORDER BY count DESC';

      var bounds = map.getBounds();
      boundsObj = {
        west: bounds._southWest.lng,
        south: bounds._southWest.lat,
        east: bounds._northEast.lng,
        north: bounds._northEast.lat
      }

      var sql = Mustache.render(sqlTemplate,boundsObj);

      var apiTemplate = 'https://cwhong.cartodb.com/api/v2/sql?q={{sql}}';
      var apiCall = Mustache.render(apiTemplate,{sql:sql})

      $.getJSON(apiCall,function(data) {
        console.log(data.rows);

        var max = data.rows[0].count; console.log(max);


        $('.chart').empty();
        data.rows.forEach(function(row) {

          row.color = lookupColor(row);
          row.width = row.count/max * 100;

          $('.chart').append(
            Mustache.render('<div class="bar"><div class="colorBar" style="background-color:{{color}}; width:{{width}}%"></div><p>{{category}}</p></div>',row)
          );
        });

      });

    };

    function lookupColor(d) {
      d.category = d.category.trim();
      switch(d.category) {
        case 'Category A':
          return '#A6CEE3';
          break;
        case 'Category B':
          return '#1F78B4';
          break;
        case 'Category C':
          return '#B2DF8A';
          break;
        case 'Category D':
          return '#33A02C';
          break;

      }
    }

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head profile="http://www.w3.org/2005/10/profile">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="icon" href="./favicon.ico">

	<title>Starter Template for Bootstrap</title>

	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

	<link rel="icon" type="image/png" href="./favicon.png">
	</head>

	<style>
	html, body, #container {
	height: 100%;
	width: 100%;
	overflow: hidden;
	}

	body {
	padding-top: 50px;
	}

	#map {
	width: auto;
	height: 100%;
	}

	.chart {
	background: #444;
	position: absolute;
	top: 60px;
	left: 48px;
	z-index: 100;
	min-width: 320px;
	max-width: 408px;
	padding: 4px;
	}

	.bar {
	height: 24px;
	width: 125px;
	background: #969696;
	margin: 4px;
	vertical-align: middle;
	float: left;
	clear: none;
	color: white;
	}

	.bar p {
	padding: 3px 4px;
	position: absolute;
	}

	.colorBar {
	height: 100%;
	float: left;
	}

	</style>

	<body>

	<nav class="navbar navbar-fixed-top">
	<div class="container">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="#">Simple Chart - Drag the map, the chart will reflect what is in the current map bounds.</a>
	</div>
	<!-- <div id="navbar" class="collapse navbar-collapse">
	<ul class="nav navbar-nav">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#about">About</a></li>
	<li><a href="#contact">Contact</a></li>
	</ul>
	</div><!--/.nav-collapse -->
	</div>
	</nav>

	<div id="container">
	<div class="chart">
	</div>
	<div id="map">
	</div>

	</div><!-- /.container -->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<script>

	var map = new L.Map('map', {
	center: [39.283759,-76.602173],
	zoom: 13
	});

	L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
	}).addTo(map);

	var layerUrl = 'https://cwhong.cartodb.com/api/v2/viz/02ba821c-6904-11e5-aea0-0e3ff518bd15/viz.json';

	cartodb.createLayer(map, layerUrl)
	.addTo(map)
	.on('done', function(layer) {
	getData();
	}).on('error', function() {
	//log the error
	});

	//listen for new bounds
	map.on('moveend',function(){
	getData();
	});
	map.on('zoomend',function(){
	getData();
	});


	function getData() {

	var sqlTemplate = 'SELECT category, count(*) FROM chartwidgetdemo WHERE ST_INTERSECTS(the_geom, ST_MakeEnvelope({{west}}, {{south}}, {{east}}, {{north}}, 4326)) GROUP BY category ORDER BY count DESC';

	var bounds = map.getBounds();
	boundsObj = {
	west: bounds._southWest.lng,
	south: bounds._southWest.lat,
	east: bounds._northEast.lng,
	north: bounds._northEast.lat
	}

	var sql = Mustache.render(sqlTemplate,boundsObj);

	var apiTemplate = 'https://cwhong.cartodb.com/api/v2/sql?q={{sql}}';
	var apiCall = Mustache.render(apiTemplate,{sql:sql})

	$.getJSON(apiCall,function(data) {
	console.log(data.rows);

	var max = data.rows[0].count; console.log(max);


	$('.chart').empty();
	data.rows.forEach(function(row) {

	row.color = lookupColor(row);
	row.width = row.count/max * 100;

	$('.chart').append(
	Mustache.render('<div class="bar"><div class="colorBar" style="background-color:{{color}}; width:{{width}}%"></div><p>{{category}}</p></div>',row)
	);
	});

	});

	};

	function lookupColor(d) {
	d.category = d.category.trim();
	switch(d.category) {
	case 'Category A':
	return '#A6CEE3';
	break;
	case 'Category B':
	return '#1F78B4';
	break;
	case 'Category C':
	return '#B2DF8A';
	break;
	case 'Category D':
	return '#33A02C';
	break;

	}
	}

	</script>
	</body>
	</html>