2b:null 2c:["$","title",null,{"children":"Task of week 1 (15th-21st October) | Sara Chodosh | Observable"}] 31:T4c6,md`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) `32:[] 2f:{"id":"746a9b36d401a424","slug":"task-of-week-1-15th-21st-october","title":"Task of week 1 (15th-21st October)","thumbnail":"295117be5e1ab01e0a4b02450c49a31f871c45903f4496992010251a7f766a80","access_level":"public","create_time":"$D2020-10-18T16:40:46.343Z","update_time":"$D2020-11-28T23:54:57.262Z","view_time":null,"first_public_time":"$D2020-10-22T15:11:39.816Z","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":0,"starred":false,"owner":{"type":"team","id":"20c1fecfc71ce39f","login":"sechodosh","name":"Sara Chodosh","avatar_url":"https://avatars-next.observableusercontent.com/c5d9f088044507420ab14b79254e146245e4f5e442be7ccc94f6cce2711780fa","tier":"starter_2024"},"version":353,"publish_version":353,"role":null,"authored":false,"authors":[{"type":"individual","id":"6429394a83672eb9","login":"sechodosh","name":"Sara Chodosh","avatar_url":"https://avatars-next.observableusercontent.com/c5d9f088044507420ab14b79254e146245e4f5e442be7ccc94f6cce2711780fa","tier":null}],"members":[{"type":"individual","id":"6429394a83672eb9","login":"sechodosh","name":"Sara Chodosh","avatar_url":"https://avatars-next.observableusercontent.com/c5d9f088044507420ab14b79254e146245e4f5e442be7ccc94f6cce2711780fa","tier":null,"role":"editor"}],"comments":[{"id":"14a951652303d630","reply_to_id":null,"content":"Hi Sara!\nGood job!\nThe problem with this code is that you are always appending new child to the list, so it always increases. One way to solve that would be to change your code above by:\n{\n document.getElementById(\"myList\").innerHTML = '';\n filtered.forEach(function(item) {\n let li = document.createElement(\"li\");\n li.appendChild(document.createElement(\"b\")).appendChild(document.createTextNode(item.Name + \": \"));\n li.appendChild(document.createTextNode(item.Cylinders + \" cylinders\"));\n li.appendChild(document.createElement(\"br\"));\n document.getElementById(\"myList\").appendChild(li);\n});\n}\n\nThe idea is to add the line \ndocument.getElementById(\"myList\").innerHTML = '';\nthat removes all the current elements on the list.","create_time":"$D2020-10-25T12:09:45.105Z","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,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"viewof origin = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"viewof parameters = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"filtered = cars.filter(d => {\n var selected = origin;\n var min = parameters.minHP;\n var max = parameters.maxHP;\n \n return d.Origin == selected && d.Horsepower >= min && d.Horsepower <= max;\n}).sort((a,b) => {\n return b.Weight_in_lbs - a.Weight_in_lbs;\n}).slice(0,20);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"md`The average acceleration of these cars is ${avg}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":333,"value":"md`## Attempt at HTML list`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":252,"value":"html`

Selected Cars

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":336,"value":"md`## Hiding my work`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"cars = require(\"@observablehq/cars\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"sorted = cars.sort((a,b) => {\n return b.Horsepower - a.Horsepower;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":325,"value":"filtered.forEach(function(item) {\n let li = document.createElement(\"li\");\n li.appendChild(document.createElement(\"b\")).appendChild(document.createTextNode(item.Name + \": \"));\n li.appendChild(document.createTextNode(item.Cylinders + \" cylinders\"));\n li.appendChild(document.createElement(\"br\"));\n document.getElementById(\"myList\").appendChild(li);\n});\n\n// Hi Anton! My code sort of worked, but my problem was that it just keeps adding to the list every time another code block runs, so I end up with a giant list. Is there a way to make this method work, so the list resets? Your method is much cleaner, but I'm wondering if I could have found a way to make my method work!","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":181,"value":"avg = filtered.reduce((accum, d) => accum + d.Acceleration, 0)/filtered.length;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"