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:{"title":"Task of week 1 (15th-21st October) Solution","cells":[{"id":0,"value":"md`# Task of week 1 (15th-21st October) Solution`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"cars = require(\"@observablehq/cars\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"viewof parameters = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"parameters.minHorsepower;","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"parameters.maxHorsepower;","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"html`

List of cars:

${d.Name}: Cylinders ${d.Cylinders}; Weight ${d.Weight_in_lbs} lbs

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"html`

The average acceleration is ${\n average.toFixed(2)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`## Apendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"selectedCarsList = cars.filter(d => {\n return d.Origin===parameters.origin && \n d.Horsepower >= parameters.minHorsepower && \n d.Horsepower <= parameters.maxHorsepower;})\n .sort((a,b)=>b.Weight_in_lbs - a.Weight_in_lbs)\n .slice(0,20);","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"average = selectedCarsList.reduce((accumstr,d)=>accumstr + d.Acceleration,0)/selectedCarsList.length;","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"checkOrigins = d3.group(cars, d => d.Origin)","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}