From cb900fb3c97658d1b12379247e640932cf689020 Mon Sep 17 00:00:00 2001 From: Dave Date: Fri, 15 Feb 2019 13:55:05 -0500 Subject: [PATCH 1/3] Lab2-part1 complete gitstatus --- lab/lab1/part1.js | 21 +++++++++++++-------- lab/lab2/js/part1-ajax-calls.js | 25 ++++++++++++++++++++++--- 2 files changed, 35 insertions(+), 11 deletions(-) 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); +}; /* ===================== From 1686549908c946dfab3ba17fda21859bdc875e9e Mon Sep 17 00:00:00 2001 From: Dave Date: Fri, 15 Feb 2019 14:41:01 -0500 Subject: [PATCH 2/3] Lab2 part 2 --- lab/lab2/js/part2-app-state.js | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) 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); }); From 3b5cf1ed97d7af8b5ceb72325017a01bd4afc0ea Mon Sep 17 00:00:00 2001 From: Dave Date: Fri, 15 Feb 2019 16:47:11 -0500 Subject: [PATCH 3/3] Finally complete --- lab/lab2/js/part3-application.js | 37 ++++++++++++++++++++++++++------ lab/lab2/part3-application.html | 2 ++ 2 files changed, 33 insertions(+), 6 deletions(-) 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