finished_lab 2_part 1,2,3

lab/lab1/part1.js

@@ -68,6 +68,8 @@ to true.
 
 var query1;
 
+query1 = _.isFunction(printMenu);
+
 console.log('printMenu is a function:', query1);
 
 /* =====================
@@ -77,6 +79,8 @@ to true.
 
 var query2;
 
+query2 = _.isArray(bakedGoods);
+
 console.log('bakedGoods is an array:', query2);
 
 /* =====================
@@ -86,6 +90,8 @@ underscore. Should evaluate to true.
 
 var query3;
 
+query3 = _.isObject(bakedGoods[0]);
+
 console.log('The first element in bakedGoods is an object:', query3);
 
 /* =====================
@@ -94,6 +100,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);
 
 /* =====================
@@ -102,6 +110,8 @@ Use _.filter to return all baked goods that cost more than $4.
 
 var query5;
 
+query5 = _.filter(bakedGoods, function(arr){return arr.price > 4});
+
 console.log('More than $4:', query5);
 
 /* =====================
@@ -110,6 +120,8 @@ Use _.sortBy to order the list by inventory (from lowest to highest).
 
 var query6;
 
+query6 = _.sortBy(bakedGoods,'inventory');
+
 console.log('Sorted by inventory (lowest to highest):', query6);
 
 /* =====================
@@ -118,6 +130,8 @@ Use _.groupBy to organize the baked goods by type.
 
 var query7;
 
+query7 = _.groupBy(bakedGoods,'type');
+
 console.log('Grouped by type:', query7);
 
 /* =====================
@@ -141,7 +155,36 @@ Whole Wheat ... $4.49
 
 ===================== */
 
-// printMenu2(query7);
+ //Solution 1: without using _.template
+
+function printMenu1(obj){
+    var keys = Object.keys(obj);
+    for(var i = 0; i < keys.length; i++){
+      var key = keys[i];
+      console.log(key);
+      for (var j = 0; j < obj[key].length; j++) {
+        console.log(obj[key][j].name + "... $" + obj[key][j].price);
+      }
+    }
+}
+
+printMenu1(query7);
+
+// Solution 2: Using _.template
+
+function printMenu2(obj){
+    var keys = Object.keys(obj);
+    for(var i = 0; i < keys.length; i++){
+      var key = keys[i];
+      console.log(key);
+      for (var j = 0; j < obj[key].length; j++) {
+        var compiled = _.template("<% print(name + '... $' + price);  %>");
+        console.log(compiled(obj[key][j]));
+      }
+    }
+}
+
+printMenu2(query7);
 
 /* =====================
 Stretch Goal (seriously, this is a bit tough at first!):

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

@@ -8,4 +8,7 @@ var Stamen_TonerLite = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/ton
   minZoom: 0,
   maxZoom: 20,
   ext: 'png'
-}).addTo(map);
+}).addTo(map);  
+
+var downloadData = $.ajax("https://raw.githubusercontent.com/MUSA611-CPLN692-spring2020/datasets/master/json/philadelphia-solar-installations.json");
+downloadData.done(console.log);

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

@@ -33,19 +33,52 @@
 ===================== */
 
 // Use the data source URL from lab 1 in this 'ajax' function:
-var downloadData = $.ajax("http://");
+var downloadData = $.ajax("https://raw.githubusercontent.com/MUSA611-CPLN692-spring2020/datasets/master/json/philadelphia-solar-installations.json");
+var parsed_data;
 
 // Write a function to prepare your data (clean it up, organize it
 // as you like, create fields, etc)
-var parseData = function() {};
+var parseData = function(data) {
+  var parsed = JSON.parse(data);
+  parsed_data = _.map(parsed,function(arr){
+    delete arr['LAT','LONG_','THUMB_URL'];
+    arr.isold = arr.YEARBUILT >= 2010;
+    arr.islarge = arr.KW > 54;
+    return arr;
+  })
+  return parsed_data;
+};
 
 // Write a function to use your parsed data to create a bunch of
 // marker objects (don't plot them!)
-var makeMarkers = function() {};
+var makeMarkers = function(data) {
+  var marks = _.map(data, function(arr){
+    var color;
+    if (arr.isold && arr.islarge){
+      color = '#0000FF';
+    } else if (!arr.isold && arr.islarge) {
+      color = '#00FF00';
+    } else if (arr.isold && !arr.islarge) {
+      color = '#00F090';
+    } else {
+      color = '##FF0000';
+    }
+    var pathOpts = {'radius': Math.log(arr.KW) * 5, 
+                'fillColor': color}  
+    var circle = L.circleMarker([arr.Y, arr.X], pathOpts)
+        .bindPopup(arr.DEVELOPER);
+    return circle;
+  });
+  return marks;
+};
 
 // Now we need a function that takes this collection of markers
 // and puts them on the map
-var plotMarkers = function() {};
+var plotMarkers = function(marks) {
+  _.map(marks, function(circle){
+    circle.addTo(map);
+  })
+};
 
 // At this point you should see a bunch of markers on your map if
 // things went well.
@@ -66,7 +99,11 @@ var plotMarkers = function() {};
 
 // Look to the bottom of this file and try to reason about what this
 // function should look like
-var removeMarkers = function() {};
+var removeMarkers = function(marks) {
+    _.map(marks, function(circle){
+    map.removeLayer(circle);
+  })
+};
 
 /* =====================
   Optional, stretch goal
@@ -96,10 +133,9 @@ var Stamen_TonerLite = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/ton
 /* =====================
  CODE EXECUTED HERE!
 ===================== */
-
 downloadData.done(function(data) {
   var parsed = parseData(data);
   var markers = makeMarkers(parsed);
   plotMarkers(markers);
-  removeMarkers(markers);
+  //removeMarkers(markers);
 });

lab/lab2/js/part3-application.js

@@ -29,26 +29,94 @@
 var resetMap = function() {
   /* =====================
     Fill out this function definition
-  ===================== */
-};
+  ===================== */  
+  _.map(markers, function(circle){
+    map.removeLayer(circle);
+  });
+
+}
 
 /* =====================
   Define a getAndParseData function to grab our dataset through a jQuery.ajax call ($.ajax). It
   will be called as soon as the application starts. Be sure to parse your data once you've pulled
   it down!
 ===================== */
-var getAndParseData = function() {
+var raw = $.ajax("https://raw.githubusercontent.com/MUSA611-CPLN692-spring2020/datasets/master/json/philadelphia-solar-installations.json");
+
+var getAndParseData = function(data) {
   /* =====================
     Fill out this function definition
   ===================== */
+  var parsed = JSON.parse(data);
+  parsed = _.map(parsed,function(arr){
+    delete arr['LAT','LONG_','THUMB_URL'];
+    arr.isold = arr.YEARBUILT < 2010;
+    arr.islarge = arr.KW > 54;
+    return arr;
+  });
+  return parsed;
 };
 
 /* =====================
   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)
 ===================== */
+var filter_data;
+function kwfilter(data,min,max){
+     filter_data = _.filter(data, function(arr){
+      if(arr.KW > min && arr.KW < max){
+        return arr;
+      }
+     })
+  }
+function developer(data,string){
+    filter_data = _.filter(data, function(arr){
+      if(arr.DEVELOPER.indexOf(string) >= 0){
+        return arr;
+      }
+    })
+  }
+function year2010(data, checker){
+    filter_data = _.filter(data, function(arr){
+      if(!checker){
+        if(!arr.isold){
+          return arr;
+        } 
+      else {
+        if(arr.isold){
+          return arr;
+        }
+      }
+      }})
+  }
+
+var markers;
+
+function plotmarker(data){
+    markers = _.map(data, function(arr){
+                var pathOpts = {'radius': Math.log(arr.KW) * 5, 
+                                 'fillColor': '#0000FF'}  
+                var circle = L.circleMarker([arr.Y, arr.X], pathOpts).bindPopup(arr.DEVELOPER);
+                return circle;
+              })
+    _.map(markers, function(arr){
+      arr.addTo(map);
+    })
+  }
+
+
+
 var plotData = function() {
   /* =====================
     Fill out this function definition
   ===================== */
+  raw.done(function(data){
+    var parse = getAndParseData(data);
+    kwfilter(parse,numericField1,numericField2);
+    developer(filter_data,stringField);
+    year2010(filter_data,booleanField);
+    console.log(filter_data);
+    plotmarker(filter_data);
+  })
+
 };

lab/lab2/js/part3-main.js

@@ -5,7 +5,7 @@
 /* =====================
   Call getAndParseData to grab our dataset through a jQuery.ajax call ($.ajax)
 ===================== */
-getAndParseData();
+//getAndParseData();  
 
 /* =====================
   The code here is triggered when you click on the button with ID #my-button

lab/lab2/part3-application.html

@@ -3,17 +3,18 @@
   <head>
     <!-- CSS Imports -->
     <link rel="stylesheet" href="../../assignment/assignment1/css/leaflet.css" />
-  </head>
+  </head>  
   <body>
 
     <!--Left Panel-->
     <div style="position: absolute; left: 0px; width: 400px; top: 0; bottom: 0;">
+      <div>To use this filter, all of the three filters need to be filled with meaningful value.</div>
       <br>
-      Numeric filter: <input id="num1" type="number" name="num1" value=""> to <input id="num2" type="number" name="num2" value="">
+      KW filter: <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">
+      Developer filter: <input id="string" type="text">
       <br>
-      Boolean filter: <input id="boolean" type="checkbox">
+      Before 2010?: <input id="boolean" type="checkbox">
       <br>
       <button id="my-button">Plot Data</button>
     </div>