HW 4 - Yue Guo

lab/lab1/part1.js

@@ -65,6 +65,8 @@ to true.
 
 var query1;
 
+query1 = _.isFunction(printMenu);
+
 console.log('printMenu is a function:', query1);
 
 /* =====================
@@ -74,6 +76,8 @@ to true.
 
 var query2;
 
+query2 = _.isArray(bakedGoods);
+
 console.log('bakedGoods is an array:', query2);
 
 /* =====================
@@ -83,6 +87,8 @@ underscore. Should evaluate to true.
 
 var query3;
 
+query3 = _.isObject(bakedGoods[0]);
+
 console.log('The first element in bakedGoods is an object:', query3);
 
 /* =====================
@@ -91,6 +97,8 @@ Use _.where to return all cakes. Or bread. Whichever is your favorite.
 
 var query4;
 
+query4 = _.where(bakedGoods, {'type': "Cake"});
+
 console.log('All bread. Or cakes:', query4);
 
 /* =====================
@@ -99,14 +107,18 @@ Use _.filter to return all baked goods that cost more than $4.
 
 var query5;
 
+query5 = _.filter(bakedGoods, function(obj) {return obj.price>4},);
+
 console.log('More than $4:', query5);
 
-/* =====================
+/* =====================s
 Use _.sortBy to order the list by inventory (from lowest to highest).
-===================== */
+===================== */ss
 
 var query6;
 
+query6 = _.sortBy(bakedGoods, 'inventory');
+
 console.log('Sorted by inventory (lowest to highest):', query6);
 
 /* =====================
@@ -115,6 +127,8 @@ Use _.groupBy to organize the baked goods by type.
 
 var query7;
 
+query7 = _.groupBy(bakedGoods, 'type');
+
 console.log('Grouped by type:', query7);
 
 /* =====================

lab/lab2/js/part1-ajax-calls.js

@@ -19,7 +19,9 @@
   This recipe, can be used by underscore's _.filter. It will return only words with
    >=5 characters.
 ===================== */
-var isLengthOfFiveOrMore = function(str) {};
+var isLengthOfFiveOrMore = function(str) {
+  return str.length >=5;
+};
 
 console.log("isLengthOfFiveOrMore success:",
   _.isEqual(_.filter(['this', 'is','a', 'test', 'testing'], isLengthOfFiveOrMore), ['testing']));
@@ -30,15 +32,15 @@ console.log("isLengthOfFiveOrMore success:",
   function you write along with underscore's _.each to log the double of every
   number in the provided array.
 ===================== */
-var logDouble = function(num) {};
+var logDouble = function(num){console.log(2*num);};
 var theArray = [1, 5, 20, 100];
-
+theArray = _.each(theArray, logDouble);
 
 /* =====================
   Given this already defined function, define fizzbuzzArray so that, when mapped
   over, it will equal ['fizz', 'buzz', 'fizzbuzz'];
 ===================== */
-var fizzbuzzArray = [];
+var fizzbuzzArray = [3,5,0];
 var fizzbuzzFunc = function(num) {
   var str = '';
   if (num % 3 === 0) { str = 'fizz'; }
@@ -105,12 +107,15 @@ var phillyBikeCrashesDataUrl = "https://raw.githubusercontent.com/CPLN692-MUSA61
 ===================== */
 
 
+$.ajax(phillyCrimeDataUrl).done(function(d){
+  var crimelist=JSON.parse(d);
+  //console.log(crimelist);
 /* =====================
   Now that you've properly parsed your data, use _.each to plot the
   dataset you've pulled down.
 ===================== */
-
-
+  _.each(crimelist, function(o){L.marker([o.Lat, o.Lng]).addTo(map);});
+});
 /* =====================
  Leaflet setup - feel free to ignore this
 ===================== */

lab/lab2/js/part2-app-state.js

@@ -34,10 +34,22 @@
 ===================== */
 
 // We set this to HTTP to prevent 'CORS' issues
-var downloadData = $.ajax("http://");
-var parseData = function() {};
-var makeMarkers = function() {};
-var plotMarkers = function() {};
+var downloadData = $.ajax("http://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-crime-snippet.json");
+
+var parseData = function(data) {
+  return JSON.parse(data);
+};
+
+var makeMarkers = function(list) {
+  var listofmarkers=[];
+  _.each(list, function(o){listofmarkers.push(L.marker([o.Lat, o.Lng]))});
+  return listofmarkers;
+};
+
+var plotMarkers = function(list) {
+  //console.log(list);
+  _.each(list, function(o){o.addTo(map);});
+};
 
 
 /* =====================
@@ -53,7 +65,9 @@ var plotMarkers = function() {};
   user's input.
 ===================== */
 
-var removeMarkers = function() {};
+var removeMarkers = function(listofmarkers) {
+  _.each(listofmarkers, function(o){map.removeLayer(o);});
+};
 
 /* =====================
   Optional, stretch goal
@@ -86,6 +100,7 @@ var Stamen_TonerLite = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/ton
 downloadData.done(function(data) {
   var parsed = parseData(data);
   var markers = makeMarkers(parsed);
+
   plotMarkers(markers);
   removeMarkers(markers);
 });

lab/lab2/js/part3-application.js

@@ -28,9 +28,10 @@
   Define a resetMap function to remove markers from the map and clear the array of markers
 ===================== */
 var resetMap = function() {
-  /* =====================
-    Fill out this function definition
-  ===================== */
+  _.forEach(myMarkers, function(o) {
+    map.removeLayer(o);
+  });
+  myMarkers = null;
 };
 
 /* =====================
@@ -39,17 +40,58 @@ var resetMap = function() {
   it down!
 ===================== */
 var getAndParseData = function() {
-  /* =====================
-    Fill out this function definition
-  ===================== */
+  var Url = "http://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-crime-snippet.json";
+  var d = $.ajax(Url).done(function(d) {
+    myData = JSON.parse(d);
+  });
 };
 
 /* =====================
   Call our plotData function. It should plot all the markers that meet our criteria (whatever that
   criteria happens to be — that's entirely up to you)
 ===================== */
+// Define a filter function to check each entry if they match the user defined criteria.
+var filter = function(list2bchecked) {
+  var filteredlist = [];
+  for (var i = 0; i < list2bchecked.length; i++) {
+    let checker = 0; // To record the number of checks that each entry passes.
+
+    // UCR Code Check.
+    if (list2bchecked[i]["UCR Code"] >= numericField1 && list2bchecked[i]["UCR Code"] <= numericField2) {
+      checker++;
+    }
+    // Location block check.
+    var lb_upperCase = list2bchecked[i]['Location Block'].toUpperCase(); // Set everything to uppercase so that it doesnt matter.
+    if (lb_upperCase.includes(stringField,)) {
+      checker++;
+    }
+    // PSA=1 check.
+    if (booleanField==true) {
+      if (list2bchecked[i]['PSA']==1){checker++;} // Check if PSA is 1, but only if user requires.
+    } else {checker++;} // If user does not specify PSA=1, then this check auto-passes.
+
+    // If all 3 checks are true
+    if (checker == 3) {
+      filteredlist.push(list2bchecked[i]);
+    }
+  };
+  return filteredlist;
+}
+
+var makeMarkers = function (ll){
+  var listofmarkers=[];
+  _.each(ll, function(o){listofmarkers.push(L.marker([o.Lat, o.Lng]))});
+  return listofmarkers;
+}
+
+var plotMarkers = function(ll) {
+  _.each(ll, function(o){o.addTo(map);});
+};
+
 var plotData = function() {
-  /* =====================
-    Fill out this function definition
-  ===================== */
+  var tobeplotted = filter(myData);
+  console.log("FOUND " + tobeplotted.length + ' CRIMES THAT MATCH.');
+
+  myMarkers = makeMarkers(tobeplotted);
+  plotMarkers(myMarkers);
 };

lab/lab2/js/part3-main.js

@@ -21,7 +21,7 @@ $('button#my-button').click(function(e) {
   booleanField = $('#boolean')[0].checked;
   console.log("booleanField", booleanField);
 
-  stringField = $('#string').val();
+  stringField = $('#string').val().toUpperCase(); // Set toUpperCase tO sImPlIfY sTuFf. <_< lol
   console.log("stringField", stringField);
 
 

lab/lab2/part3-application.html

@@ -9,11 +9,11 @@
     <!--Left Panel-->
     <div style="position: absolute; left: 0px; width: 400px; top: 0; bottom: 0;">
       <br>
-      Numeric filter: <input id="num1" type="number" name="num1" value=""> to <input id="num2" type="number" name="num2" value="">
+      Numeric filter (UCR Code): <input id="num1" type="number" name="num1" value=""> to <input id="num2" type="number" name="num2" value="">
       <br>
-      String filter: <input id="string" type="text">
+      String filter (Location block contains): <input id="string" type="text">
       <br>
-      Boolean filter: <input id="boolean" type="checkbox">
+      Boolean filter (Limit search to PSA=1?): <input id="boolean" type="checkbox">
       <br>
       <button id="my-button">Plot Data</button>
     </div>