HW4 - Buckler

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(obj){return obj.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(obj){return obj.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, function(obj){return obj.type});
 
 console.log('Grouped by type:', query7);
 
@@ -136,8 +136,13 @@ Sourdough ... $5.29
 Rye ... $5.09
 Whole Wheat ... $4.49
 ===================== */
+let printMenu2 = (groupedMenu) => {
+  var template = _.template("<%= food =%> ... $ <%= price =%>");
+  return template({food: groupMenu.name, price: groupMenu.price});
+};
+
 
-// printMenu(query7);
+printMenu2(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,18 @@ 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, 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, 15];
 var fizzbuzzFunc = function(num) {
   var str = '';
   if (num % 3 === 0) { str = 'fizz'; }
@@ -94,6 +99,15 @@ 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(phillyCrimeDataUrl).done(function(data) {
+  var parsedData = JSON.parse(data);
+  console.log(parsedData);
+  _.each(parsedData, addMarker);
+  //return parsedData;
+  return parsedData;
+});
+
+
 
 /* =====================
   Data you grab through ajax is just text. You'll need to parse it as javascript
@@ -103,6 +117,11 @@ var phillyBikeCrashesDataUrl = "https://raw.githubusercontent.com/CPLN692-MUSA61
   Remember to call all code within the function body. Use console.log to make sure
   that this step is completed before moving on!
 ===================== */
+var addMarker = (dataLine) => {
+  console.log(dataLine);
+  console.log([dataLine.Lng, dataLine.Lat]);
+  L.marker([dataLine.Lat, dataLine.Lng]).addTo(map);
+};
 
 
 /* =====================

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

@@ -34,10 +34,18 @@
 ===================== */
 
 // 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(rawData) {return JSON.parse(rawData);};
+var makeMarkers = function(pData) {
+  var markers = [];
+  _.each(pData, (dataLine) => {markers.push(L.marker([dataLine.Lat, dataLine.Lng]))});
+  return markers;
+};
+var plotMarkers = function(marker) {
+  _.each(marker, (mark) => {
+    mark.addTo(map);
+  });
+};
 
 
 /* =====================
@@ -53,7 +61,11 @@ var plotMarkers = function() {};
   user's input.
 ===================== */
 
-var removeMarkers = function() {};
+var removeMarkers = function(markers) {
+  _.each(markers, (rmMarker) => {
+    map.removeLayer(rmMarker);
+  });
+};
 
 /* =====================
   Optional, stretch goal
@@ -69,7 +81,7 @@ var removeMarkers = function() {};
 
 var map = L.map('map', {
   center: [39.9522, -75.1639],
-  zoom: 14
+  zoom: 13
 });
 var Stamen_TonerLite = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}', {
   attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
@@ -85,7 +97,9 @@ var Stamen_TonerLite = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/ton
 
 downloadData.done(function(data) {
   var parsed = parseData(data);
+  //console.log(parsed);
   var markers = makeMarkers(parsed);
+  //console.log(markers);
   plotMarkers(markers);
   removeMarkers(markers);
 });

lab/lab2/js/part3-application.js

@@ -28,9 +28,9 @@
   Define a resetMap function to remove markers from the map and clear the array of markers
 ===================== */
 var resetMap = function() {
-  /* =====================
-    Fill out this function definition
-  ===================== */
+  _.each(myMarkers, (marker) => { //calls global `myMarkers` array and removes each one by one
+    map.removeLayer(marker);});
+  myMarkers = []; //resets array to empty
 };
 
 /* =====================
@@ -39,16 +39,41 @@ var resetMap = function() {
   it down!
 ===================== */
 var getAndParseData = function() {
-  /* =====================
-    Fill out this function definition
-  ===================== */
+  var rawData = $.ajax("https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-crime-snippet.json").done((dat) => {
+    myData = JSON.parse(dat);  //calls dta from url and parses the json file - writes out to the global variable
+  });
 };
 
 /* =====================
   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)
 ===================== */
+
+//userfilter to select police region between min and max
+var userFilter = function(fData) {
+  return fData.District >= numericField1 & fData.District <= numericField2;
+};
+
+//takes in data list and writes returns array of markers
+var makeMarkers = function(pData) {
+  var tempMarkers = [];
+  _.each(pData, (dataLine) => {tempMarkers.push(L.marker([dataLine.Lat, dataLine.Lng]))});
+  return tempMarkers;
+};
+
+
+//takes in a list of markers and adds each to the map one at a time
+var plotMarkers = function(marker) {
+  _.each(marker, (mark) => {
+    mark.addTo(map);
+  });
+};
+
 var plotData = function() {
+  var filteredData = _.filter(myData, userFilter); //applies filter`
+  myMarkers = makeMarkers(filteredData);    //generates markers and assigns to global list
+  plotMarkers(myMarkers);                   //plots to map
+
   /* =====================
     Fill out this function definition
   ===================== */

lab/lab2/part3-application.html

@@ -8,6 +8,8 @@
 
     <!--Left Panel-->
     <div style="position: absolute; left: 0px; width: 400px; top: 0; bottom: 0;">
+      Filter police call data using the police District
+      <br>
       <br>
       Numeric filter: <input id="num1" type="number" name="num1" value=""> to <input id="num2" type="number" name="num2" value="">
       <br>