Skip to content

Instantly share code, notes, and snippets.

@chriswhong
Last active October 2, 2015 13:54
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save chriswhong/a808f3f83f520da1fbae to your computer and use it in GitHub Desktop.
<!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}}&api_key=44708e8048eb4f85a76bc2bb0198adb15c6797fe';
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment