|
<html> |
|
<header> |
|
<meta charset="utf-8"> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<title>NYC Homicide Explorer</title> |
|
|
|
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/ui-lightness/jquery-ui.css" /> |
|
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.13/themes/css/cartodb.css" /> |
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> |
|
|
|
<script> |
|
|
|
function getLayerSQL(pct) { |
|
return "SELECT h.cartodb_id, h.the_geom_webmercator, h.weapon " + getSQL(pct); |
|
} |
|
|
|
function getSummarySQL(pct) { |
|
return "SELECT count(*) " + getSQL(pct); |
|
} |
|
|
|
function getSQL(pct) { |
|
|
|
return "FROM nyc_homicides h " + |
|
"JOIN nyc_census_blocks c " + |
|
"ON ST_Contains(c.the_geom_webmercator, h.the_geom_webmercator) " + |
|
"WHERE c.popn_total > 0 " + |
|
"AND 100.0 * c.popn_white / c.popn_total > " + pct; |
|
} |
|
|
|
window.onload = function() { |
|
|
|
cartodb.createVis( |
|
'map', |
|
'https://pramsey.cartodb.com/api/v2/viz/04cee39c-e1c6-11e4-8509-0e853d047bba/viz.json', |
|
{ |
|
shareable: false |
|
}, |
|
function(vis, layers) { |
|
|
|
$("#slider").slider({ |
|
min: 0, |
|
max: 100, |
|
value: 0, |
|
slide: function(event, ui) { |
|
document.getElementById("pct").innerHTML = ui.value; |
|
document.getElementById("total").innerHTML = "-"; |
|
|
|
}, |
|
change: function( event, ui ) { |
|
|
|
// Slider UI value is the % white |
|
var pct = ui.value; |
|
|
|
// Change the layer SQL to update the map |
|
layers[1].getSubLayer(1).setSQL(getLayerSQL(pct)); |
|
|
|
// Change the UI display of current percentage |
|
document.getElementById("pct").innerHTML = pct; |
|
|
|
// Calculate the display summary of total homicides |
|
var sql = new cartodb.SQL({ user: 'pramsey' }); |
|
sql.execute(getSummarySQL(pct), {}) |
|
.done(function(data) { |
|
document.getElementById("total").innerHTML = data.rows[0].count; |
|
}) |
|
} |
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style> |
|
|
|
#slider_container { |
|
position:absolute; |
|
left: 80px; |
|
top: 20px; |
|
width:500px; |
|
padding: 20px; |
|
background:rgba(255,255,255,0.7); |
|
z-index: 4; |
|
} |
|
|
|
</style> |
|
|
|
</header> |
|
<body> |
|
|
|
|
|
<div class="container-full"> |
|
|
|
<div id="slider_container"> |
|
<div id="slider"></div> |
|
<br/> |
|
<p>All homicides (<span id="total">3562</span>) in census blocks with > <span id="pct">0</span>% white population.</p> |
|
</div> |
|
|
|
<div id="map" /> |
|
|
|
</div><!-- /.container --> |
|
|
|
<!-- Placed at the end of the document so the pages load faster --> |
|
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script> |
|
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> |
|
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> |
|
|
|
</body> |
|
</html> |
