From cbca00454f07d9447bafd2553b4cb0fee298cff5 Mon Sep 17 00:00:00 2001 From: Yufei Yuan Date: Fri, 15 Feb 2019 14:07:55 +0000 Subject: [PATCH 1/2] Yufei Yuan-Assignment 4 --- lab/lab1/part1.js | 14 +++++++------- lab/lab2/js/part1-ajax-calls.js | 14 ++++++++------ lab/lab2/js/part2-app-state.js | 24 ++++++++++++++++-------- lab/lab2/js/part3-application.js | 14 +++++++++----- 4 files changed, 40 insertions(+), 26 deletions(-) diff --git a/lab/lab1/part1.js b/lab/lab1/part1.js index da84f3d..84e1856 100644 --- a/lab/lab1/part1.js +++ b/lab/lab1/part1.js @@ -64,7 +64,7 @@ to true. ===================== */ var query1; - +query1 = _.isFunction(printMenu); console.log('printMenu is a function:', query1); /* ===================== @@ -73,7 +73,7 @@ to true. ===================== */ var query2; - +query2 = _.isArray(bakedGoods); console.log('bakedGoods is an array:', query2); /* ===================== @@ -82,7 +82,7 @@ underscore. Should evaluate to true. ===================== */ var query3; - +query3 = _isObject(_.first(bakedGoods)); console.log('The first element in bakedGoods is an object:', query3); /* ===================== @@ -90,7 +90,7 @@ 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); /* ===================== @@ -98,7 +98,7 @@ Use _.filter to return all baked goods that cost more than $4. ===================== */ var query5; - +query5 = ._filter(bakedGoods, function(obj) {return obj.price>4;}); console.log('More than $4:', query5); /* ===================== @@ -106,7 +106,7 @@ Use _.sortBy to order the list by inventory (from lowest to highest). ===================== */ var query6; - +query6 = _.sortBy(bakedGoods, bakedGoods, 'inventory'); console.log('Sorted by inventory (lowest to highest):', query6); /* ===================== @@ -114,7 +114,7 @@ Use _.groupBy to organize the baked goods by type. ===================== */ var query7; - +query7 = _.groupBy(bakedGoods, 'type'); console.log('Grouped by type:', query7); /* ===================== diff --git a/lab/lab2/js/part1-ajax-calls.js b/lab/lab2/js/part1-ajax-calls.js index 575a13c..81c9104 100644 --- a/lab/lab2/js/part1-ajax-calls.js +++ b/lab/lab2/js/part1-ajax-calls.js @@ -19,7 +19,7 @@ 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 +30,15 @@ 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) {return (num * 2);}; var theArray = [1, 5, 20, 100]; - +console.log(_.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'; } @@ -103,13 +103,15 @@ 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! ===================== */ - +$.ajax(phillySolarInstallationDataUrl).done(function(a){ + var solarInstallation=JSON.parse(a); + console.log(solarInstallation); /* ===================== Now that you've properly parsed your data, use _.each to plot the dataset you've pulled down. ===================== */ - +_.each(solarInstallation, function(i){L.marker([i.Lat, i.Lng]).addTo(map);}); /* ===================== Leaflet setup - feel free to ignore this diff --git a/lab/lab2/js/part2-app-state.js b/lab/lab2/js/part2-app-state.js index e342fe3..ac5f3e5 100644 --- a/lab/lab2/js/part2-app-state.js +++ b/lab/lab2/js/part2-app-state.js @@ -1,4 +1,4 @@ -/* ===================== + /* ===================== Lab 2, part 2 - application state Spatial applications aren't typically as simple as putting data on a map. In @@ -34,10 +34,17 @@ ===================== */ // 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("datasets/geojson/HousingCounselingAgencies.geojson"); +var parseData = function(data) { + return JSON.parse(data); +}; +var makeAMarker = function(list) { + var listOfMarkers=[]; + _.each(list, function(obj){listOfMarkers.push(L.marker([obj.Lat, obj.Lng]));}); + return listOfMarkers; +}; +var plotMarkers = function(list) {_.each(list, function(obj){obj.addTo(map);}); +}; /* ===================== @@ -53,7 +60,7 @@ var plotMarkers = function() {}; user's input. ===================== */ -var removeMarkers = function() {}; +var removeMarkers = function(list) {_.each(list, function(obj){map.removeLayer(obj);});}; /* ===================== Optional, stretch goal @@ -85,7 +92,8 @@ var Stamen_TonerLite = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/ton downloadData.done(function(data) { var parsed = parseData(data); - var markers = makeMarkers(parsed); + var markers = makeAMarker(parsed); + var markersFilter = function(listNotFiltered){_.filter(listNotFiltered, function(a){return a.HOUSE<2000;});}; plotMarkers(markers); - removeMarkers(markers); + removeMarkers(markersFilter(markers)); }); diff --git a/lab/lab2/js/part3-application.js b/lab/lab2/js/part3-application.js index 8572d7d..5001c7c 100644 --- a/lab/lab2/js/part3-application.js +++ b/lab/lab2/js/part3-application.js @@ -31,25 +31,29 @@ var resetMap = function() { /* ===================== Fill out this function definition ===================== */ + resetMap(); }; - /* ===================== 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 downloadData = $.ajax("datasets/geojson/philadelphia-crime-points.geojson"); +var getParseData = function(data) {return JSON.parse(data);}; /* ===================== Fill out this function definition ===================== */ +var makeAMarker = function(data) { + var listOfMarkers=[]; + _.each(list, function(obj){listOfMarkers.push(L.marker([obj.Lat, obj.Lng]));}); + return listOfMarkers; }; - +var markersFiltered = function(b){_.filter(listOfMarkers, function(b){return b.text_general_code === "Theft from Vehicle";});}; +_.each(markersFiltered, function(d){L.marker([d.Lat, d.Lng]).addTo(map.bindPopup("Theft from Vehicle:" + String(c.location_block)));}) /* ===================== 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 plotData = function() { /* ===================== Fill out this function definition ===================== */ -}; From 230d0ddc65a937247dde1c226befe3cb9ab174c2 Mon Sep 17 00:00:00 2001 From: Yufei Yuan Date: Sun, 12 May 2019 22:58:15 -0400 Subject: [PATCH 2/2] YufeiY_Week4_Change --- lab/lab1/part1.js | 4 +-- lab/lab2/js/part1-ajax-calls.js | 14 +++++----- lab/lab2/js/part2-app-state.js | 4 +-- lab/lab2/js/part3-application.js | 45 +++++++++++++++++++++----------- lab/lab2/part3-application.html | 6 ++--- 5 files changed, 44 insertions(+), 29 deletions(-) diff --git a/lab/lab1/part1.js b/lab/lab1/part1.js index 84e1856..dac3b01 100644 --- a/lab/lab1/part1.js +++ b/lab/lab1/part1.js @@ -82,7 +82,7 @@ underscore. Should evaluate to true. ===================== */ var query3; -query3 = _isObject(_.first(bakedGoods)); +query3 = _.isObject(_.first(bakedGoods)); console.log('The first element in bakedGoods is an object:', query3); /* ===================== @@ -98,7 +98,7 @@ Use _.filter to return all baked goods that cost more than $4. ===================== */ var query5; -query5 = ._filter(bakedGoods, function(obj) {return obj.price>4;}); +query5 = _.filter(bakedGoods, function(obj) {return obj.price>4;}); console.log('More than $4:', query5); /* ===================== diff --git a/lab/lab2/js/part1-ajax-calls.js b/lab/lab2/js/part1-ajax-calls.js index 81c9104..c4f3c5b 100644 --- a/lab/lab2/js/part1-ajax-calls.js +++ b/lab/lab2/js/part1-ajax-calls.js @@ -30,9 +30,9 @@ 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) {return (num * 2);}; +var logDouble = function(num) {console.log(num * 2);}; var theArray = [1, 5, 20, 100]; -console.log(_.each(theArray, logDouble) +_.each(theArray, logDouble) /* ===================== Given this already defined function, define fizzbuzzArray so that, when mapped @@ -103,16 +103,16 @@ 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! ===================== */ -$.ajax(phillySolarInstallationDataUrl).done(function(a){ - var solarInstallation=JSON.parse(a); - console.log(solarInstallation); +$.ajax(phillyBikeCrashesDataUrl).done(function(a){ + var json = JSON.parse(a); + /* ===================== Now that you've properly parsed your data, use _.each to plot the dataset you've pulled down. ===================== */ -_.each(solarInstallation, function(i){L.marker([i.Lat, i.Lng]).addTo(map);}); - +_.each(json, function(i){L.marker([i.lat_final, i.long_final]).addTo(map);}); +}); /* ===================== Leaflet setup - feel free to ignore this ===================== */ diff --git a/lab/lab2/js/part2-app-state.js b/lab/lab2/js/part2-app-state.js index ac5f3e5..ea206bf 100644 --- a/lab/lab2/js/part2-app-state.js +++ b/lab/lab2/js/part2-app-state.js @@ -34,13 +34,13 @@ ===================== */ // We set this to HTTP to prevent 'CORS' issues -var downloadData = $.ajax("datasets/geojson/HousingCounselingAgencies.geojson"); +var downloadData = $.ajax("http://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-bike-crashes-snippet.json"); var parseData = function(data) { return JSON.parse(data); }; var makeAMarker = function(list) { var listOfMarkers=[]; - _.each(list, function(obj){listOfMarkers.push(L.marker([obj.Lat, obj.Lng]));}); + _.each(list, function(obj){listOfMarkers.push(L.marker([obj.lat_final, obj.long_final]));}); return listOfMarkers; }; var plotMarkers = function(list) {_.each(list, function(obj){obj.addTo(map);}); diff --git a/lab/lab2/js/part3-application.js b/lab/lab2/js/part3-application.js index 5001c7c..dba076f 100644 --- a/lab/lab2/js/part3-application.js +++ b/lab/lab2/js/part3-application.js @@ -31,29 +31,44 @@ var resetMap = function() { /* ===================== Fill out this function definition ===================== */ - resetMap(); + _.each(myMarkers, function(obj) { + map.removeLayer(obj); + }); }; /* ===================== 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 downloadData = $.ajax("datasets/geojson/philadelphia-crime-points.geojson"); -var getParseData = function(data) {return JSON.parse(data);}; - /* ===================== - Fill out this function definition - ===================== */ -var makeAMarker = function(data) { - var listOfMarkers=[]; - _.each(list, function(obj){listOfMarkers.push(L.marker([obj.Lat, obj.Lng]));}); - return listOfMarkers; +var dataSet = "https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-solar-installations.json"; +var getAndParseData = function() { + $.ajax(dataSet).done(function(data) { + myData = JSON.parse(data); + }); +}; +/* ===================== + Fill out this function definition +===================== */ +var plotData = function() { + _.each(myData, function(feature) { + var marker = L.marker([feature.LAT, feature.LONG_]).bindPopup(feature.NAME).setOpacity(0); + if (feature.ZIPCODE>numericField1 && feature.ZIPCODE

- Numeric filter: to + ZIP CODE Between: to
- String filter: + Type in ZIP CODE:
- Boolean filter: + In ZIP CODE 19147: