From 1f06b0c583e33a9e49ef79bbab028d6aba058f0d Mon Sep 17 00:00:00 2001 From: Zixuan Xu Date: Tue, 12 Feb 2019 01:03:48 -0500 Subject: [PATCH] HW4-Zixuan Xu --- example/js/indego-bike.js | 2 +- lab/lab1/part1.js | 21 +++++++++++-------- lab/lab2/js/part1-ajax-calls.js | 35 +++++++++++++++++++++++++++----- lab/lab2/js/part2-app-state.js | 27 +++++++++++++++++++----- lab/lab2/js/part3-application.js | 22 ++++++++++++++++++-- lab/lab2/part3-application.html | 6 +++--- 6 files changed, 89 insertions(+), 24 deletions(-) diff --git a/example/js/indego-bike.js b/example/js/indego-bike.js index 3a5f971..c132412 100644 --- a/example/js/indego-bike.js +++ b/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 diff --git a/lab/lab1/part1.js b/lab/lab1/part1.js index da84f3d..e248b7b 100644 --- a/lab/lab1/part1.js +++ b/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,7 +82,7 @@ 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); @@ -89,7 +90,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 +98,9 @@ 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); @@ -105,7 +108,9 @@ 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); @@ -113,7 +118,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, 'type'); console.log('Grouped by type:', query7); @@ -137,7 +142,7 @@ Rye ... $5.09 Whole Wheat ... $4.49 ===================== */ -// printMenu(query7); +printMenu(query7); /* ===================== Stretch Goal: diff --git a/lab/lab2/js/part1-ajax-calls.js b/lab/lab2/js/part1-ajax-calls.js index 575a13c..3640472 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,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 diff --git a/lab/lab2/js/part2-app-state.js b/lab/lab2/js/part2-app-state.js index e342fe3..4c6eaed 100644 --- a/lab/lab2/js/part2-app-state.js +++ b/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 diff --git a/lab/lab2/js/part3-application.js b/lab/lab2/js/part3-application.js index 8572d7d..13813b8 100644 --- a/lab/lab2/js/part3-application.js +++ b/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 ===================== */ diff --git a/lab/lab2/part3-application.html b/lab/lab2/part3-application.html index aae25f4..1601566 100644 --- a/lab/lab2/part3-application.html +++ b/lab/lab2/part3-application.html @@ -9,11 +9,11 @@

- Numeric filter: to + PSA: to
- String filter: + Crime Category:
- Boolean filter: + Thefts: