2c:null 2d:["$","title",null,{"children":"Task of week 1 (15th-21st October) | Xavier B. | Observable"}] 32:T4e9,md` *Professor's instructions:* 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) --- `33:[] 30:{"id":"d97f6e901df00a99","slug":"task-of-week-1-15th-21st-october","title":"Task of week 1 (15th-21st October)","thumbnail":"52c32cfa7dd0f50faf0149156c0745be7ec45f490a80eefd142ab543ffa29ac9","access_level":"public","create_time":"$D2020-10-22T10:29:26.827Z","update_time":"$D2021-06-23T00:00:20.237Z","view_time":null,"first_public_time":"$D2020-10-22T11:19:18.933Z","has_unpublished_edits":null,"fork":{"id":"a8a32c779dd723b8","slug":"task-of-week-1-15th-21st-october","title":"Task of week 1 (15th-21st October)","owner":{"id":"dc63de81f2766bde","login":"antonbardera","name":""}},"stars":1,"starred":false,"owner":{"type":"team","id":"0df0381955bf1da9","login":"x80110","name":"Xavier B.","avatar_url":"https://avatars-next.observableusercontent.com/9c83aa3d8871a7ab7c57218156f38383132193db6157266d478cff07f8af8a0e","tier":"starter_2024"},"version":289,"publish_version":289,"role":null,"authored":false,"authors":[{"type":"individual","id":"90f34519f98866f3","login":"x80110","name":"Xavier B.","avatar_url":"https://avatars-next.observableusercontent.com/9c83aa3d8871a7ab7c57218156f38383132193db6157266d478cff07f8af8a0e","tier":null}],"members":[{"type":"individual","id":"90f34519f98866f3","login":"x80110","name":"Xavier B.","avatar_url":"https://avatars-next.observableusercontent.com/9c83aa3d8871a7ab7c57218156f38383132193db6157266d478cff07f8af8a0e","tier":null,"role":"editor"}],"comments":[{"id":"7cce1ebe03506e4d","reply_to_id":null,"content":"Excellent job!! Congrats!","create_time":"$D2020-10-25T17:01:16.824Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"09c368f2d90e0876","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":null}},{"id":"f395cb75112e9e83","reply_to_id":"7cce1ebe03506e4d","content":"There's only a minor bug. You create the table from the desiredData array instead of the desiredDataOrigin","create_time":"$D2020-10-25T17:08:59.503Z","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 (15th-21st October)","cells":[{"id":0,"value":"md`# Task of week 1 (15th-21st October)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md `## **Task summary** \nCreate an html list (20 items) of the *cars dataset* with the following features:\n- filterable by origin\n- filterable by minimum <-> maximum horsepower\n- sorted items by descending weight\n- show average acceleration speed of filtered cars\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md `# Cars dataset - Interactive list\nSelect ***country origin*** to fitler results:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"viewof selectedOrigin = html ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"viewof selectedHorsepower = rangeSlider({ min: 0,\n max: 250,\n value: [0 + 20, 250 - 20],\n precision: 0, // how many decimal places\n title: 'Car horsepower',\n display: ([a,b]) => html` ${a}(hp) - ${b}(hp)`,\n})\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md `*To keep the **← range →** static you can slide the blue line*\n\\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"md `The ***average acceleration time*** to reach 60mph speed for selected cars is: **${accelerationAvg.toPrecision(4)} sec.**`\n\n// Dataset unit details → https://www.mldata.io/dataset-details/auto_mpg/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"html `

\n${list}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"md `---\n## Table version`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"html `${table(desiredDataOrigin.slice(0, 20))}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"md `# Appendix\n## Dataset`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"cars = require(\"@observablehq/cars\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md `## Select columns`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"\n// get the desired data for the exercice\ndesiredData = cars.map(d => { \n var newd = {\n name : d[\"Name\"][0].toUpperCase() + d[\"Name\"].slice(1), // conver to capital letters\n year : d[\"Year\"],\n origin : d[\"Origin\"],\n cylinders : d[\"Cylinders\"],\n horsepower : d[\"Horsepower\"],\n weight : d[\"Weight_in_lbs\"],\n\n acceleration : d[\"Acceleration\"],\n\n}\n return newd;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md `## Filter by origin in selector, horsepower in sliders and sort by weight`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"\ndesiredDataOrigin = desiredData.filter(d => { \n d !== null // avoid null data\n return d.origin == selectedOrigin ;}) // filter by origin in selector\n \n .sort((a,b) => {\n return b.weight - a.weight;}) // We sort it by weight\n \n .filter(d => d.horsepower >= selectedHorsepower[0] && d.horsepower <= selectedHorsepower[1]\n);\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"md `## Create html tags for origin selector:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"origins = desiredData.map(car => {\n var value = car['origin'];\n return ``;\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"md `## Create html list`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"list = desiredDataOrigin.map(function (item) {\n\treturn '

' + ' ' + item['name'] \n + ' (' + item['origin'] \n + ', ' + item['year'] + ') - '\n + ' Horsepower: ' + item['horsepower'] \n + ' - Weight: '+ item['weight'] \n + '' ;\n}).slice(0, 20);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"md `## Extra: create table`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"// Build the html table\nfunction table(data) {\n let cols = Object.keys(data[0]);\n\n\n //Map over columns, make headers,join into string\n let headerRow = cols\n .map(col => `${col}`)\n .join(\"\");\n\n //map over array of json objs, for each row(obj) map over column values,\n //and return a td with the value of that object for its column\n //take that array of tds and join them\n //then return a row of the tds\n //finally join all the rows together\n let rows = data\n .map(row => {\n let tds = cols.map(col => `${row[col]}`).join(\"\");\n return `${tds}`;\n })\n .join(\"\");\n\n //build the table\n const table = `\n\t\n\t\t\n\t\t\t${headerRow}\n\t\t\n\t\t\n\t\t\t${rows}\n\t\t\n\t

`;\n\n return table;\n}\n// Source: https://dev.to/boxofcereal/how-to-generate-a-table-from-json-data-with-es6-methods-2eel","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"md `## Average acceleration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"\naccelerationAvg = desiredDataOrigin.reduce((a,b) => a + b.acceleration, 0) / desiredDataOrigin.length\n// reduce is used f\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md `## Maximum horsepower`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":" maxHorsepower = desiredDataOrigin.sort((a, b) => b.horsepower - a.horsepower)[0].horsepower","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md `## Horsepower range slider library`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"