Lufeng Lin-week4

lab/lab1/part1.js

@@ -64,7 +64,7 @@ to true.
 ===================== */
 
 var query1;
-
+query1 = _.isFunction(printMenu)
 console.log('printMenu is a function:', query1);
 
 /* =====================
@@ -73,7 +73,7 @@ to true.
 ===================== */
 
 var query2;
-
+query2 = _.isArray(bakedGoods);
 console.log('bakedGoods is an array:', query2);
 
 /* =====================
@@ -82,39 +82,39 @@ underscore. Should evaluate to true.
 ===================== */
 
 var query3;
-
+query3 = _.isObject(bakedGoods[1]);
 console.log('The first element in bakedGoods is an object:', query3);
 
 /* =====================
 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);
 
 /* =====================
 Use _.filter to return all baked goods that cost more than $4.
 ===================== */
 
 var query5;
-
+query5 = _.filter(bakedGoods, function(i){return i.price>4});
 console.log('More than $4:', query5);
 
 /* =====================
 Use _.sortBy to order the list by inventory (from lowest to highest).
 ===================== */
 
 var query6;
-
+query6 = _.sortBy(bakedGoods, function(j){ return Math.sin(j.inventory).reverse;});
 console.log('Sorted by inventory (lowest to highest):', query6);
 
 /* =====================
 Use _.groupBy to organize the baked goods by type.
 ===================== */
 
 var query7;
-
+query7 = _.groupBy(bakedGoods, function(x){ return x.type; });
 console.log('Grouped by type:', query7);
 
 /* =====================

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

@@ -19,8 +19,7 @@
   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 +29,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(num*2)};
 var theArray = [1, 5, 20, 100];
-
+_.each(theArray, function(num){logDouble(num)});
 
 /* =====================
   Given this already defined function, define fizzbuzzArray so that, when mapped
   over, it will equal ['fizz', 'buzz', 'fizzbuzz'];
 ===================== */
-var fizzbuzzArray = [];
+var fizzbuzzArray = [3, 5, 15];
 var fizzbuzzFunc = function(num) {
   var str = '';
   if (num % 3 === 0) { str = 'fizz'; }
@@ -94,6 +93,30 @@ var phillySolarInstallationDataUrl = "https://raw.githubusercontent.com/CPLN692-
 var phillyCrimeDataUrl = "https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-crime-snippet.json";
 var phillyBikeCrashesDataUrl = "https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-bike-crashes-snippet.json";
 
+var crimedata;
+var layerGroup
+
+// async ajax call
+var getCrimeData = function() {
+  $.ajax(phillyCrimeDataUrl).done(function(ajaxResponseValue) {
+      crimedata = JSON.parse(ajaxResponseValue);
+      console.log(crimedata);
+      _.forEach(crimedata, function(x){
+          L.marker([x.Lat, x.Lng]).addTo(map);
+        });
+      })
+  }
+
+
+// run the ajax function
+getCrimeData();
+// create a feature group to provide additional controls over the markers
+// read more about layer groups here: https://leafletjs.com/examples/layers-control/
+// It makes it easier to control a group of markers
+
+
+/*  ----  THIS IS HOW YOU CLEAR A LAYER GROUP   ----- */
+// layerGroup.clearLayers();
 
 /* =====================
   Data you grab through ajax is just text. You'll need to parse it as javascript

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

@@ -34,16 +34,28 @@
 ===================== */
 
 // 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("https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-crime-snippet.json");
+var parseData = function(downloadedData) {
+  return JSON.parse(downloadedData);
+};
+var makeMarkers = function(parsedData) {
+  var maker = [];
+  _.forEach(parsedData, function(x){
+    maker.push(L.marker([x.Lat, x.Lng]));
+  });
+  return maker;
+};
+var plotMarkers = function(y) {
+  _.forEach(y, function(z){
+    z.addTo(map);
+  });
+};
 
 
 /* =====================
   Define the function removeData so that it clears the markers you've written
   from the map. You'll know you've succeeded when the markers that were
-  previously displayed are immediately removed from the map.
+  previously displayed are immediately removed fr om the map.
 
   In Leaflet, the syntax for removing one specific marker looks like this:
 
@@ -84,8 +96,9 @@ var Stamen_TonerLite = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/ton
 ===================== */
 
 downloadData.done(function(data) {
+  console.log(data);
   var parsed = parseData(data);
   var markers = makeMarkers(parsed);
   plotMarkers(markers);
-  removeMarkers(markers);
+//  removeMarkers(markers);
 });

lab/lab2/js/part3-application.js

@@ -28,6 +28,10 @@
   Define a resetMap function to remove markers from the map and clear the array of markers
 ===================== */
 var resetMap = function() {
+  _.forEach(myMarkers, function(x) {
+  map.removeLayer(x);
+});
+myMarkers = null;
   /* =====================
     Fill out this function definition
   ===================== */
@@ -42,14 +46,38 @@ var getAndParseData = function() {
   /* =====================
     Fill out this function definition
   ===================== */
+  var Crimedata = "http://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-crime-snippet.json";
+  var y = $.ajax(Crimedata).done(function(y) {
+    myData = JSON.parse(y);
+  });
 };
 
 /* =====================
   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)
 ===================== */
+
+/*=====================
+    Fill out this function definition
+  =====================*/
+console.log(newMarkers);*/
+var markerfilter = function(y) {
+  var markerfilterd = [];
+  for (i = 0; i < y.length; i++) {
+    if (y[i]['UCR Code'] >= numericField1 && y[i]['UCR Code'] <= numericField2 && y[i]['General Crime Category'] == stringField &&
+  (y[i].District == 24) == booleanField) {
+      markerfilterd.push(y[i]);
+    }
+  }
+  console.log("Number of crimes: " + markerfilterd.length);
+  return markerfilterd;
+};
+
 var plotData = function() {
   /* =====================
     Fill out this function definition
   ===================== */
+  myMarkers = _.each(markerfilter(myData), (z) => {
+    L.marker([z.Lat, z.Lng]).addTo(map).bindPopup(z['Location Block']);
+  });
 };

lab/lab2/js/part3-main.js

@@ -23,6 +23,7 @@ $('button#my-button').click(function(e) {
 
   stringField = $('#string').val();
   console.log("stringField", stringField);
+  console.log(myData)
 
 
   /* =====================