21:null 22:["$","title",null,{"children":"CSE 442 Tutorial 1: Observable and Data Wrangling (student version) | Alice Gao | Observable"}] 27:[{"id":"8bdb0fdf148d516ef3dc8af1a412adf101b339aea066b713b7acd864da7cabffbfb08880bb20d69c65469d02986a28d8f4dbe38543f34ce7eb656f586fa1fb20","href":"https://static.observableusercontent.com/files/8bdb0fdf148d516ef3dc8af1a412adf101b339aea066b713b7acd864da7cabffbfb08880bb20d69c65469d02986a28d8f4dbe38543f34ce7eb656f586fa1fb20","name":"sample2.json","type":"application/json","lastModified":1791043845596,"size":452},{"id":"8b6719e35a5b44a2e380010641d44925bf7709456b9e1da6916a7011f40ccc2ef54a7a3b387f064f26ae22cf03146b116f855dc6cbecd208e42837fbd24819f0","href":"https://static.observableusercontent.com/files/8b6719e35a5b44a2e380010641d44925bf7709456b9e1da6916a7011f40ccc2ef54a7a3b387f064f26ae22cf03146b116f855dc6cbecd208e42837fbd24819f0","name":"sample1.csv","type":"text/csv","lastModified":1791043792631,"size":155}] 25:{"id":"9fb39a1860069e4e","slug":"cse-442-tutorial-1-observable-and-data-wrangling-student-version","title":"CSE 442 Tutorial 1: Observable and Data Wrangling (student version)","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-10-03T15:39:10.223Z","update_time":"$D2026-10-03T16:27:34.430Z","view_time":null,"first_public_time":"$D2026-10-08T20:44:49.468Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"e0582c8e69064c42","login":"alice-gao","name":"Alice Gao","avatar_url":"https://avatars-next.observableusercontent.com/ba37ac1f9702378390349620cd8a41d4b43286ec6ab9b162ffee24a96b041933","tier":"free_2026","bio":""},"version":1372,"publish_version":1372,"role":null,"authored":false,"authors":[{"type":"individual","id":"fcb0ab6140bb9338","login":"alice-gao","name":"Alice Gao","avatar_url":"https://avatars-next.observableusercontent.com/ba37ac1f9702378390349620cd8a41d4b43286ec6ab9b162ffee24a96b041933","tier":null,"bio":""}],"members":[{"type":"team","id":"e0582c8e69064c42","login":"alice-gao","name":"Alice Gao","avatar_url":"https://avatars-next.observableusercontent.com/ba37ac1f9702378390349620cd8a41d4b43286ec6ab9b162ffee24a96b041933","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"CSE 442 Tutorial 1: Observable and Data Wrangling (student version)","cells":[{"id":0,"value":"md`# CSE 442 Tutorial 1: Observable and Data Wrangling (student version)` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`Welcome to the tutorial! We're happy to have you! 😊 \n\nOur tutorial today will focus on:\n1. Observable + JavaScript Basics\n2. Basic Data Processing\n3. Advanced Data Wrangling with Arquero`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`\n## Getting familiar with Observable\n\nWe will do some exploring here, but refer back to the official [Observable walkthrough](https://observablehq.com/d/d69e24aa78dabd68) if you have more questions!\n\n### The Basics\n\nEach page is a **notebook** that consists of editable, interactive **cells**. The cells can be filled with JavaScript, Markdown, or HTML. Use \\`Shift-Enter\\`, or the play button in the top right corner of each cell to run each cell. The output will appear at the top of the cell.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`👈 You can view or hide the source code of a cell by clicking the left-hand margin. Try it now!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"Here is some Markdown. Edit me! You can add...\n# Headers of\n### different sizes,\n* bullet\n* points\n\n\\`fixed width font\\`\n\n1. Ordered\n2. Lists,\n\nand more. For reference, here is a [guide to formatting using the Markdown syntax](https://observablehq.com/@jaynel/markdown-summary).\n\n**bold text**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`To pin/unpin the source code of the cell, hover over the pin icon in the left hand margin, or use the shortcut \\`Ctrl+Shift+P\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"html`

Here is some HTML

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"

Here is some HTML

Paragraph

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"{\n const course = \"CSE442\";\n const message = \"Welcome to \" + course;\n return message;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`JavaScript cells are run one expression at a time, so if you want multiple expressions within a single cell, enclose the statements in curly braces and use \\`return\\` to provide the cell value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`Every cell is editableeeee. Changes you make to this document will not be saved, but if you [fork](https://observablehq.com/@observablehq/fork-share-merge) the document, a copy will be saved under your account and any changes made to the forked copy will be saved. You can fork this document by navigating to the three dot options icon and selecting the \"Fork\" option.\n\nIf you want to share your notebook, you can either Publish the notebook, which will make the content publicly visible, or you can enable link-sharing, to privately share the notebook. However, if you make changes to your notebook after the link has been shared, you will have to **Reshare** the link in order for others to see the changes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`### 👉 Practice\n\nAdd a new cell and try adding some markdown, HTML, or JavaScript.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1289,"value":"

HTML HEADER

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1250,"value":"# Welcome to our first tutorial!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"md`### Cell Values\n\nIf you give the value in a cell a name, you can refer to it in other cells, which will recalculate their values whenever the **named cell** is updated. When you change the contents of a cell, click the Play button on the right-hand side, or press \\`shift-return\\` to re-evaluate the cell.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"currentWeek = 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"\"There are \" + (10 - currentWeek) + \" weeks left in the quarter\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"## A Brief Introduction to JavaScript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"As you may have noticed above, we declare new variables using `const` (for values that never change) and `let` (for mutable variables). This is JavaScript syntax! The `const` and `let` statements declare a block-scoped local variable. Here, let's learn some basic JavaScript that are specifically useful for data visualization. You can always explore more in [A Minimal Introduction to JavaScript and Observable](https://observablehq.com/@uwdata/a-minimal-introduction-to-javascript-and-observable).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"### JavaScript types","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"The set of types in the JavaScript language consists of [primitive values](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#primitive_values) and [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#objects). Primitive values include Boolean type, Null type, Undefined type, Number type, BigInt type, String type, and Symbol type, which are all immutable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"for example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1254,"value":"442","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"442 // a number","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"\"Data Visualization\" // a string","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"true // a boolean","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"isNaN(442) // you may use isNaN(a) to check if a is Not-A-Number","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"(1 + Math.sqrt(5)) / 2 // you can also do math","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"Math.random() // or generate 'random' numbers","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"2 < 1 // you can compare things","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"\"A\" < \"a\" // including string comparisons","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"2 + 2 === 4 // more comparison","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"2 + 2 !== \"4\" // and more","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"Notice that we are using `===` and `!==` instead of `==` and `!=` above! Double equals will perform a type conversion when comparing two things, while triple equals won't automatically convert types and if the types differ, false is returned:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"2 + 2 == \"4\" // double equals","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"2 + 2 === \"4\" // triple equals","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"We recommend that you avoid `==` and `!=` unless [you know what you're doing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"You will also need `Date` for time-based data, for example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"date = new Date()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":" We will discuss Date more in the _Basic Data Processing_ section later.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"### Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"Like Java, we can write functions to reuse some code:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"function addMe(a, b) { // function signature: name and input arguments\n return a + b; // function body, with return statement for output\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"md`We can then invoke the function and pass it arguments:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"addMe(3, 4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"addMe('cse442', ' is a cool class')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"addMe('💕', '😍') // sorry heart-eyes, extra arguments are ignored","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"Missing arguments default to `undefined`, indicating a pure absence of value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"addMe('0','1') // something from nothing","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"An arrow function expression is a compact alternative to a traditional function expression which can make a function concise. For example, `addMe` can be written as an arrow function:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"addMe2 = (a, b) => a + b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"Let's decompose addMe down to addMe2 step-by-step:\n\n`\nfunction addMe(a, b) { \n return a + b;\n}`\n\nRemove the keyword `function` and treat the function name as a variable:\n\n`addMe = (a, b) { return a + b; }`\n\nPlace an arrow between the argument and opening body bracket:\n\n`addMe = (a, b) => { return a + b; }`\n\nRemove the body braces and the word \"return\" – the return is implied:\n\n`addMe = (a, b) => a + b`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"md`\nCan you use arrow functions for all traditional functions? There are indeed some differences between the two and you can check [this MDN document](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) to see the limitations of arrow functions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"### Array, Object, and Basic Data Processing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"### Array","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"JavaScript also supports arrays. An element inside an array can be of any type, and different elements of the same array can be of different types.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"arr1 = [1, 2, 3, 'hi'] // you can initialize an array like this","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"{\n arr1.push('Alice'); // you can push elements to array, this updates the array content\n arr1.push('Gao')\n return arr1;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"There are many useful array methods. Here we will discuss `filter`, `map`, `forEach`, and `sort`, as they are all commonly used in data processing. You can check [this MDN document](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) to explore more array methods.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"For example, if we want to double each of the values in arr1, we can use `map` to apply a function (in this case, the function is `x * 2`) to each element in the array and return the results as a new array.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"arr1.map(d => d * 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"md`What is happening here? Since it does not make sense to multiple strings, we get \\`NaN\\` when we try to multiply a string value by 2. Here we don't really care about these values, so let's first filter the data so that we only double valid number values (you may also map and then filter to get the same result):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"result = arr1.filter(d => !isNaN(d)).map(d => d * 2) // keep valid numbers only, then double them","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"result.slice().sort() // the default sort method is ascending","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"result\n .slice() // you can first make a copy of an array, so we don't overwrite earlier values\n .sort((a, b) => b - a) // you can define a custom sort comparator; here we sort numbers in descending order","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"#### Object","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"JavaScript is also happy to structure values into a set of named properties.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"object = ({key: \"value\", anotherKey: \"anotherValue\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"You can change the value of a key by using `object[key] = newValue` or add a key by `object[newKey] = newValue`, which is very useful when you want to change or add some information to a data record:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"object['key'] = 'new new Value'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"object['newKey'] = 'new value'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"Object.keys(object) // return an array of property key strings","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"Object.values(object) // return an array of property values","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1297,"value":"object","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"md`Together, arrays and objects can be used to model data, and arrays of Objects is a common format for data tables.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"Let's load and play some data!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"#### CSV","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"A comma-separated values (CSV) file is a delimited text file that uses a comma to separate values. Each line of the file is a data record. Each record consists of one or more fields, separated by commas. The use of the comma as a field separator is the source of the name for this file format. You can load csv file with:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"csvText = FileAttachment(\"sample1.csv\").text() // loading a text file attached in Observable","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"dataCSV = d3.csvParse(csvText) // if we have the text loaded already, we can use d3.csvParse","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"csvURL = FileAttachment(\"sample1.csv\").url() // you can get the url of a file you attached to Observable with .url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"dataCSV2 = d3.csv(csvURL) // if we have a URL to a CSV, we can use d3.csv to both load and parse","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"By default, the D3 methods will treat all values as strings. In most cases, we will want to also parse data values, for example to read numeric data as JavaScript numbers. You can assign data types to CSV values either by using `d3.autoType` or by doing it yourself, for example:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"auto = d3.csv(csvURL, d3.autoType) // can handle numbers and booleans, but not all date formats","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"manual = d3.csv(csvURL, ({Name, Job, date}) => ({Name: Name, Job: Job, 'OH Date': new Date(date)}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"day = manual[1]['OH Date'].getDay()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"#### JSON","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"JSON (JavaScript Object Notation) is an open standard file format and data interchange format that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and arrays (or other serializable values).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1191,"value":"FileAttachment(\"sample2.json\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"dataJSON = FileAttachment(\"sample2.json\").json() // load and parse JSON from a file attached in Observable","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"json_url = FileAttachment(\"sample2.json\").url() // we can also get a URL for a file attachment","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"dataJSON2 = d3.json(json_url) // loading with url","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"You can convert JavaScript values to a JSON string using the `JSON.stringify()` methods. Conversely, `JSON.parse()` parses a JSON string and returns the JavaScript values it describes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"strJson = JSON.stringify(dataJSON)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"JSON.parse(strJson)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"Once you finish processing data, you can also export it by clicking the export button choose download CSV/JSON.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"md`### 👉 Practice\n\nGiven the data below and your knowledge of arrays and objects, can you find all people who are TAs in this sample data and list them in alphabetical order?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"data = d3.csv(csvURL, ({Name, Job, date}) => ({Name: Name, Job: Job, 'OH Date': new Date(date)}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"// your code goes here\n// uncomment cell below to see the solution","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"{ // solution:\n return data.filter(d => d['Job'] ==='Instructor').sort((a, b) => a.Name > b.Name ? 1 : -1)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"Can you find 1) all TAs that hold office hour on Tuesday? 2) any instructor holding office hour on Tuesday? (hint: use `Date.getDay()`)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"// your code goes here\n// uncomment cell below to see the solution","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":851,"value":"{ // solution:\n // 1)\n return data.filter(d => d['Job'] === 'TA' && d['OH Date'].getDay() === 2)\n // 2)\n // return data.filter(d => d['Job'] === 'Instructor' && d['OH Date'].getDay() === 2)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"md`\n## 💭 Thinking about data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`### Data Formats\n\nData comes in many shapes and sizes. Three conventions that are useful to recognize are wide (tidy), folded (long), and pivoted data. \n\nA **wide (or tidy)** data format is data where each variable is present as a separate column and each observation forms a row; in this case the *values* are the cells of the table and the *attributes / variables* are provided in the header row. This format makes it easy to look up the value for a particular attribute and observation (Alice's age is 24) and generally works well for visualization use cases since we can refer to attributes on their own and extract the values fairly easily (e.g., extract just the ages and ignore the weight).\n\n| Person | Age | Weight |Height|\n| :------------- | :---------- | :----------- |\n| Bob | 32 |168| 180|\n| Alice | 24 | 150 |175|\n| Steve | 64 |144|165|`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md`**Folded (or long)** data format is where the attributes are included in *one column* and the values are included in another. This format is harder to work with because we now have to traverse the entire column to identify the values for a particular attribute (such as the age). Imagine trying to filter the table below to remove people with height less than 170; you would need to keep track of the height for each person, check against 170, and remove the rows (this is a lot less straightforward).\n\n|Person|Variable|Value|\n|:--|:--|:--|\n|Bob|\tAge\t|32|\n|Bob|\tWeight|\t168|\n|Bob|\tHeight|\t180|\n|Alice|\tAge|\t24|\n|Alice|\tWeight|\t150|\n|Alice|\tHeight|\t175|\n|Steve|\tAge\t|64|\n|Steve|\tWeight\t|144|\n|Steve|\tHeight\t|165|`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"md`**Pivoted (or cross tabulation)** is a data format in which attributes are included in *both* rows and columns. The data value in each cell is dependent on both the row and column headers, so each column is not explicitly defined. The values can be aggregated, so to transform the pivoted data back into the tidy format is not always easy. For example, the table below shows total population data, but the value is not explicitly described, so it is hard to refer to the 'population' attribute itself.\n\n|Age|\t1850\t|1860\t|1870|\n|:-|:-|:-|:-|\n|0\t|2934165\t|4213008\t|5517185|\n|5\t|2770735\t|3583239\t|4822149|\n|10\t|2476213\t|3152990\t|4770011|\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"md`### Data Transformation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"md`We will explore a dataset on mpg, cylinders, displacement, etc. (8 variables) for 406 different cars in the **wide** data format. Though the dataset is tidy, there are still differences in the data structures that require different data transformation techniques. This one is from the [vega datasets](https://github.com/vega/vega-datasets) collection.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"md`To help with the data transformation process, we will import a few tools. [Arquero](https://observablehq.com/@uwdata/introducing-arquero) is a library for transforming array-backed data into tables, or data frames. Arquero provides a set of _transformation verbs_ that allow you to filter, sort, query, and derive new columns (and much more!) on a data table. \\`printTable\\` is a handy function to view our data tables in Observable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"import {aq, op} from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"md`Below is the Cars dataset. We see that it is stored in a JavaScript array, with each row as an Object. Expand the Array and take a look at the data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"cars = (await require('vega-datasets@1'))['cars.json']()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"md`We can also view the data as a table using the \\`printTable\\` function we imported above. Try changing the \\`slice(...)\\` call below to view more than 10 rows of data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"printTable(cars.slice(0,10))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"md`## Transformation\n\nLet's transform the cars dataset to answer a simple question: *In this dataset, which USA-made cars have the highest miles per gallon?*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"md`First, we will create an Arquero table \\`from\\` our current \\`cars\\` array:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"cars_table = aq.from(cars)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1208,"value":"cars_table.view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"md`Next, we're interested in cars where the country of origin is USA, so we would like only see rows where the Origin = USA. We can achieve this using the \\`filter\\` function. In the example below, \\`d\\` represents a single row from the cars table. In order to apply the filter, we must specify the conditions for our filter, which is to only include the rows where the field Origin is \"USA\". To do so we use the \\`op\\` object from Arquero (short for operator) to get the \\`includes\\` filter operator. This performs a simple equivalence check between a data field value and a specified value. So, we check if \\`d.Origin\\` matches with our desired term, \"USA\":`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1016,"value":"// to be filled -- filter only USA. \n // op.upper(): Returns the string value converted to upper case.\n // op.includes(array, value[, index]): Determines whether an array includes a certain value among its entries, returning true or false as appropriate.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1283,"value":"cars_table\n .filter(d => op.includes(op.upper(d.Origin), 'USA'))\n .view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1217,"value":"cars_table\n .filter(d => op.includes(op.upper(d.Origin), 'USA'))\n .view()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"md`Now let's see which of these USA made cars has the highest miles per gallon. Since we want the **highest** MPG, we want to sort the data based on the \\`Miles_per_Gallon\\` column. We can achieve this using the \\`orderby\\` function. We can chain our function calls to execute the \\`orderby\\` after the filter.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1286,"value":"cars_table\n .filter(d => op.includes(op.upper(d.Origin), 'USA'))\n .orderby('Miles_per_Gallon')\n .view()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"// to be filled -- filter and get the highest mpg in the USA. \ncars_table\n .filter(d => op.includes(op.upper(d.Origin), 'USA'))\n .orderby('Miles_per_Gallon')\n .view()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1221,"value":"cars_table\n .filter(d => op.includes(op.upper(d.Origin), 'USA'))\n .orderby('Miles_per_Gallon')\n .view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"md`The default sort direction is an ascending sort (lowest-to-highest). To reverse the sort, we can use \\`aq.desc()\\` to specific a highest-to-lowest sort order. We can also use the \\`select\\` verb to select a subset of columns. Finally, we can include 5 in the \\`.view(5)\\` call to only display the first 5 rows.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":966,"value":"// to be filled -- filter for cars only made from USA, sort in decending order, and select a subset of collumn to show for 5 rows only. \ncars_table\n .filter(d => op.includes(op.upper(d.Origin), 'USA'))\n .orderby(aq.desc('Miles_per_Gallon'))\n .select('Name', 'Miles_per_Gallon', 'Origin')\n .view(5)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"md`Looks like the Plymouth Champ is the top performer in terms of miles per gallon for USA-made cars!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":970,"value":"### Summarize data with *rollup()* and *groupby()*\n\nThe [`rollup()`](https://uwdata.github.io/arquero/api/verbs#rollup) verb \"rolls up\" values using [aggregate functions](https://uwdata.github.io/arquero/api/op#aggregate-functions) (*count*, *sum*, *average*, *etc.*) to create a new summary table. The *rollup()* verb accepts an object of named table expressions. However, all expressions must include aggregate operations: any non-aggregated column value *must* be an input to an aggregate.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"- *Which region has the most cars in this dataset? How many cars each region produced?*\n- *What is the median number for cylinders?*\n- *What are the minimum and maximum years of cars included in this data?*\n- *What are the mean (average) values of miles per gallons, displacement, horsepower, weight, and acceleration?*\n\nTo answer these questions for each origin region, we can apply the [`groupby()`](https://uwdata.github.io/arquero/api/verbs#groupby) verb, which groups the rows based on the values of one or more columns. Subsequent operations such as `rollup()` are then sensitive to these groups:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"// to be filled -- find answer for each region\ncars_table\n .groupby('Origin')\n .rollup({\n count: d => op.count(),\n med_cyl: d => op.median(d.Cylinders),\n min_year: d => op.min(op.year(d.Year)),\n max_year: d => op.max(op.year(d.Year)),\n mean_mpg: d => op.mean(d.Miles_per_Gallon),\n mean_disp: d => op.mean(d.Displacement),\n mean_hpw: d => op.mean(d.Horsepower),\n mean_weight: d => op.mean(d.Weight_in_lbs),\n mean_acc: d => op.mean(d.Acceleration)\n })\n .orderby(aq.desc('count'))\n .view()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":978,"value":"What if we would like to change the weight to be in the metric system (kg)?\n\nSince we know that 1 lb = 0.453592 kg, we can then use the `derive()` verb to create a new column that changes the weight unit for the cars.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"// to be filled -- change the unit for the weights\ncars_table\n .derive({ Weight_in_kg: d => op.round(0.4536 * d.Weight_in_lbs) })\n .view(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":983,"value":"The examples above only scratch the surface. Arquero includes additional transformation verbs for combining multiple tables together (such as `join` and `union`), reshaping data among the different formats described above (`fold` and `pivot`), random sampling, and much more.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":986,"value":"md `## Resources\n\nInterested in becoming a more proficient data wrangler? Read these notebooks next:\n\n- [Introduction to Arquero](https://observablehq.com/@uwdata/introducing-arquero)\n- [An Illustrated Guide to Arquero Verbs](https://observablehq.com/@uwdata/an-illustrated-guide-to-arquero-verbs)\n- [Tidy Data in JavaScript](https://observablehq.com/@uwdata/tidy-data-in-javascript)\n\nThe Vega-Lite visualization language also includes related mechanisms for data transformation. You will learn more about those later on in the [Data Transformation](https://observablehq.com/@uwdata/data-transformation) notebook reading.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":988,"value":"md`## Acknowledgements\n\nThis notebook builds off of the work of [@uwdata](https://observablehq.com/@uwdata), [@jheer](https://observablehq.com/@jheer), [@anjana](https://observablehq.com/@anjana).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1288,"value":"","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W27","stdlib":"1"}} 26:"$25:body"