pramsey/README.md

## README.md

      
    Raw
  

              README.md
            
          
    About

Almost 4000 homicides took place in New York City between 2003 and 2011. They were not uniformly distributed. The base map shows sensus blocks with % black population as the variable being colored.
How it Works

The dots are controlled by the slider bar at the top. Each time the slider stops, the map is updated with a new SQL query showing just the homicides that took place in census blocks wiht more than the indicated % of white population, and the total number of homicides is updated to reflect the threshold %.

  
## index.html
<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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<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>