diff --git a/lab/lab1/part1.js b/lab/lab1/part1.js
index da84f3d..4f9dd86 100644
--- a/lab/lab1/part1.js
+++ b/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,7 +81,7 @@ 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);
@@ -89,7 +89,7 @@ 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);
@@ -97,7 +97,7 @@ 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);
@@ -105,7 +105,7 @@ 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);
@@ -113,7 +113,7 @@ 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:
diff --git a/lab/lab2/js/part1-ajax-calls.js b/lab/lab2/js/part1-ajax-calls.js
index 575a13c..6ba5661 100644
--- a/lab/lab2/js/part1-ajax-calls.js
+++ b/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);
+};
/* =====================
diff --git a/lab/lab2/js/part2-app-state.js b/lab/lab2/js/part2-app-state.js
index e342fe3..f9d6dde 100644
--- a/lab/lab2/js/part2-app-state.js
+++ b/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 Stamen Design, CC BY 3.0 — Map data © OpenStreetMap',
@@ -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);
});
diff --git a/lab/lab2/js/part3-application.js b/lab/lab2/js/part3-application.js
index 8572d7d..5bc0ae6 100644
--- a/lab/lab2/js/part3-application.js
+++ b/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
===================== */
diff --git a/lab/lab2/part3-application.html b/lab/lab2/part3-application.html
index aae25f4..2d7a891 100644
--- a/lab/lab2/part3-application.html
+++ b/lab/lab2/part3-application.html
@@ -8,6 +8,8 @@
+ Filter police call data using the police District
+
Numeric filter: to