44:null 45:["$","title",null,{"children":"Task of week 1 (6th-13th October) | Guifré Jordan | Observable"}] 4b: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/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array), without loops) 4c:T87d,

The 20 heaviest cars in the market

pontiac safari (sw)
Weight: 5140 lbs
Horsepower: 175
Acceleration: 12
chevrolet impala
Weight: 4997 lbs
Horsepower: 150
Acceleration: 14
dodge monaco (sw)
Weight: 4955 lbs
Horsepower: 180
Acceleration: 11.5
mercury marquis brougham
Weight: 4952 lbs
Horsepower: 198
Acceleration: 11.5
buick electra 225 custom
Weight: 4951 lbs
Horsepower: 225
Acceleration: 11
ford country
Weight: 4906 lbs
Horsepower: 167
Acceleration: 12.5
ford country squire (sw)
Weight: 4746 lbs
Horsepower: 170
Acceleration: 12
chrysler new yorker brougham
Weight: 4735 lbs
Horsepower: 215
Acceleration: 11
hi 1200d
Weight: 4732 lbs
Horsepower: 193
Acceleration: 18.5
buick century luxus (sw)
Weight: 4699 lbs
Horsepower: 150
Acceleration: 14.5
pontiac catalina
Weight: 4668 lbs
Horsepower: 170
Acceleration: 11.5
ford ltd
Weight: 4657 lbs
Horsepower: 148
Acceleration: 13.5
plymouth custom suburb
Weight: 4654 lbs
Horsepower: 170
Acceleration: 13
ford gran torino (sw)
Weight: 4638 lbs
Horsepower: 140
Acceleration: 16
mercury marquis
Weight: 4633 lbs
Horsepower: 208
Acceleration: 11
ford f250
Weight: 4615 lbs
Horsepower: 215
Acceleration: 14
buick lesabre custom
Weight: 4502 lbs
Horsepower: 155
Acceleration: 13.5
oldsmobile vista cruiser
Weight: 4499 lbs
Horsepower: 180
Acceleration: 12.5
plymouth grand fury
Weight: 4498 lbs
Horsepower: 150
Acceleration: 14.5
pontiac catalina brougham
Weight: 4464 lbs
Horsepower: 175
Acceleration: 11.5

The average acceleration of these 20 cars is 12.975 4d:[] 49:{"id":"43988e81681a6b5c","slug":"task-of-week-1-6th-13th-october","title":"Task of week 1 (6th-13th October)","thumbnail":"cf24573700aceeeac5ed141d5ce352b145f2d761aad798028386e0bc2c09b604","access_level":"public","create_time":"$D2022-10-06T19:03:22.241Z","update_time":"$D2022-10-25T10:04:45.339Z","view_time":null,"first_public_time":"$D2022-10-09T22:49:06.894Z","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":"970c903ae2c4bdbb","login":"guifre-jordan","name":"Guifré Jordan","avatar_url":"https://avatars-next.observableusercontent.com/210f94a7e28b5c49caadbc0762de6a201b8a68dc770f1943810e065b41d19f4e","tier":"starter_2024","bio":"","following":false},"version":507,"publish_version":507,"role":null,"authored":false,"authors":[{"type":"individual","id":"eaac211293f8756f","login":"guifre-jordan","name":"Guifré Jordan","avatar_url":"https://avatars-next.observableusercontent.com/210f94a7e28b5c49caadbc0762de6a201b8a68dc770f1943810e065b41d19f4e","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"eaac211293f8756f","login":"guifre-jordan","name":"Guifré Jordan","avatar_url":"https://avatars-next.observableusercontent.com/210f94a7e28b5c49caadbc0762de6a201b8a68dc770f1943810e065b41d19f4e","tier":null,"role":"editor"}],"comments":[{"id":"e4209ecdede6af1f","reply_to_id":null,"content":"Good job!","create_time":"$D2022-10-24T09:01:40.299Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"09c368f2d90e0876","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":null}},{"id":"a8484ee1f408511d","reply_to_id":null,"content":"I asked for a filter with a maximum and minimum values, but this is also a good option","create_time":"$D2022-10-24T09:02:15.406Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"09c368f2d90e0876","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":null}},{"id":"e7ff50f970d1e324","reply_to_id":null,"content":"If you create a cell with the code: html`${carsList}`, the list will be shown","create_time":"$D2022-10-24T09:06:05.505Z","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"// I first practiced with some basic filters and below these, I filtered with rangers and selectors and sorted them according to weight.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"// Filter by cars only with horsepower over 150","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"cars2 = cars.filter(cars => cars.Horsepower > 150)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"// Filter by cars only with horsepower over 100 and with European origin","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"cars3 = cars.filter (cars => cars.Horsepower > 100 && cars.Origin == 'Europe')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"// Filter by cars only with horsepower between 100 and 115 and with European origin","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"cars4 = cars.filter (cars => cars.Horsepower > 100 && cars.Horsepower < 115 && cars.Origin == 'Europe')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"// Filter by origin with a selector and a table","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"viewof Origin = Inputs.select(cars.map (d => d.Origin), {sort: true, unique: true, label: \"Origin\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"cars5 = cars.filter (d =>d.Origin === Origin)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"Inputs.table(cars5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"// Filter by horsepower with a ranger - cars within 10% of the horsepower set will show","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"viewof Horsepower = Inputs.range(d3.extent (cars, d =>d.Horsepower), {label: \"Horsepower\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"Inputs.table(cars.filter (d => d.Horsepower < Horsepower * 1.1 && Horsepower * 0.9 < d.Horsepower))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"// Sort according to weight from heaviest to lightest","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"sortedData = cars.sort((a,b)=> { \n return b.Weight_in_lbs - a.Weight_in_lbs\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"// Filter first 20 items of the table and make an HTML list with each of the cars' main features and adding the average acceleration of them ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"sortedData2 = sortedData.slice (0,20)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"carsList = '

' + `The 20 heaviest cars in the market` + '

' + '

' + '' + car.Name + ''+ '
' + \"Weight: \" + car.Weight_in_lbs + \" lbs\" + '
' + \"Horsepower: \" + car.Horsepower+ '
' + \"Acceleration: \" + car.Acceleration + '
' + '
' + '

' + \"
\" + \"\" + \"The average acceleration of these 20 cars is \" + sortedData2.reduce((total, next) => total + next.Acceleration, 0) / sortedData2.length + \"\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"$4c","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 4a:"$49:body"