2a:null 2b:["$","title",null,{"children":"Task of week 1 (6th-13th October) | Stephanie Adeline | Observable"}] 30:T4c2,This week, we have done an introductory class to the basic tools that we will use during the course. The tools comprise: - Observable - HTML - SVG - Javascript Take a look at different notebooks if you want to learn more about Observable (an excellent starting point is [here](https://observablehq.com/@observablehq/user-manual)). There are many more references for HTML, SVG, and Javascript (for instance, [here](https://www.w3schools.com/default.asp)). From now on, I will assume that you have a good understanding of these tools. So, the task of this week will consist of the manipulation of toy data (**cars dataset**, see the next cell). From the raw data, you will have to filter it according to the values of some parameters (origin and minimum and maximum horsepower, use selectors and sliders for that), to sort according to weight (from the heaviest to the lightest), and to show the first 20 results on a (HTML) list (you can show the name of the car and some key information). Also, the average acceleration of the 20 selected cars will have to be shown. (*HINT*: try to use only [array functions](https://developer.mozilla.org/ca/docs/Web/JavaScript/Referencia/Objectes_globals/Array), without loops) 31:[] 2e:{"id":"438d00117447568f","slug":"task-of-week-1-6th-13th-october","title":"Task of week 1 (6th-13th October)","thumbnail":"ea994a071bc49cca599fe049265d3f0e024632568e7994bc6f801e012a9677ed","access_level":"public","create_time":"$D2022-10-06T17:07:40.015Z","update_time":"$D2022-10-13T04:23:46.160Z","view_time":null,"first_public_time":"$D2022-10-10T15:15:53.198Z","has_unpublished_edits":null,"fork":{"id":"ccfd12b1bcdbac80","slug":"task-of-week-1-6th-13th-october","title":"Task of week 1 (6th-13th October)","owner":{"id":"dc63de81f2766bde","login":"antonbardera","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"15a59822afb543e3","login":"stephadeline","name":"Stephanie Adeline","avatar_url":"https://avatars-next.observableusercontent.com/2db225f104edbb9e1912a1455cb4d8f13b7a0b656c8cc9003f89ee4fe95d52b4","tier":"starter_2024"},"version":270,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06571e2fdc13d6c9","login":"stephadeline","name":"Stephanie Adeline","avatar_url":"https://avatars-next.observableusercontent.com/2db225f104edbb9e1912a1455cb4d8f13b7a0b656c8cc9003f89ee4fe95d52b4","tier":null}],"members":[{"type":"individual","id":"06571e2fdc13d6c9","login":"stephadeline","name":"Stephanie Adeline","avatar_url":"https://avatars-next.observableusercontent.com/2db225f104edbb9e1912a1455cb4d8f13b7a0b656c8cc9003f89ee4fe95d52b4","tier":null,"role":"editor"}],"comments":[{"id":"eb6319c49e892783","reply_to_id":null,"content":"Using the arrow notation, you could rewrite this call as:\nfilteredData = cars.filter(d => d['Horsepower'] >= form.minSelect && d['Horsepower'] <= form.maxSelect && form.originSelect.includes(d['Origin']));","create_time":"$D2022-10-24T08:58:41.187Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"09c368f2d90e0876","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":null}},{"id":"1bfb459acc7019d3","reply_to_id":null,"content":"Excellent job!!!","create_time":"$D2022-10-24T08:59:22.933Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"09c368f2d90e0876","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Task of week 1 (6th-13th October)","cells":[{"id":0,"value":"# Task of week 1 (6th-13th October)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"cars = require(\"@observablehq/cars\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"## Filtering","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"Use the selectors below to filter based on min, max horsepower and origin countries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"viewof form = Inputs.form({\n minSelect: Inputs.range([0, maxHorsepower], {label: \"Minimum Horsepower\", step: 1, value: 0}),\n maxSelect: Inputs.range([0, maxHorsepower], {label: \"Maximum Horsepower\", step: 1, value: 230}),\n originSelect: Inputs.checkbox(originCountries, {label: \"Origin\", value: originCountries})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"The resulting filtered data is below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":105,"value":"filteredData = cars.filter(d => {\n return d['Horsepower'] >= form.minSelect &&\n d['Horsepower'] <= form.maxSelect &&\n form.originSelect.includes(d['Origin']);\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"Here's that filtered data in a table, to check.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":258,"value":"Inputs.table(filteredData);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"## Sorting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":175,"value":"Use the options below to select to sort from heaviest to lightest or lightest to heaviest. This selector will change the data below, as well as the list and table further down.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":139,"value":"viewof sortOrder = Inputs.radio([\"Heaviest\", \"Lightest\"], {label: \"Sort from\", value: \"Heaviest\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"sortedData = cars.sort(function (a,b) {\n if (sortOrder === \"Heaviest\") {\n return b['Weight_in_lbs'] - a['Weight_in_lbs'];\n } else if (sortOrder === \"Lightest\") {\n return a['Weight_in_lbs'] - b['Weight_in_lbs'];\n }\n});\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"Here's that sorted data in a table, to check.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":260,"value":"Inputs.table(sortedData);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"## Top 20 results","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"From the data that has been sorted above, we now want to take only the top 20 results.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"top20Data = sortedData.slice(0, 20);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"Then we want to calculate the average of the acceleration for those 20 results, using the reduce function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":245,"value":"avgAcceleration = top20Data.reduce((accum, d) => (accum + d[\"Acceleration\"]), 0) / top20Data.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"Here is that data in an ordered list. The average acceleration is shown below the list.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"

\n Name: ${car[\"Name\"]},\n Acceleration: ${car[\"Acceleration\"]},\n Weight in lbs: ${car[\"Weight_in_lbs\"]},\n Origin: ${car[\"Origin\"]}\n

\n\n

Average acceleration: ${avgAcceleration}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":231,"value":"Here is that same data in a table. The average acceleration is shown below the table too.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":207,"value":"\n \n \n \n \n \n \n \n \n \n ${top20Data.map(car => htl.html`\n \n \n \n \n `)}\n \n

Name	Acceleration	Weight (in lbs)	Origin
${car[\"Name\"]}	${car[\"Acceleration\"]}	${car[\"Weight_in_lbs\"]}	${car[\"Origin\"]}

\n\n

Average acceleration: ${avgAcceleration}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"originCountries = [...new Set(cars.map(d => d.Origin))];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"horsepowerValues = [...new Set(cars.map(d => d.Horsepower))];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"maxHorsepower = Math.max(...horsepowerValues);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"