From ba5c420723b7d16a35d5ae565a664f6695aa74b5 Mon Sep 17 00:00:00 2001 From: Shuchangd <52063883+Shuchangd@users.noreply.github.com> Date: Tue, 11 Feb 2020 10:45:18 -0500 Subject: [PATCH 1/4] inclass_practice --- lab/lab1/part1.js | 12 ++++++++++++ lab/lab2/js/part2-app-state.js | 3 ++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/lab/lab1/part1.js b/lab/lab1/part1.js index 20d7636..4b89682 100644 --- a/lab/lab1/part1.js +++ b/lab/lab1/part1.js @@ -68,6 +68,8 @@ to true. var query1; +query1 = _.isFunction(printMenu); + console.log('printMenu is a function:', query1); /* ===================== @@ -77,6 +79,8 @@ to true. var query2; +query2 = _.isArray(bakedGoods); + console.log('bakedGoods is an array:', query2); /* ===================== @@ -86,6 +90,8 @@ underscore. Should evaluate to true. var query3; +query3 = _.isObject(bakedGoods[0]); + console.log('The first element in bakedGoods is an object:', query3); /* ===================== @@ -94,6 +100,8 @@ 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); /* ===================== @@ -102,6 +110,8 @@ Use _.filter to return all baked goods that cost more than $4. var query5; +query5 = _.filter(bakedGoods, function(arr){return arr.price > 4}); + console.log('More than $4:', query5); /* ===================== @@ -110,6 +120,8 @@ Use _.sortBy to order the list by inventory (from lowest to highest). var query6; +query6 = _.sortBy(bakedGoods,'inventory'); + console.log('Sorted by inventory (lowest to highest):', query6); /* ===================== diff --git a/lab/lab2/js/part2-app-state.js b/lab/lab2/js/part2-app-state.js index 1ef6e76..01f8371 100644 --- a/lab/lab2/js/part2-app-state.js +++ b/lab/lab2/js/part2-app-state.js @@ -33,7 +33,8 @@ ===================== */ // Use the data source URL from lab 1 in this 'ajax' function: -var downloadData = $.ajax("http://"); +var downloadData = $.ajax("https://raw.githubusercontent.com/MUSA611-CPLN692-spring2020/datasets/master/json/philadelphia-solar-installations.json"); +downloadData.done(console.log); // Write a function to prepare your data (clean it up, organize it // as you like, create fields, etc) From 142be50a261b7e2c675d121f6404557f35ba2d44 Mon Sep 17 00:00:00 2001 From: Shuchangd <52063883+Shuchangd@users.noreply.github.com> Date: Thu, 13 Feb 2020 23:07:02 -0500 Subject: [PATCH 2/4] finished lab2 part 1,2,3 --- lab/lab1/part1.js | 33 +++++++++++++++- lab/lab2/js/part1-ajax-calls.js | 5 ++- lab/lab2/js/part2-app-state.js | 49 +++++++++++++++++++---- lab/lab2/js/part3-application.js | 68 ++++++++++++++++++++++++++++++-- lab/lab2/js/part3-main.js | 2 +- lab/lab2/part3-application.html | 8 ++-- 6 files changed, 148 insertions(+), 17 deletions(-) diff --git a/lab/lab1/part1.js b/lab/lab1/part1.js index 4b89682..95ea10b 100644 --- a/lab/lab1/part1.js +++ b/lab/lab1/part1.js @@ -130,6 +130,8 @@ Use _.groupBy to organize the baked goods by type. var query7; +query7 = _.groupBy(bakedGoods,'type'); + console.log('Grouped by type:', query7); /* ===================== @@ -153,7 +155,36 @@ Whole Wheat ... $4.49 ===================== */ -// printMenu2(query7); + //Solution 1: without using _.template + +function printMenu1(obj){ + var keys = Object.keys(obj); + for(var i = 0; i < keys.length; i++){ + var key = keys[i]; + console.log(key); + for (var j = 0; j < obj[key].length; j++) { + console.log(obj[key][j].name + "... $" + obj[key][j].price); + } + } +} + +printMenu1(query7); + +// Solution 2: Using _.template + +function printMenu2(obj){ + var keys = Object.keys(obj); + for(var i = 0; i < keys.length; i++){ + var key = keys[i]; + console.log(key); + for (var j = 0; j < obj[key].length; j++) { + var compiled = _.template("<% print(name + '... $' + price); %>"); + console.log(compiled(obj[key][j])); + } + } +} + +printMenu2(query7); /* ===================== Stretch Goal (seriously, this is a bit tough at first!): diff --git a/lab/lab2/js/part1-ajax-calls.js b/lab/lab2/js/part1-ajax-calls.js index b039804..28b57c8 100644 --- a/lab/lab2/js/part1-ajax-calls.js +++ b/lab/lab2/js/part1-ajax-calls.js @@ -8,4 +8,7 @@ var Stamen_TonerLite = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/ton minZoom: 0, maxZoom: 20, ext: 'png' -}).addTo(map); +}).addTo(map); + +var downloadData = $.ajax("https://raw.githubusercontent.com/MUSA611-CPLN692-spring2020/datasets/master/json/philadelphia-solar-installations.json"); +downloadData.done(console.log); diff --git a/lab/lab2/js/part2-app-state.js b/lab/lab2/js/part2-app-state.js index 01f8371..ace5829 100644 --- a/lab/lab2/js/part2-app-state.js +++ b/lab/lab2/js/part2-app-state.js @@ -34,19 +34,51 @@ // Use the data source URL from lab 1 in this 'ajax' function: var downloadData = $.ajax("https://raw.githubusercontent.com/MUSA611-CPLN692-spring2020/datasets/master/json/philadelphia-solar-installations.json"); -downloadData.done(console.log); +var parsed_data; // Write a function to prepare your data (clean it up, organize it // as you like, create fields, etc) -var parseData = function() {}; +var parseData = function(data) { + var parsed = JSON.parse(data); + parsed_data = _.map(parsed,function(arr){ + delete arr['LAT','LONG_','THUMB_URL']; + arr.isold = arr.YEARBUILT >= 2010; + arr.islarge = arr.KW > 54; + return arr; + }) + return parsed_data; +}; // Write a function to use your parsed data to create a bunch of // marker objects (don't plot them!) -var makeMarkers = function() {}; +var makeMarkers = function(data) { + var marks = _.map(data, function(arr){ + var color; + if (arr.isold && arr.islarge){ + color = '#0000FF'; + } else if (!arr.isold && arr.islarge) { + color = '#00FF00'; + } else if (arr.isold && !arr.islarge) { + color = '#00F090'; + } else { + color = '##FF0000'; + } + var pathOpts = {'radius': Math.log(arr.KW) * 5, + 'fillColor': color} + var circle = L.circleMarker([arr.Y, arr.X], pathOpts) + .bindPopup(arr.DEVELOPER); + return circle; + }); + return marks; +}; // Now we need a function that takes this collection of markers // and puts them on the map -var plotMarkers = function() {}; +var plotMarkers = function(marks) { + _.map(marks, function(circle){ + circle.addTo(map); + }) +}; // At this point you should see a bunch of markers on your map if // things went well. @@ -67,7 +99,11 @@ var plotMarkers = function() {}; // Look to the bottom of this file and try to reason about what this // function should look like -var removeMarkers = function() {}; +var removeMarkers = function(marks) { + _.map(marks, function(circle){ + map.removeLayer(circle); + }) +}; /* ===================== Optional, stretch goal @@ -97,10 +133,9 @@ var Stamen_TonerLite = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/ton /* ===================== CODE EXECUTED HERE! ===================== */ - downloadData.done(function(data) { var parsed = parseData(data); var markers = makeMarkers(parsed); plotMarkers(markers); - removeMarkers(markers); + //removeMarkers(markers); }); diff --git a/lab/lab2/js/part3-application.js b/lab/lab2/js/part3-application.js index 0b78c27..47fa305 100644 --- a/lab/lab2/js/part3-application.js +++ b/lab/lab2/js/part3-application.js @@ -26,10 +26,14 @@ /* ===================== Define a resetMap function to remove markers from the map and clear the array of markers ===================== */ -var resetMap = function() { +var resetMap = function(marks) { /* ===================== Fill out this function definition - ===================== */ + ===================== */ + _.map(marks, function(circle){ + map.removeLayer(circle); + }); + }; /* ===================== @@ -37,18 +41,76 @@ 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 getAndParseData = function() { +var raw = $.ajax("https://raw.githubusercontent.com/MUSA611-CPLN692-spring2020/datasets/master/json/philadelphia-solar-installations.json"); + +var getAndParseData = function(data) { /* ===================== Fill out this function definition ===================== */ + var parsed = JSON.parse(data); + parsed = _.map(parsed,function(arr){ + delete arr['LAT','LONG_','THUMB_URL']; + arr.isold = arr.YEARBUILT >= 2010; + arr.islarge = arr.KW > 54; + return arr; + }); + return parsed; }; /* ===================== 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 filter_data; +function kwfilter(data,min,max){ + filter_data = _.filter(data, function(arr){ + if(arr.KW > min && arr.KW < max){ + return arr; + } + }) + } +function developer(data,string){ + filter_data = _.filter(data, function(arr){ + if(arr.DEVELOPER.toUpperCase().indexOf(string) >= 0){ + return arr; + } + }) + } +function year2010(data, checker){ + filter_data = _.filter(data, function(arr){ + if(checker){ + if(arr.YEARBUILT < 2010){ + return arr; + } else{ + if(arr.YEARBUILT >= 2010){ + return arr; + } + } + }}) + } + +function plotmarker(data){ + _.map(data, function(arr){ + var pathOpts = {'radius': Math.log(arr.KW) * 5, + 'fillColor': '#0000FF'} + var circle = L.circleMarker([arr.Y, arr.X], pathOpts) + .bindPopup(arr.DEVELOPER).addTo(map); + }) + } + + + var plotData = function() { /* ===================== Fill out this function definition ===================== */ + raw.done(function(data){ + var parse = getAndParseData(data); + kwfilter(parse,numericField1,numericField2); + developer(filter_data,stringField); + year2010(filter_data,booleanField); + console.log(filter_data); + plotmarker(filter_data); + }) + }; diff --git a/lab/lab2/js/part3-main.js b/lab/lab2/js/part3-main.js index b4bda42..55bcf97 100644 --- a/lab/lab2/js/part3-main.js +++ b/lab/lab2/js/part3-main.js @@ -5,7 +5,7 @@ /* ===================== Call getAndParseData to grab our dataset through a jQuery.ajax call ($.ajax) ===================== */ -getAndParseData(); +//getAndParseData(); /* ===================== The code here is triggered when you click on the button with ID #my-button diff --git a/lab/lab2/part3-application.html b/lab/lab2/part3-application.html index d5fd141..ee5fe10 100644 --- a/lab/lab2/part3-application.html +++ b/lab/lab2/part3-application.html @@ -3,17 +3,17 @@ - +

- Numeric filter: to + KW filter: to
- String filter: + Developer filter:
- Boolean filter: + Before 2010?:
From 1e497f9d766f18de8c179f9402313338f92fcb9d Mon Sep 17 00:00:00 2001 From: Shuchangd <52063883+Shuchangd@users.noreply.github.com> Date: Thu, 13 Feb 2020 23:34:54 -0500 Subject: [PATCH 3/4] fix resetmap bug --- lab/lab2/js/part3-application.js | 29 +++++++++++++++++------------ lab/lab2/part3-application.html | 1 + 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/lab/lab2/js/part3-application.js b/lab/lab2/js/part3-application.js index 47fa305..473c580 100644 --- a/lab/lab2/js/part3-application.js +++ b/lab/lab2/js/part3-application.js @@ -26,15 +26,15 @@ /* ===================== Define a resetMap function to remove markers from the map and clear the array of markers ===================== */ -var resetMap = function(marks) { +var resetMap = function() { /* ===================== Fill out this function definition ===================== */ - _.map(marks, function(circle){ + _.map(markers, function(circle){ map.removeLayer(circle); }); -}; +} /* ===================== Define a getAndParseData function to grab our dataset through a jQuery.ajax call ($.ajax). It @@ -50,7 +50,7 @@ var getAndParseData = function(data) { var parsed = JSON.parse(data); parsed = _.map(parsed,function(arr){ delete arr['LAT','LONG_','THUMB_URL']; - arr.isold = arr.YEARBUILT >= 2010; + arr.isold = arr.YEARBUILT < 2010; arr.islarge = arr.KW > 54; return arr; }); @@ -78,23 +78,28 @@ function developer(data,string){ } function year2010(data, checker){ filter_data = _.filter(data, function(arr){ - if(checker){ - if(arr.YEARBUILT < 2010){ + if(checker == true){ + if(arr.isold){ return arr; } else{ - if(arr.YEARBUILT >= 2010){ + if(!arr.isold){ return arr; } } }}) } +var markers; + function plotmarker(data){ - _.map(data, function(arr){ - var pathOpts = {'radius': Math.log(arr.KW) * 5, - 'fillColor': '#0000FF'} - var circle = L.circleMarker([arr.Y, arr.X], pathOpts) - .bindPopup(arr.DEVELOPER).addTo(map); + markers = _.map(data, function(arr){ + var pathOpts = {'radius': Math.log(arr.KW) * 5, + 'fillColor': '#0000FF'} + var circle = L.circleMarker([arr.Y, arr.X], pathOpts).bindPopup(arr.DEVELOPER); + return circle; + }) + _.map(markers, function(arr){ + arr.addTo(map); }) } diff --git a/lab/lab2/part3-application.html b/lab/lab2/part3-application.html index ee5fe10..a7116ca 100644 --- a/lab/lab2/part3-application.html +++ b/lab/lab2/part3-application.html @@ -8,6 +8,7 @@
+
To use this filter, all of the three filters need to be filled with meaningful value.

KW filter: to
From bb2d0e638a263b656b3e7ac521f1becbe9cfc09a Mon Sep 17 00:00:00 2001 From: Shuchangd <52063883+Shuchangd@users.noreply.github.com> Date: Thu, 13 Feb 2020 23:53:59 -0500 Subject: [PATCH 4/4] Fix filterstring bug --- lab/lab2/js/part3-application.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/lab/lab2/js/part3-application.js b/lab/lab2/js/part3-application.js index 473c580..63db971 100644 --- a/lab/lab2/js/part3-application.js +++ b/lab/lab2/js/part3-application.js @@ -71,21 +71,22 @@ function kwfilter(data,min,max){ } function developer(data,string){ filter_data = _.filter(data, function(arr){ - if(arr.DEVELOPER.toUpperCase().indexOf(string) >= 0){ + if(arr.DEVELOPER.indexOf(string) >= 0){ return arr; } }) } function year2010(data, checker){ filter_data = _.filter(data, function(arr){ - if(checker == true){ + if(!checker){ + if(!arr.isold){ + return arr; + } + else { if(arr.isold){ return arr; - } else{ - if(!arr.isold){ - return arr; - } } + } }}) }