2c:null 2d:["$","title",null,{"children":"Introduction to data wrangling and analysis in JavaScript — Session 2 Key - Mayuka | 🪦 dv develop 2025 spring | Observable"}] 32:T559,All course materials: - Session 1: [Recording](https://www.youtube.com/watch?v=8vaEcca3iBk&t=60s) | [Slides](https://docs.google.com/presentation/d/e/2PACX-1vQfqImdbMKmUcnO3agCwH3FYXxD4JM37mXbXooApHC14LNOxsYLlKVjUWFXCyxL1Dm_ogaFreDTqg8n/pub?start=false&loop=false&delayms=3000) | [Follow-along notebook](https://observablehq.com/@demoteam/intro-js-session-1) - Session 2: [Recording](https://www.youtube.com/watch?v=jPUFr6QktQs&t=10s) | [Slides](https://docs.google.com/presentation/d/e/2PACX-1vREbGCYcWAUeQeTdWuEmogi2iHio2anw890AY0v1fH3s1HkOfxzlm6FbrqqPl8qjnVG_U1BIKgiR0iP/pub?start=false&loop=false&delayms=3000) | [Follow-along notebook](https://observablehq.com/@demoteam/intro-js-session-2) - Session 3: [Recording](https://www.youtube.com/watch?v=4zIfU1rVcPU&t=1s) | [Slides](https://docs.google.com/presentation/d/e/2PACX-1vQqFhwxLmgtNyLn3WSnKya2S_1LaJ45SdcHA_h4ATqAn9_TSbs9NqiLignJXuf1znm627gQuPCLleqt/pub?start=false&loop=false&delayms=3000) | [Follow-along notebook](https://observablehq.com/@demoteam/intro-js-session-3) - Session 4: [Recording](https://www.youtube.com/watch?v=Ov-NtAj6Ais&t=12s) | [Slides](https://docs.google.com/presentation/d/e/2PACX-1vQYM1misfDLO2jgbXq3f8SJ48OT__1qbT3yjmbZYe7RK72Pyvlus4iOdC3jOzs0yRKjuQxuxTWM6e5X/pub?start=false&loop=false&delayms=3000) | [Follow-along notebook](https://observablehq.com/@demoteam/intro-js-session-4)33:[{"id":"314e4aed94dba6a1d91423bcf47db2647d9f21af01484ac663569b56c494dc3b5670cc6986c4d75ae67c97928aad24e1e66d1150229d10cce4da59a001677b12","href":"https://static.observableusercontent.com/files/314e4aed94dba6a1d91423bcf47db2647d9f21af01484ac663569b56c494dc3b5670cc6986c4d75ae67c97928aad24e1e66d1150229d10cce4da59a001677b12","name":"world_bank_data.csv","type":"text/csv","lastModified":1739788000281.351,"size":606010}] 30:{"id":"798084f56d962cf7","slug":"4h-course-session2-mayuka","title":"Introduction to data wrangling and analysis in JavaScript — Session 2 Key - Mayuka","thumbnail":"c2343a70c7660755f481489f173369c7743d031e9621307c8c44681aabcb56b3","access_level":"public","create_time":"$D2025-02-17T10:26:40.281Z","update_time":"$D2025-02-19T21:10:08.035Z","view_time":null,"first_public_time":"$D2025-02-19T21:07:37.025Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"caa1f4ddba1048c5","login":"dv-develop-2025s","name":"🪦 dv develop 2025 spring","avatar_url":"https://avatars-next.observableusercontent.com/4e75b7ea2e28b63057c20457d28474e4c0622d1b506ebef5d878e38c0c606a40","tier":"pro_2024"},"version":94,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"443421c90ce1977e","login":"mayuka-otsuki","name":"Mayuka Otsuki","avatar_url":"https://avatars-next.observableusercontent.com/9e021cba8d155f759d3d0c72f986543d09f416342254158d97f74f8c60ccef35","tier":null}],"members":[{"type":"team","id":"caa1f4ddba1048c5","login":"dv-develop-2025s","name":"🪦 dv develop 2025 spring","avatar_url":"https://avatars-next.observableusercontent.com/4e75b7ea2e28b63057c20457d28474e4c0622d1b506ebef5d878e38c0c606a40","tier":"pro_2024","role":"editor"},{"type":"individual","id":"443421c90ce1977e","login":"mayuka-otsuki","name":"Mayuka Otsuki","avatar_url":"https://avatars-next.observableusercontent.com/9e021cba8d155f759d3d0c72f986543d09f416342254158d97f74f8c60ccef35","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Introduction to data wrangling and analysis in JavaScript — Session 2 Key - Mayuka","cells":[{"id":56,"value":"# Introduction to data wrangling and analysis in JavaScript — Session 2 Key - Mayuka\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"\n---\n## Activity 1 - Warm up\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"Here's an array (**biking**) containing multiple objects:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"biking = [\n { day: \"Monday\", miles: 6.2, time_hr: 0.53 },\n { day: \"Tuesday\", miles: 10.0, time_hr: 1.02 },\n { day: \"Wednesday\", miles: 4.9, time_hr: 0.48 },\n { day: \"Thursday\", miles: 0, time_hr: 0 },\n { day: \"Friday\", miles: 18.5, time_hr: 1.59 },\n { day: \"Saturday\", miles: 7.3, time_hr: 0.86 },\n { day: \"Sunday\", miles: 0, time_hr: 0 }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"Let's refresh our skills from Session 1 in the cells below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"// Find the miles biked on Friday:\nbiking[4].miles\n// Alternatively: biking[biking.map(d => d.day).indexOf(\"Friday\")].miles","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"showMe(`biking[4].miles`, {dependencies: {biking}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"// For each day, find the average biking speed.\nbiking.map(d => d.miles / d.time_hr)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"showMe(`biking.map(d => d.miles / d.time_hr)`, {dependencies: {biking}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"---\n## Activity 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"Continuing with the **biking** array created above:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"// Only keep objects (rows) where miles is greater than 10:\nbiking.filter(d => d.miles > 10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"showMe(`biking.filter(d => d.miles > 10)`, {dependencies: {biking}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"// Keep rows for Saturday and Monday:\nbiking.filter(d => d.day == \"Saturday\" || d.day == \"Monday\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"showMe(`biking.filter(d => d.day == \"Saturday\" || d.day == \"Monday\")`, {dependencies: {biking}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"// Keep rows where miles is less than 10 AND time_hr is less than 0.5:\nbiking.filter(d => d.miles < 10 && d.time_hr < 0.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"showMe(`biking.filter(d => d.miles < 10 && d.time_hr < 0.5)`, {dependencies: {biking}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"// Keep rows *except* for Thursday:\nbiking.filter(d => d.day != \"Thursday\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"showMe(`biking.filter(d => d.day != \"Thursday\")`, {dependencies: {biking}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"---\n## Activity 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"// Keep all existing properties by \"...d\"; add a new one named 'km' with miles converted to kilometers;\nbiking_km = biking.map(d=> ({...d, km:d.miles*1.61, dayAnimal:d.day+\"cats\"}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"showMe(`biking_km = biking.map(d => ({...d, km: d.miles * 1.61}))`, {dependencies: {biking}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"---\n## Activity 4","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"carData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"Here, we create an Arquero table from the **carData** array shown above:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"carTable = aq.from(carData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"Let's do the following wrangling steps together using Arquero verbs:\n\n- Only keep properties (columns) for \"name\", \"economy (mpg)\", \"cylinders\", and \"weight (lb)\"\n- Only keep rows for cars with 4 cylinders, and where \"economy (mpg)\" is not `null` (empty)\n- Add a new column called weight_kg, with \"weight (lb)\" converted to kilograms (multiply the pounds by 0.45)\n- Sort the data by increasing value of \"economy (mpg)\"\n- Rename the \"economy (mpg)\" column to \"mpg\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"// Add your data wrangling (using Arquero) here:\ncarTable\n .select(\"name\", \"economy (mpg)\", \"cylinders\", \"weight (lb)\")\n .filter((d) => d.cylinders == 4 && d['economy (mpg)'] != null)\n .derive({weight_kg: d => d['weight (lb)'] * 0.45})\n .orderby('economy (mpg)')\n .rename({'economy (mpg)': 'mpg'})\n .view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"carTable.select(\"name\", \"economy (mpg)\", \"cylinders\", \"weight (lb)\").view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"showMe(`carTable\n .select(\"name\", \"economy (mpg)\", \"cylinders\", \"weight (lb)\")\n .filter((d) => d.cylinders == 4 && d['economy (mpg)'] != null)\n .derive({weight_kg: d => d['weight (lb)'] * 0.45})\n .orderby('economy (mpg)')\n .rename({'economy (mpg)': 'mpg'})\n .view()`,\n {dependencies: {carTable}})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"\n---\n## Activity 5\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"The data table below previews **wb**, an array with several indicators (CO2 emissions, annual GDP, life expectancy, and population) for different countries over time. Data: World Bank Open Data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"wb = await FileAttachment(\"world_bank_data.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"wb","database":"$undefined"},{"id":35,"value":"Using only Array map and filter methods, do the following: \n\n- Create a new array named wb2019...\n- ...that includes columns \"country\", \"year\", \"co2\", \"region\" and \"co2_thousands\". The first four should contain the same values currently in those properties; \"co2_thousands\" should contain the co2 property value divided by 1000.\n- Filter to only include objects where the year value is 2019","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"// Use Array map and filter to do the wrangling steps above, storing the output as wb2019:\nwb2019 = wb\n .map((d) => ({\n country: d.country,\n year: d.year,\n co2: d.co2,\n region: d.region,\n co2_thousands: d.co2 / 1000\n }))\n .filter(\n (d) =>\n d.year == 2019\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"showMe(`wb2019 = wb\n .map((d) => ({\n country: d.country,\n year: d.year,\n co2: d.co2,\n region: d.region,\n co2_thousands: d.co2 / 1000\n }))\n .filter(\n (d) =>\n d.year == 2019\n )`, \n {dependencies: {wb}})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"\nNow let's try this with Arquero! First, we'll convert to an Arquero table:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"wbTable = aq.from(wb)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"In the cell below, perform the same wrangling steps as above using Arquero verbs:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"// Use Arquero verbs to do the same wrangling steps:\nwbEAPArquero = wbTable\n .select(\"country\", \"year\", \"co2\", \"region\")\n .derive({ co2_thousands: (d) => d.co2 / 1000 })\n .filter(d => d.year == 2019)\n .view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"showMe(`wbEAPArquero = wbTable\n .select(\"country\", \"year\", \"co2\", \"region\")\n .derive({ co2_thousands: (d) => d.co2 / 1000 })\n .filter(d => d.year == 2019)\n .view()`,\n {dependencies: {wbTable}})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"\n---\n## Activity 6\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"// Create a chart of the top 10 CO2 emitting countries in 2019 (using the wb2019 array created above)\nPlot.plot({\n marks: [\n Plot.barX(wb2019, {\n x: (d) => d.co2 / 1e6,\n y: \"country\",\n fill: \"blueviolet\",\n stroke: \"gray\",\n sort: { y: \"x\", reverse: true, limit: 10 }\n }),\n Plot.text(wb2019, {\n x: (d) => d.co2 / 1e6,\n y: \"country\",\n text: (d) => d.co2 / 1e6,\n dx: 2,\n textAnchor: \"start\"\n }),\n Plot.ruleX([0])\n ],\n marginLeft: 200,\n x: { domain: [0, 12], grid: true, label: \"CO2\" }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"Note: the ShowMe! below depends on wb2019 being created above, so once we've made wb2019, the error below should be resolved! ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"showMe(\n `Plot.plot({\n marks: [\n Plot.barX(wb2019, {\n x: (d) => d.co2 / 1e6,\n y: \"country\",\n fill: \"blueviolet\",\n stroke: \"gray\",\n sort: { y: \"x\", reverse: true, limit: 10 }\n }),\n Plot.text(wb2019, {\n x: (d) => d.co2 / 1e6,\n y: \"country\",\n text: (d) => d.co2 / 1e6,\n dx: 2,\n textAnchor: \"start\"\n }),\n Plot.ruleX([0])\n ],\n marginLeft: 200,\n x: { domain: [0, 12], grid: true, label: \"CO2\" }\n})`,\n { dependencies: { wb2019 } }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"

\n---\n### Appendix\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"carData = cars","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"import {aq, op} from \"@uwdata/arquero\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"import { showMe } from \"@observablehq/show-me\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"