HW4-Zixuan Xu

example/js/indego-bike.js

@@ -18,7 +18,7 @@ var cleanStations;
 var getBikeData = function() {
   $.ajax(rideIndego).done(function(ajaxResponseValue) {
       // a function that does some kind of transformation on the response
-      bikeData = ajaxResponseValue;
+      bikeData = JSON.parse(ajaxResponseValue);
       // Turn the ajax json return into a familiar object format
       stations = new Object(bikeData.features);
       // removing the `geometries` to make it easier to show off some underscore examples

lab/lab1/part1.js

@@ -58,12 +58,13 @@ var printMenu = function(foodList) {
 
 console.log('List of baked goods', bakedGoods);
 
+
 /* =====================
 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 +73,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 +82,43 @@ Is the first element in bakedGoods an object? Answer this question with
 underscore. Should evaluate to true.
 ===================== */
 
-var query3;
+var 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;
+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(good){
+  return good['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, function(good){
+  return good['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 +142,7 @@ Rye ... $5.09
 Whole Wheat ... $4.49
 ===================== */
 
-// printMenu(query7);
+printMenu(query7);
 
 /* =====================
 Stretch Goal:

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,20 @@ 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'; }
@@ -105,16 +112,34 @@ var phillyBikeCrashesDataUrl = "https://raw.githubusercontent.com/CPLN692-MUSA61
 ===================== */
 
 
+
+  var popupText;
+  var crimeData;
+  var crimes;
+
+
+
+
+
+
 /* =====================
   Now that you've properly parsed your data, use _.each to plot the
   dataset you've pulled down.
 ===================== */
-
-
+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)});
+});
+};
+  getCrimeData();
 /* =====================
  Leaflet setup - feel free to ignore this
 ===================== */
 
+
 var map = L.map('map', {
   center: [39.9522, -75.1639],
   zoom: 14

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

@@ -34,10 +34,23 @@
 ===================== */
 
 // 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(data) {
+  return JSON.parse(data)
+  };
+var makeMarkers = function(parseData) {
+  var markers = [];
+  _.forEach(parseData, function(x){
+    markers.push(L.marker([x.Lat, x.Lng]))
+});
+  return markers;
+};
+var plotMarkers = function(markers) {
+  _.forEach(markers, function(m) {
+    m.addTo(map);
+  });
+};
+
 
 
 /* =====================
@@ -53,7 +66,11 @@ var plotMarkers = function() {};
   user's input.
 ===================== */
 
-var removeMarkers = function() {};
+var removeMarkers = function(markers) {
+  _.forEach(markers, function(m) {
+    map.removeLayer(m)
+  });
+};
 
 /* =====================
   Optional, stretch goal

lab/lab2/js/part3-application.js

@@ -23,11 +23,14 @@
   Remember, this is open-ended. Open ended doesn't mean pointless: we're looking for
   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";
 /* =====================
   Define a resetMap function to remove markers from the map and clear the array of markers
 ===================== */
-var resetMap = function() {
+var resetMap = function(myMarkers) {
+  _.forEach(myMarkers, function(m) {
+    map.removeLayer(m);
+  });
   /* =====================
     Fill out this function definition
   ===================== */
@@ -39,6 +42,9 @@ var resetMap = function() {
   it down!
 ===================== */
 var getAndParseData = function() {
+  $.ajax(phillyCrimeDataUrl).done(function(res) {
+    myData = JSON.parse(res);
+  });
   /* =====================
     Fill out this function definition
   ===================== */
@@ -49,6 +55,18 @@ var getAndParseData = function() {
   criteria happens to be — that's entirely up to you)
 ===================== */
 var plotData = function() {
+    _.forEach(myData, function(x){
+      var marker;
+      if (booleanField && x["UCR Code"] == 600) {
+        marker = L.marker([x.Lat, x.Lng]).bindPopup(x["General Crime Category"]).addTo(map);
+        if (numericField1 !== "" && numericField2 !== "" && x.PSA > numericField1 && x.PSA < numericField2) {
+          marker =  L.marker([x.Lat, x.Lng]).bindPopup("PSA - " + x.PSA + ": " + x["General Crime Category"]).addTo(map);
+        }}
+      if (stringField !== "" && x["General Crime Category"] == stringField) {
+        marker =  L.marker([x.Lat, x.Lng]).bindPopup(x["General Crime Category"]).addTo(map);
+      }
+      myMarkers.push(marker);
+  });
   /* =====================
     Fill out this function definition
   ===================== */

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="">
+      PSA: <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">
+      Crime Category: <input id="string" type="text">
       <br>
-      Boolean filter: <input id="boolean" type="checkbox">
+      Thefts: <input id="boolean" type="checkbox">
       <br>
       <button id="my-button">Plot Data</button>
     </div>