HW4-HyoSungKim

lab/lab1/part1.js

@@ -63,7 +63,7 @@ Is printMenu a function? Answer this question with underscore. Should evaluate
 to true.
 ===================== */
 
-var query1;
+var query1 = _.isFunction(printMenu);
 
 console.log('printMenu is a function:', query1);
 
@@ -72,7 +72,7 @@ Is bakedGoods an array? Answer this question with underscore. Should evaluate
 to true.
 ===================== */
 
-var query2;
+var query2 = _.isArray(bakedGoods);
 
 console.log('bakedGoods is an array:', query2);
 
@@ -81,39 +81,39 @@ Is the first element in bakedGoods an object? Answer this question with
 underscore. Should evaluate to true.
 ===================== */
 
-var query3;
+var query3 = _.isObject(_.first(bakedGoods));
 
 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;
+var 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;
+var query5 = _.filter(bakedGoods, function(cost){return cost.price > 4;});
 
 console.log('More than $4:', query5);
 
 /* =====================
 Use _.sortBy to order the list by inventory (from lowest to highest).
 ===================== */
 
-var query6;
+var query6 = _.sortBy(bakedGoods, "inventory");
 
 console.log('Sorted by inventory (lowest to highest):', query6);
 
 /* =====================
 Use _.groupBy to organize the baked goods by type.
 ===================== */
 
-var query7;
+var query7 = _.groupBy(bakedGoods,"type");
 
 console.log('Grouped by type:', query7);
 
@@ -137,7 +137,13 @@ Rye ... $5.09
 Whole Wheat ... $4.49
 ===================== */
 
-// printMenu(query7);
+printMenu(query7) =
+  for (var type in query7) {
+    console.log(Object.keys(query7[])[0]);
+    for (var item in object) {
+      console.log(item.name + " ... " + "$" + item.price)
+  }
+}
 
 /* =====================
 Stretch Goal:

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

@@ -19,7 +19,13 @@
   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) {
+  if (str.length >= 5){
+    return true;
+  } else {
+    return false;
+  }
+};
 
 console.log("isLengthOfFiveOrMore success:",
   _.isEqual(_.filter(['this', 'is','a', 'test', 'testing'], isLengthOfFiveOrMore), ['testing']));
@@ -30,9 +36,10 @@ 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) {return num * 2;};
 var theArray = [1, 5, 20, 100];
 
+console.log(_.map(theArray, function(num) {return num * 2;}));
 
 /* =====================
   Given this already defined function, define fizzbuzzArray so that, when mapped
@@ -94,6 +101,18 @@ 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";
 
+  $.ajax(phillySolarInstallationDataUrl).done(function(ajaxResponseValue){
+    // array of objects into json
+    var computedValue = JSON.parse(ajaxResponseValue);
+    console.log(computedValue);
+    //Check
+    console.log(computedValue[0]);
+
+    //make markers and map function to all points and add to map
+    var makeMarkers = (i) => {return L.marker([i.Y,i.X]).bindPopup(i.NAME).addTo(map);};
+    var allMarkers = _.map(computedValue, makeMarkers);
+
+});
 
 /* =====================
   Data you grab through ajax is just text. You'll need to parse it as javascript

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

@@ -34,11 +34,31 @@
 ===================== */
 
 // 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-solar-installations.json");
+
+var parseData = function(data) {
+  var computedValue = JSON.parse(data);
+  console.log("data parsed");
+  return computedValue;
+}
+
+var makeMarkers = function(parsed) {
+  var makeMarkers_ = (i) => {
+    return L.marker([i.Y,i.X]).bindPopup(i.NAME);
+  };
+  var allMarkers = _.map(parsed, makeMarkers_);
+  console.log("markers made");
+  return allMarkers;
+};
+
+var plotMarkers = function(markers) {
+  var plotMarkers_ = (i) => {
+    return i.addTo(map);
+  }
+  var plottedMarkers = _.map(markers, plotMarkers_);
+  console.log("markers ploted");
+  return plottedMarkers;
+};
 
 /* =====================
   Define the function removeData so that it clears the markers you've written
@@ -53,7 +73,10 @@ var plotMarkers = function() {};
   user's input.
 ===================== */
 
-var removeMarkers = function() {};
+var removeMarkers = function(markers) {
+  console.log("markers removed");
+  return _.each(markers, function(i) {return map.removeLayer(i);});
+};
 
 /* =====================
   Optional, stretch goal

lab/lab2/js/part3-application.js

@@ -24,13 +24,21 @@
   filters that might actually be useful. Try to see what you can produce.
 ===================== */
 
+var phillyCrimeDataUrl = "https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-crime-snippet.json";
+
+var currently_plotted_markers = [];
+var currently_selected_data = [];
+var complete_data = [];
+
 /* =====================
   Define a resetMap function to remove markers from the map and clear the array of markers
 ===================== */
-var resetMap = function() {
+var resetMap = function(currently_plotted_markers) {
   /* =====================
     Fill out this function definition
   ===================== */
+  currently_selected_data = complete_data;
+  _.each(currently_plotted_markers, function(i) {return map.removeLayer(i);});
 };
 
 /* =====================
@@ -42,6 +50,18 @@ var getAndParseData = function() {
   /* =====================
     Fill out this function definition
   ===================== */
+  $.ajax(phillyCrimeDataUrl).done(function(ajaxResponseValue){
+    // array of objects into json
+    complete_data = JSON.parse(ajaxResponseValue);
+      // for(var i = 0; i < complete_data.length; i++){
+      //   console.log(complete_data[i]);
+      // }
+
+    //make markers and map function to all points and add to map
+    // var makeMarkers = (i) => {return L.marker([i.Y,i.X]).bindPopup(i.NAME).addTo(map);};
+    // var allMarkers = _.map(computedValue, makeMarkers);
+
+  });
 };
 
 /* =====================
@@ -50,6 +70,64 @@ var getAndParseData = function() {
 ===================== */
 var plotData = function() {
   /* =====================
-    Fill out this function definition
+    data:
+      numericField1
+      numericField2
+      booleanField
+      stringField
   ===================== */
+
+  // console.log(currently_selected_data[0]["Dispatch Date/Time"].substring(20,22)==="PM");
+  if(numericField1 != '' && numericField2 != ''){
+    currently_selected_data = _.filter(currently_selected_data, function(val) {
+      var cur_time = val["Dispatch Date/Time"];
+      var cur_hour = parseInt(cur_time.substring(11,13));
+      var ampm = cur_time.substring(20,22);
+      if(ampm === "PM"){
+        cur_hour += 12;
+      }
+
+      var cur_t = new Date('December 17, 1995 00:00:00');
+      cur_t.setHours(cur_hour,parseInt(cur_time.substring(14,16)),parseInt(cur_time.substring(17,19)));
+
+      var n1_t = new Date('December 17, 1995 00:00:00');
+      n1_t.setHours(numericField1);
+
+      var n2_t = new Date('December 17, 1995 00:00:00');
+      n2_t.setHours(numericField2);
+
+      if((cur_t >= n1_t && cur_t <= n2_t)){
+        return true;
+      } else {
+        return false;
+      }
+    });
+  }
+
+  if(stringField != ''){
+    currently_selected_data = _.filter(currently_selected_data, function(val) {
+      return (val["General Crime Category"] == stringField);
+    });
+  }
+
+  if(booleanField == true){
+      currently_selected_data=_.filter(currently_selected_data,function(val){
+        var crime_location = val["Location Block"];
+        var south_broad_st = "S BROAD ST";
+        var oregon_av = "OREGON AV";
+        var oregon_ave = "OREGON AVE";
+        if (crime_location.includes(south_broad_st) | crime_location.includes(oregon_av) | crime_location.includes(oregon_ave)){
+          console.log(crime_location);
+          return true;
+        } else {
+          return false;
+        }
+      });
+    }
+
+  var makeMarkers = (i) => {return L.marker([i.Lat,i.Lng]).bindPopup(i["Location Block"]).addTo(map);};
+  var currently_plotted_markers = _.map(currently_selected_data, makeMarkers);
+
+
+  return currently_plotted_markers;
 };

lab/lab2/js/part3-main.js

@@ -11,6 +11,8 @@ getAndParseData();
   The code here is triggered when you click on the button with ID #my-button
   ALL functions called here will be called EVERY time a click event fires
 ===================== */
+var markers = [];
+
 $('button#my-button').click(function(e) {
   numericField1 = $('#num1').val();
   console.log("numericFieldMin", numericField1);
@@ -29,10 +31,10 @@ $('button#my-button').click(function(e) {
     Call our resetMap function to remove markers from the map and clear out the array of marker
     objects
   ===================== */
-  resetMap();
+  resetMap(markers);
 
   /* =====================
     Call our plotData function. It should plot all the markers that meet our criteria
   ===================== */
-  plotData();
+  markers = plotData();
 });

lab/lab2/part3-application.html

@@ -9,11 +9,18 @@
     <!--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] Hour (24 hour format) of crime: <br><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">
       <br>
-      Boolean filter: <input id="boolean" type="checkbox">
+      [String] Type of crime: <input id="string" type="text">
+      <br>
+      <br>
+      Options: "Narcotic / Drug Law Violations", "All Other Offenses", "Thefts", "Other Assaults", "Rape", "Other Sex Offenses (Not Commercialized)", "Aggravated Assault No Firearm", "Theft from Vehicle", "Vandalism/Criminal Mischief", "DRIVING UNDER THE INFLUENCE", "Motor Vehicle Theft", "Burglary Residential", "Fraud", "Burglary Non-Residential", "Embezzlement", "Forgery and Counterfeiting", "Arson", "Robbery Firearm", "Disorderly Conduct", "Robbery No Firearm", "Homicide - Criminal", "Weapon Violations", "Liquor Law Violations", "Recovered Stolen Motor Vehicle", "Public Drunkenness", "Vagrancy/Loitering", "Offenses Against Family and Children", "Aggravated Assault Firearm", "Gambling Violations"
+      <br>
+      <br>
+      [Boolean] Main streets incidences: <input id="boolean" type="checkbox">
+      <br>
+      South Broad Street or Oregon Avenue
       <br>
       <button id="my-button">Plot Data</button>
     </div>