From 2ba9bbc2c24abfe3c2ea9a10d5b95ec5d8b276b7 Mon Sep 17 00:00:00 2001 From: LiZhuang214 Date: Thu, 14 Feb 2019 21:26:23 -0500 Subject: [PATCH 1/4] HW4 LAB1+2 Part1,2 --- lab/lab1/part1.js | 19 +++++++++------- lab/lab2/js/part1-ajax-calls.js | 18 ++++++++++++++-- lab/lab2/js/part2-app-state.js | 37 ++++++++++++++++++++++++++------ lab/lab2/js/part3-application.js | 31 ++++++++++++++++++++++++-- 4 files changed, 87 insertions(+), 18 deletions(-) diff --git a/lab/lab1/part1.js b/lab/lab1/part1.js index da84f3d..0602c8c 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(bakedGoods[0]); 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,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,15 +107,16 @@ 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); /* ===================== Use _.groupBy to organize the baked goods by type. ===================== */ -var query7; +var 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..041189d 100644 --- a/lab/lab2/js/part1-ajax-calls.js +++ b/lab/lab2/js/part1-ajax-calls.js @@ -90,8 +90,8 @@ console.log("fizzbuzz success:", It will just log undefined to the console. ===================== */ -var phillySolarInstallationDataUrl = "https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-solar-installations.json"; -var phillyCrimeDataUrl = "https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-crime-snippet.json"; +//var phillySolarInstallationDataUrl = "https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-solar-installations.json"; +//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"; @@ -103,6 +103,20 @@ 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 dataDownload= $.ajax({ + url: "https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-bike-crashes-snippet.json", +}) + .done(function( msg ) { + console.log('in it'); + //alert( "Data Saved: " + msg ); + var parseData = JSON.parse(msg); + console.log(parseData); + var layerGroup = L.featureGroup().addTo(map); + plotMap = (dataDownload) => _.forEach(dataDownload, function(x){ + L.marker([x.lat_final, x.long_final]).addTo(layerGroup);}); + plotMap(parseData); + }); +console.log('out of it'); /* ===================== diff --git a/lab/lab2/js/part2-app-state.js b/lab/lab2/js/part2-app-state.js index e342fe3..90c8664 100644 --- a/lab/lab2/js/part2-app-state.js +++ b/lab/lab2/js/part2-app-state.js @@ -34,12 +34,29 @@ ===================== */ // We set this to HTTP to prevent 'CORS' issues -var downloadData = $.ajax("http://"); +/* +var downloadData = $.ajax("https://"); var parseData = function() {}; var makeMarkers = function() {}; var plotMarkers = function() {}; - - +*/ + +var downloadData= $.ajax("https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-bike-crashes-snippet.json"); +var parseData = function(webdata) { + return JSON.parse(webdata); +}; +var makeMarkers = function(crashdata) { + var markers = []; + _.each(crashdata, function(obj){ + markers.push(L.marker([obj.lat_final, obj.long_final])); + }); + return markers; +}; +var plotMarkers = function(markers) { + _.each(markers, function(marker){ + marker.addTo(map); + }); +}; /* ===================== Define the function removeData so that it clears the markers you've written from the map. You'll know you've succeeded when the markers that were @@ -52,9 +69,17 @@ var plotMarkers = function() {}; In real applications, this will typically happen in response to changes to the user's input. ===================== */ - -var removeMarkers = function() {}; - +var removeMarkers = function(markers) { + _.each(markers, function(marker){ + map.removeLayer(marker); + }); +}; +//removeMarkers(parseData); +/* +var removeMarkers = function(condition) { + map.removeLayer(marker); +}; +removeMarkers(parseData);*/ /* ===================== Optional, stretch goal Write the necessary code (however you can) to plot a filtered down version of diff --git a/lab/lab2/js/part3-application.js b/lab/lab2/js/part3-application.js index 8572d7d..d9a9bb9 100644 --- a/lab/lab2/js/part3-application.js +++ b/lab/lab2/js/part3-application.js @@ -28,6 +28,9 @@ Define a resetMap function to remove markers from the map and clear the array of markers ===================== */ var resetMap = function() { + _.each(markers, function(marker){ + map.removeLayer(marker); + }); /* ===================== Fill out this function definition ===================== */ @@ -38,18 +41,42 @@ var resetMap = function() { will be called as soon as the application starts. Be sure to parse your data once you've pulled it down! ===================== */ +var bikeCrashPhillyUrl = "https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-bike-crashes-snippet.json"; + var getAndParseData = function() { + bikedata=$.ajax(bikeCrashPhillyUrl) + .done(function(bikedata){ + var mydata=JSON.parse(bikedata); + console.log(mydata); + console.log('done?'); + }); + }; + console.log(mydata);//????????not defined /* ===================== Fill out this function definition ===================== */ -}; + + +var myfilter=[]; //filter year, police agc and dringking or not +_.each(mydata, function(crash){ + if(crash.CRASH_YEAR>=numericField1&& + crash.CRASH_YEAR<=numericField2 && + crash.POLICE_AGC== stringField && + (crash.DRINKING_D==1)==booleanField) { + myfilter.push(crash); + } return myfilter; +}); //NOT ABLE TO ACCESS mydata... + /* ===================== 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() { + markers=_.each(myfilter(mydata), function(x){ + L.marker([x.lat_final,x.long_final]).addTo(map).bindPopup(x.DRINKING_D); + }); + }; /* ===================== Fill out this function definition ===================== */ -}; From c174dd2973e27c28964e5958369a987e8dffad50 Mon Sep 17 00:00:00 2001 From: LiZhuang214 Date: Thu, 28 Feb 2019 22:48:32 -0500 Subject: [PATCH 2/4] part3_incomplete --- lab/lab2/js/part3-application.js | 38 +++++++++++++++++++++++--------- 1 file changed, 27 insertions(+), 11 deletions(-) diff --git a/lab/lab2/js/part3-application.js b/lab/lab2/js/part3-application.js index d9a9bb9..dc6c900 100644 --- a/lab/lab2/js/part3-application.js +++ b/lab/lab2/js/part3-application.js @@ -43,20 +43,22 @@ var resetMap = function() { ===================== */ var bikeCrashPhillyUrl = "https://raw.githubusercontent.com/CPLN692-MUSA611/datasets/master/json/philadelphia-bike-crashes-snippet.json"; -var getAndParseData = function() { - bikedata=$.ajax(bikeCrashPhillyUrl) - .done(function(bikedata){ - var mydata=JSON.parse(bikedata); - console.log(mydata); - console.log('done?'); - }); - }; - console.log(mydata);//????????not defined /* ===================== Fill out this function definition ===================== */ - + // its essential to define mydata out of the scope of ajax function below + var mydata; + var getAndParseData = function() { + bikedata=$.ajax(bikeCrashPhillyUrl) + .done(function(bikedata){ + mydata=JSON.parse(bikedata); + console.log(mydata); + console.log('done?'); + }); + }; + console.log(mydata);//????????not defined``` +/* var myfilter=[]; //filter year, police agc and dringking or not _.each(mydata, function(crash){ if(crash.CRASH_YEAR>=numericField1&& @@ -72,8 +74,22 @@ _.each(mydata, function(crash){ 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) ===================== */ + + //filter year, police agc and dringking or not + +var myfilter =function (crash){ + var myfilter=[]; + _.each(mydata, function(crash){ + if(crash.CRASH_YEAR>=numericField1&& + crash.CRASH_YEAR<=numericField2 && + crash.POLICE_AGC== stringField && + (crash.DRINKING_D==1)==booleanField) { + myfilter.push(crash); + }return myfilter})}; //The filter does not seem to work + + var plotData = function() { - markers=_.each(myfilter(mydata), function(x){ + marker=_.each(myfilter(mydata), function(x){ L.marker([x.lat_final,x.long_final]).addTo(map).bindPopup(x.DRINKING_D); }); }; From 98744140d8547482c123eac8306738b17d2694f5 Mon Sep 17 00:00:00 2001 From: Li Zhuang Date: Fri, 1 Mar 2019 14:11:25 -0500 Subject: [PATCH 3/4] part 3 modifications done --- lab/lab2/js/part3-application.js | 6 +++--- lab/lab2/js/part3-main.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/lab/lab2/js/part3-application.js b/lab/lab2/js/part3-application.js index dc6c900..03f21cd 100644 --- a/lab/lab2/js/part3-application.js +++ b/lab/lab2/js/part3-application.js @@ -85,13 +85,13 @@ var myfilter =function (crash){ crash.POLICE_AGC== stringField && (crash.DRINKING_D==1)==booleanField) { myfilter.push(crash); - }return myfilter})}; //The filter does not seem to work + }return myfilter})}; //The filter does not seem to work */ var plotData = function() { - marker=_.each(myfilter(mydata), function(x){ + markers=_.each(mydata, function(x){ L.marker([x.lat_final,x.long_final]).addTo(map).bindPopup(x.DRINKING_D); - }); + }); }; /* ===================== Fill out this function definition diff --git a/lab/lab2/js/part3-main.js b/lab/lab2/js/part3-main.js index 3bb49e3..82ccb72 100644 --- a/lab/lab2/js/part3-main.js +++ b/lab/lab2/js/part3-main.js @@ -29,7 +29,7 @@ $('button#my-button').click(function(e) { Call our resetMap function to remove markers from the map and clear out the array of marker objects ===================== */ - resetMap(); + //resetMap(); /* ===================== Call our plotData function. It should plot all the markers that meet our criteria From 650f50657b20eef327d4ad064b0a5c7842ff5dc5 Mon Sep 17 00:00:00 2001 From: Li Zhuang Date: Fri, 1 Mar 2019 14:11:58 -0500 Subject: [PATCH 4/4] part 3 done --- lab/lab2/js/part3-main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lab/lab2/js/part3-main.js b/lab/lab2/js/part3-main.js index 82ccb72..3bb49e3 100644 --- a/lab/lab2/js/part3-main.js +++ b/lab/lab2/js/part3-main.js @@ -29,7 +29,7 @@ $('button#my-button').click(function(e) { Call our resetMap function to remove markers from the map and clear out the array of marker objects ===================== */ - //resetMap(); + resetMap(); /* ===================== Call our plotData function. It should plot all the markers that meet our criteria