josephmisiti · August 29, 2015 14:07
diff --git a/get.sh b/get.sh
 #!/bin/bash

 set -e
 set -x

 LIMIT=10000

 for h in `seq 0 23`
 do
  for d in `seq 1 7`
  do
    bq -q --format=csv --project_id=833682135931 query --batch -n $LIMIT "SELECT pickup_latitude, pickup_longitude     FROM [833682135931:nyctaxi.trip_data] WHERE  HOUR(TIMESTAMP(pickup_datetime)) == $h AND  DAYOFWEEK(TIMESTAMP(pickup_datetime)) == $d AND  pickup_latitude != '0' AND pickup_longitude != '0' LIMIT $LIMIT" --format=csv | sed 1d > $d-$h.csv
  done
 done
diff --git a/taxi.html b/taxi.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>NYC Taxi heatmap 2013</title>
  <link rel="stylesheet" href="leaflet.css" />
  <script src="leaflet.js"></script>
  <style>
 #map { width: 100%; height: 600px; }
 body { font: 16px/1.4 "Helvetica Neue", Arial, sans-serif; }
 .ghbtns { position: relative; top: 4px; margin-left: 5px; }
 a { color: #0077ff; }
 #container{
  position: absolute;
  top: 10px; left: 60px;
  background: white;
  margin: 5px;
  border: 1px solid #666;
 };
 #loading{display:'none'; color: #666; };
  </style>
 </head>
 <body>

 <div id="map"></div>
 <div id="container">
  <a href="https://gist.github.com/ImJasonH/38e2e22a29bf5fecc5e6">source</a><br />
  <input type="range" id="hour" min="0" max="23" value="2" onchange="callApi()" oninput="updateLabel()"></input><label for="hour" id="hourlabel">2 AM</label><br />
  <input type="range" id="dow" min="1" max="7" value="7" onchange="callApi()" oninput="updateLabel()"></input><label for="dow" id="dowlabel">Saturday</label><br />
  <input type="range" id="radius" min="10" max="25" value="10" onchange="changeRadius()"></input><label for="radius">heat</label><br />
  <span id="loading">Loading...</span>
 </div>

 <script src="leaflet-heat.js"></script>
 <script>
 document.getElementById('map').style.height = window.innerHeight + 'px';

 var map = null;
 var heat = null;
 var taxiData = [];
 var cache = {};
 var bounds = null;

 function updateLabel() {
  var hour = parseInt(document.getElementById('hour').value)
  var lbl = document.getElementById('hourlabel');
  if (hour == 0) {
    lbl.innerText = 'midnight';
  } else if (hour == 12) {
    lbl.innerText = 'noon';
  } else if (hour > 12) {
    lbl.innerText = hour-12 + ' PM';
  } else {
    lbl.innerText = hour + ' AM';
  }

  var dayOfWeek = parseInt(document.getElementById('dow').value)
  document.getElementById('dowlabel').innerText = ['uh oh', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][dayOfWeek];
 }

 function changeRadius() {
  if (map == null || heat == null) { return; }

  r = parseInt(document.getElementById('radius').value);
  heat.setOptions({radius: r});
 }

 function callApi() {
  var hour = parseInt(document.getElementById('hour').value)
  var dayOfWeek = parseInt(document.getElementById('dow').value)

  var cacheKey = 'key-' + dayOfWeek + '-' + hour;
  if (cache[cacheKey]) {
    apiResponse(cache[cacheKey]);
    return;
  }

  document.getElementById('loading').style.display = '';
  get(dayOfWeek+'-'+hour+'.csv', function(data) {
    document.getElementById('loading').style.display = 'none';
    cache[cacheKey] = data;
    apiResponse(data);
  });
 }

 function get(url, cb) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onreadystatechange = function() {
    if (xhr.readyState != 4) { return; }
    cb(xhr.responseText);
  };
  xhr.send();
 }

 function apiResponse(data) {
  taxiData = [];
  if (map == null) {
    map = L.map('map').setView([40.7480372,-73.9661407], 12);
    var tiles = L.tileLayer('http://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
      attribution: '<a href="https://www.mapbox.com/about/maps/">Terms and Feedback</a>',
      id: 'examples.map-20v6611k'
    }).addTo(map);
    heat = L.heatLayer([], {
      'radius': 10
    }).addTo(map);
  }

  var rows = data.split('\n');
  for (var i = 0; i < rows.length; i++) {
    if (!rows[i]) { continue; }
    var cols = rows[i].split(',');
    taxiData.push([parseFloat(cols[0]), parseFloat(cols[1]), 1]);
  }
  heat.setLatLngs(taxiData);
 }
 document.body.onLoad = callApi();
 </script>
 </body>
 </html>
	#!/bin/bash

	set -e
	set -x

	LIMIT=10000

	for h in `seq 0 23`
	do
	for d in `seq 1 7`
	do
	bq -q --format=csv --project_id=833682135931 query --batch -n $LIMIT "SELECT pickup_latitude, pickup_longitude FROM [833682135931:nyctaxi.trip_data] WHERE HOUR(TIMESTAMP(pickup_datetime)) == $h AND DAYOFWEEK(TIMESTAMP(pickup_datetime)) == $d AND pickup_latitude != '0' AND pickup_longitude != '0' LIMIT $LIMIT" --format=csv \| sed 1d > $d-$h.csv
	done
	done
	<!DOCTYPE html>
	<html>
	<head>
	<title>NYC Taxi heatmap 2013</title>
	<link rel="stylesheet" href="leaflet.css" />
	<script src="leaflet.js"></script>
	<style>
	#map { width: 100%; height: 600px; }
	body { font: 16px/1.4 "Helvetica Neue", Arial, sans-serif; }
	.ghbtns { position: relative; top: 4px; margin-left: 5px; }
	a { color: #0077ff; }
	#container{
	position: absolute;
	top: 10px; left: 60px;
	background: white;
	margin: 5px;
	border: 1px solid #666;
	};
	#loading{display:'none'; color: #666; };
	</style>
	</head>
	<body>

	<div id="map"></div>
	<div id="container">
	<a href="https://gist.github.com/ImJasonH/38e2e22a29bf5fecc5e6">source</a><br />
	<input type="range" id="hour" min="0" max="23" value="2" onchange="callApi()" oninput="updateLabel()"></input><label for="hour" id="hourlabel">2 AM</label><br />
	<input type="range" id="dow" min="1" max="7" value="7" onchange="callApi()" oninput="updateLabel()"></input><label for="dow" id="dowlabel">Saturday</label><br />
	<input type="range" id="radius" min="10" max="25" value="10" onchange="changeRadius()"></input><label for="radius">heat</label><br />
	<span id="loading">Loading...</span>
	</div>

	<script src="leaflet-heat.js"></script>
	<script>
	document.getElementById('map').style.height = window.innerHeight + 'px';

	var map = null;
	var heat = null;
	var taxiData = [];
	var cache = {};
	var bounds = null;

	function updateLabel() {
	var hour = parseInt(document.getElementById('hour').value)
	var lbl = document.getElementById('hourlabel');
	if (hour == 0) {
	lbl.innerText = 'midnight';
	} else if (hour == 12) {
	lbl.innerText = 'noon';
	} else if (hour > 12) {
	lbl.innerText = hour-12 + ' PM';
	} else {
	lbl.innerText = hour + ' AM';
	}

	var dayOfWeek = parseInt(document.getElementById('dow').value)
	document.getElementById('dowlabel').innerText = ['uh oh', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][dayOfWeek];
	}

	function changeRadius() {
	if (map == null \|\| heat == null) { return; }

	r = parseInt(document.getElementById('radius').value);
	heat.setOptions({radius: r});
	}

	function callApi() {
	var hour = parseInt(document.getElementById('hour').value)
	var dayOfWeek = parseInt(document.getElementById('dow').value)

	var cacheKey = 'key-' + dayOfWeek + '-' + hour;
	if (cache[cacheKey]) {
	apiResponse(cache[cacheKey]);
	return;
	}

	document.getElementById('loading').style.display = '';
	get(dayOfWeek+'-'+hour+'.csv', function(data) {
	document.getElementById('loading').style.display = 'none';
	cache[cacheKey] = data;
	apiResponse(data);
	});
	}

	function get(url, cb) {
	var xhr = new XMLHttpRequest();
	xhr.open('GET', url);
	xhr.onreadystatechange = function() {
	if (xhr.readyState != 4) { return; }
	cb(xhr.responseText);
	};
	xhr.send();
	}

	function apiResponse(data) {
	taxiData = [];
	if (map == null) {
	map = L.map('map').setView([40.7480372,-73.9661407], 12);
	var tiles = L.tileLayer('http://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
	attribution: '<a href="https://www.mapbox.com/about/maps/">Terms and Feedback</a>',
	id: 'examples.map-20v6611k'
	}).addTo(map);
	heat = L.heatLayer([], {
	'radius': 10
	}).addTo(map);
	}

	var rows = data.split('\n');
	for (var i = 0; i < rows.length; i++) {
	if (!rows[i]) { continue; }
	var cols = rows[i].split(',');
	taxiData.push([parseFloat(cols[0]), parseFloat(cols[1]), 1]);
	}
	heat.setLatLngs(taxiData);
	}
	document.body.onLoad = callApi();
	</script>
	</body>
	</html>