2b:null 2c:["$","title",null,{"children":"Data visualization - Week 1 assignment | Xavier B. | Observable"}] 31: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) --- `32:[] 2f:{"id":"5f31498f9b797c00","slug":"data-visualization-week-1-assignment","title":"Data visualization - Week 1 assignment","thumbnail":"262bc05df97700bacd896d31729f1d002761b1ff8caff59809cc14a3c0790ed2","access_level":"public","create_time":"$D2020-10-21T19:05:36.543Z","update_time":"$D2021-04-21T02:43:28.257Z","view_time":null,"first_public_time":"$D2020-10-21T23:25:24.097Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0df0381955bf1da9","login":"x80110","name":"Xavier B.","avatar_url":"https://avatars-next.observableusercontent.com/9c83aa3d8871a7ab7c57218156f38383132193db6157266d478cff07f8af8a0e","tier":"starter_2024"},"version":507,"publish_version":507,"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":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Data visualization - Week 1 assignment","cells":[{"id":0,"value":"md`# Data visualization - Week 1 assignment`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"md `## **Task** \nCreate a html table (20 items) capable of filtering by:\n- origin\n- minimum <-> maximum horsepower\n- sorted items by descending weight\n- Show average acceleratiion speed of the filtered cars\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":337,"value":"md `---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":342,"value":"md `# Cars dataset interactive table`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"viewof selectedOrigin = html ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":386,"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})\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":478,"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"},{"id":246,"value":"md `The average time to reach 60mph speed for selected cars is: **${accelerationAvg.toPrecision(4)} sec.**`\n\n//https://www.mldata.io/dataset-details/auto_mpg/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"\nhtml `${table(desiredDataOrigin.slice(0, 20))}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":472,"value":"md `---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"md `# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":306,"value":"md `## Dataset:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"cars = require(\"@observablehq/cars\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":313,"value":"md `## Select columns`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"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 origin : d[\"Origin\"],\n horsepower : d[\"Horsepower\"],\n weight : d[\"Weight_in_lbs\"],\n acceleration : d[\"Acceleration\"],\n}\n return newd;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":315,"value":"md `## Filter by origin in selector, horsepower in sliders and sort by weight`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":455,"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"},{"id":257,"value":"md `## Create html tags for origin selector:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":212,"value":"origins = desiredData.map(car => {\n var value = car['origin'];\n return ``;\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":332,"value":"md `## Create html table with selected data using map()`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":300,"value":"md `## Define acceleration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"\naccelerationAvg = desiredDataOrigin.reduce((a,b) => a + b.acceleration, 0) / desiredDataOrigin.length\n// reduce is used f\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":272,"value":"md `## Define maximum horsepower`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":" maxHorsepower = desiredDataOrigin.sort((a, b) => b.horsepower - a.horsepower)[0].horsepower","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":377,"value":"md `## Detailed sliders`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":381,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"