wangjohn · December 28, 2015 01:29
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <style>
      #map {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: hidden;
      }
      #selector {
        margin-top: 15px;
        margin-left: auto;
        margin-right: auto;
        width: 300px;
      }
      #popup p {
        margin-left: auto;
        margin-right: auto;
        width: 300px;
      }
      #popup {
        top: 50px;
        left: 50px;
        position: absolute;
        width: 350px;
        height: 80px;
        background: white;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="popup">
      <div id="selector"></div>
      <p>
        <label for="range">Time Range:</label>
        <input type="text" id="range" style="border: 0; color: #f6931f; font-weight: bold;" />
      </p>
    </div>
    <script src="http://d3js.org/d3.v3.js"></script>
    <script>
      $(function () {
        var bostonLatLng = new google.maps.LatLng(42.3581, -71.063642);
        var $map=$("#map");
        var map = new google.maps.Map($map[0], {
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            panControl: false,
            zoomControl: false,
            streetViewControl: false,
            center: bostonLatLng,
            styles:[{"stylers": [{"saturation": -25},{"lightness": 25}]}]
          });

        var overlay = new google.maps.OverlayView();
        var taxiData = new google.maps.MVCArray();
        var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
        var heatmap = new google.maps.visualization.HeatmapLayer({
          radius: 15
        });
        heatmap.setMap(map);

        var allData = [];
        d3.csv("traindata_small.csv", function(err, data) {
          data.forEach(function(d) {
            d.time = parseDate(d.time);
            allData.push(d);
          });
          updateTaxiData();
        });

        function updateTaxiData() {
          var taxiData = new google.maps.MVCArray();
          heatmap.setData(taxiData);
          for (var i=0; i<allData.length; i++) {
            var t = allData[i].time.getHours() * 4 + allData[i].time.getMinutes();
            if (currentRangeMin <= t && t <= currentRangeMax) {
              taxiData.push(new google.maps.LatLng(allData[i].latitude, allData[i].longitude));
            }
          }
        };

        function toTimeString(time) {
          var hours = Math.floor(time / 4);
          var minutes = Math.floor((time - hours * 4)) * 15;
          var ampm = "am";
          if (hours >= 12) {
            ampm = "pm";
          }

          if (hours % 12 == 0) {
            return "12:" + padNumber(minutes, 2) + ampm;
          } else if (hours % 12 < 10) {
            return padNumber(hours % 12, 1) + ":" + padNumber(minutes, 2) + ampm;
          } else {
            return padNumber(hours % 12, 2) + ":" + padNumber(minutes, 2) + ampm;
          }
        };
        function padNumber(num, digits) {
          var result = num.toString();
          while (result.length < digits) {
            result = "0" + result;
          };
          return result;
        };

        // Jquery UI Slider for time ranges.
        var currentRangeMin = 20;
        var currentRangeMax = 80;
        $("#selector").slider({
          range: true,
          min: 0,
          max: 96,
          values: [currentRangeMin, currentRangeMax],
          slide: function(event, ui) {
            currentRangeMin = ui.values[0];
            currentRangeMax = ui.values[1];
            $("#range").val(toTimeString(currentRangeMin) + " - " + toTimeString(currentRangeMax));
            updateTaxiData();
          }
        });
        $("#range").val(toTimeString(currentRangeMin) + " - " + toTimeString(currentRangeMax));
      });
    </script>
  </body>
 </html>
diff --git a/traindata_small.csv b/traindata_small.csv
	<!DOCTYPE html>
	<meta charset="utf-8">
	<html>
	<head>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<style>
	#map {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	}
	#selector {
	margin-top: 15px;
	margin-left: auto;
	margin-right: auto;
	width: 300px;
	}
	#popup p {
	margin-left: auto;
	margin-right: auto;
	width: 300px;
	}
	#popup {
	top: 50px;
	left: 50px;
	position: absolute;
	width: 350px;
	height: 80px;
	background: white;
	z-index: 1;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<div id="popup">
	<div id="selector"></div>
	<p>
	<label for="range">Time Range:</label>
	<input type="text" id="range" style="border: 0; color: #f6931f; font-weight: bold;" />
	</p>
	</div>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script>
	$(function () {
	var bostonLatLng = new google.maps.LatLng(42.3581, -71.063642);
	var $map=$("#map");
	var map = new google.maps.Map($map[0], {
	zoom: 15,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	panControl: false,
	zoomControl: false,
	streetViewControl: false,
	center: bostonLatLng,
	styles:[{"stylers": [{"saturation": -25},{"lightness": 25}]}]
	});

	var overlay = new google.maps.OverlayView();
	var taxiData = new google.maps.MVCArray();
	var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
	var heatmap = new google.maps.visualization.HeatmapLayer({
	radius: 15
	});
	heatmap.setMap(map);

	var allData = [];
	d3.csv("traindata_small.csv", function(err, data) {
	data.forEach(function(d) {
	d.time = parseDate(d.time);
	allData.push(d);
	});
	updateTaxiData();
	});

	function updateTaxiData() {
	var taxiData = new google.maps.MVCArray();
	heatmap.setData(taxiData);
	for (var i=0; i<allData.length; i++) {
	var t = allData[i].time.getHours() * 4 + allData[i].time.getMinutes();
	if (currentRangeMin <= t && t <= currentRangeMax) {
	taxiData.push(new google.maps.LatLng(allData[i].latitude, allData[i].longitude));
	}
	}
	};

	function toTimeString(time) {
	var hours = Math.floor(time / 4);
	var minutes = Math.floor((time - hours * 4)) * 15;
	var ampm = "am";
	if (hours >= 12) {
	ampm = "pm";
	}

	if (hours % 12 == 0) {
	return "12:" + padNumber(minutes, 2) + ampm;
	} else if (hours % 12 < 10) {
	return padNumber(hours % 12, 1) + ":" + padNumber(minutes, 2) + ampm;
	} else {
	return padNumber(hours % 12, 2) + ":" + padNumber(minutes, 2) + ampm;
	}
	};
	function padNumber(num, digits) {
	var result = num.toString();
	while (result.length < digits) {
	result = "0" + result;
	};
	return result;
	};

	// Jquery UI Slider for time ranges.
	var currentRangeMin = 20;
	var currentRangeMax = 80;
	$("#selector").slider({
	range: true,
	min: 0,
	max: 96,
	values: [currentRangeMin, currentRangeMax],
	slide: function(event, ui) {
	currentRangeMin = ui.values[0];
	currentRangeMax = ui.values[1];
	$("#range").val(toTimeString(currentRangeMin) + " - " + toTimeString(currentRangeMax));
	updateTaxiData();
	}
	});
	$("#range").val(toTimeString(currentRangeMin) + " - " + toTimeString(currentRangeMax));
	});
	</script>
	</body>
	</html>
No results found