27:null 28:["$","title",null,{"children":"Introduction to data wrangling and analysis in JavaScript - Session 4 Follow-along notebook | Clinton Boyda | Observable"}] 2d:T452,Course materials: - Session 1: [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: [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: [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: [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)2e:[{"id":"486fdc7682ad42a8e2733f0d5a5845b4a3c029d05c82ae98313cb1849eb8a1bb35dac7c10e11b206c64b92a94f6ea9da450ab0bc4991c9258eb9502e7708a329","href":"https://static.observableusercontent.com/files/486fdc7682ad42a8e2733f0d5a5845b4a3c029d05c82ae98313cb1849eb8a1bb35dac7c10e11b206c64b92a94f6ea9da450ab0bc4991c9258eb9502e7708a329","name":"us_imports.csv","type":"text/csv","lastModified":1682621973339.821,"size":74347}] 2b:{"id":"81c52b9b42180d0a","slug":null,"title":"Introduction to data wrangling and analysis in JavaScript - Session 4 Follow-along notebook","thumbnail":"fe419b51d19c03c574e7ce34a46f47c57b76dbe7e2bd4c4645a603e18efd4f02","access_level":"public","create_time":"$D2023-04-27T18:59:33.339Z","update_time":"$D2023-04-27T19:57:33.981Z","view_time":null,"first_public_time":"$D2023-04-27T18:59:33.339Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"6554d58ea0b36068","login":"cboyda","name":"Clinton Boyda","avatar_url":"https://avatars-next.observableusercontent.com/61d0cdc8ddc1bed72cb8297bf06c55ad73f58bd1809104d0002c85ca837c4baf","tier":"starter_2024"},"version":268,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ba2ccce749e59eeb","login":"cboyda","name":"Clinton Boyda","avatar_url":"https://avatars-next.observableusercontent.com/61d0cdc8ddc1bed72cb8297bf06c55ad73f58bd1809104d0002c85ca837c4baf","tier":null}],"members":[{"type":"individual","id":"ba2ccce749e59eeb","login":"cboyda","name":"Clinton Boyda","avatar_url":"https://avatars-next.observableusercontent.com/61d0cdc8ddc1bed72cb8297bf06c55ad73f58bd1809104d0002c85ca837c4baf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Introduction to data wrangling and analysis in JavaScript - Session 4 Follow-along notebook","cells":[{"id":0,"value":"# Introduction to data wrangling and analysis in JavaScript - Session 4 Follow-along notebook","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$2d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"## Today: \n\n- Recap & warmup activity\n- Math transforms (e.g. log transform)\n- Interactive charts for exploration with Observable Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"---\n## Activity 1 - Warm up","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"Here's an array named _fishing_. We'll recap some methods we've practiced over the past few days. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"fishing = [{river: \"San Juan\", species: \"rainbow\", lengthInches: 18.2},\n {river: \"San Juan\", species: \"brown\", lengthInches: 14.1},\n {river: \"San Juan\", species: \"brown\", lengthInches: 21.5},\n {river: \"Rio Grande\", species: \"brown\", lengthInches: 9.0},\n {river: \"Rio Grande\", species: \"brown\", lengthInches: 12.5},\n {river: \"Rio Grande\", species: \"cutthroat\", lengthInches: 10.6},\n {river: \"Rio Grande\", species: \"brown\", lengthInches: 14.5},\n {river: \"Rio Chama\", species: \"rainbow\", lengthInches: 8.5},\n {river: \"Rio Chama\", species: \"rainbow\", lengthInches: 11.5}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"### A. Add a data table cell below to take a look at *fishing*!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":191,"value":"- Click on the plus sign (+) in the left margin to open the Add cell menu\n- Start typing \"data table\" to find the Data table cell\n- Click to insert an empty Data table cell in your notebook\n- Select *fishing* as a source in the Data table cell","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":193,"value":"fishing","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"### B. Do the following tasks with the *fishing* array to practice skills from Sessions 1 - 3!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"//Group the data by species, then get an array of objects for rainbow trout.\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"showMe(`d3.group(fishing, d => d.species).get(\"rainbow\")`, {\n dependencies: { fishing }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"Aside: How else could we get the same subset with filter? ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"// Use Array.filter to get a subset only for rainbow trout in fishing:\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"showMe(`fishing.filter(d => d.species === \"rainbow\")`, {\n dependencies: { fishing }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"// Find the mean trout length by river:\n// option+shift+f = prettify code formatting\nriverTroutSize = d3.rollup(\n fishing,\n (v) => d3.mean(v, (d) => d.lengthInches),\n (d) => d.river\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"showMe(\n `riverTroutSize = d3.rollup(\n fishing,\n (v) => d3.mean(v, (d) => d.lengthInches),\n (d) => d.river\n)`,\n { dependencies: { fishing } }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"// Get just the mean trout size for the San Juan River:\nriverTroutSize.get(\"San Juan\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"showMe(`riverTroutSize.get(\"San Juan\")`, { dependencies: { fishing } })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"---\n## Activity 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"The *us_imports* data contains a subset of records from the [US Trade Shift report](https://www.usitc.gov/research_and_analysis/trade_shifts.htm), and contains the value (USD) of various imports (by sector and title) for 2015 - 2019 (accessed from data.gov). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"// Load the us_imports.csv file (attached in this notebook):\n// typed means it is being parsed\nus_imports = FileAttachment(\"us_imports.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"us_imports","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"---\n### Add a data table cell below to take a look at *us_imports*!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"- Click on the plus sign (+) in the left margin to open the Add cell menu\n- Start typing \"data table\" to find the Data table cell\n- Click to insert an empty Data table cell in your notebook\n- Select *us_imports* as a source in the Data table cell","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":61,"value":"---\n### Math transforms!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"// Return an array of all values in the 'value' property of us_imports, log transformed\n// exponent ^ in javascript is ** character\nus_imports.map(d => Math.log(d.value))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"showMe(`logValues = us_imports.map(d => Math.log(d.value))`, {\n dependencies: { us_imports }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"What if we want to add this as a new column? ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"// Create a new array, usLogValue, containing all existing properties and ADDING the log transformed value as a property named logValue:\n// spread operator ... says keep everything and add 1 more\nusLogValue = us_imports.map(d => ({...d, logValue: Math.log(d.value)}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"showMe(\n `usLogValue = us_imports.map(d => ({...d, logValue: Math.log(d.value)}))`,\n {\n dependencies: { us_imports }\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"Other [Math](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math) operations we may want to try: \n\n- `Math.log`: natural log\n- `Math.log10`: log base 10 of a number\n- `Math.exp`: exponentiate (base _e_)\n- `Math.sqrt`: square root\n\nAnd properties: \n\n- Math.E\n- Math.PI","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"---\n## Activity 3\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":158,"value":"\nCreate a histogram of the log-transformed values (logValue) in _usLogValue_:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":205,"value":"Plot.plot({\n marks: [\n Plot.rectY(usLogValue, Plot.binX({y: \"count\"}, {x: \"logValue\"})),\n Plot.ruleY([0])\n ]\n})\n// use bins if it is numerical value\n// usse groups if it is categorical value","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"Plot.plot({\n marks: [\n Plot.rectY(us_imports, Plot.binX({y: \"count\"}, {x: d => Math.log(d.value)})),\n Plot.ruleY([0])\n ]\n})\n// can add, thresholds or intervals to modify bins","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"showMe(\n `Plot.plot({\n marks: [\n Plot.rectY(usLogValue, Plot.binX({y: \"count\"}, {x: \"logValue\"})),\n Plot.ruleY([0])\n ]\n})`,\n {\n dependencies: { us_imports }\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"Now try doing the transform _within_ Observable Plot:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"showMe(\n `Plot.plot({\n marks: [\n Plot.rectY(us_imports, Plot.binX({y: \"count\"}, {x: d => Math.log(d.value)})),\n Plot.ruleY([0])\n ]\n})`,\n {\n dependencies: { us_imports }\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"### Use Chart cell to do the same thing:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"Insert a Chart cell below, choose usLogValue as a source, and create a histogram of the log-transformed values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":218,"value":"// just released 2 weeks ago\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"Plot.plot({\n color: {\n legend: true\n },\n marks: [\n Plot.auto(usLogValue, {x: {value: \"value\", reduce: \"sum\"}, y: \"Sector\", fx: \"year\", color: \"Sector\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"---\n## Activity 4","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"## Visualization continued - Reducing, customizing, and adding interactivity!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"Observable Inputs are lightweight user interface elements (sometimes called widgets) that let a user change selected values, ranges, colors, and more - and are usually connected to data or charts to make them dynamic.\n\nIn this activity, we'll customize the chart below, then make it interactive (in multiple ways!).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"Sector keys: \n\n- AG: Agricultural products\n- CH: Chemicals and related products\n- EL: Electronic products\n- EP: Energy-related products\n- FP: Forest products\n- FW: Footwear\n- MM: Minerals and metals\n- MS: Miscellaneous manufactures\n- MT: Machinery\n- TE: Transportation equipment\n- TX: Textiles and apparel\n- XX: Special product classifications in HTS chapters 98 and 99","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":235,"value":"// example of slider called height\nviewof height = Inputs.range([400, 1200], {label: \"Chart Height:\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"viewof radios = Inputs.radio([\"A\", \"B\"], {label: \"Select one\", value: \"A\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"viewof pickSector = Inputs.radio(us_imports.map((d) => d.Sector), {\n label: \"Select one\",\n value: \"A\",\n unique: true, // ensures each only appears once\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"pickSector","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"//original code\nPlot.plot({\n marks: [\n Plot.barX(\n us_imports,\n Plot.groupY(\n { x: \"sum\" },\n {\n x: \"value\",\n y: \"Sector\",\n sort: { y: \"x\", reverse: true }\n }\n )\n )\n ],\n x: { tickFormat: \".1s\" },\n width: 900\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"// new code with conditional fill\nPlot.plot({\n marks: [\n Plot.barX(\n us_imports,\n Plot.groupY(\n { x: \"sum\" },\n {\n x: \"value\",\n y: \"Sector\",\n fill: d => d.Sector === pickSector ? \"red\" : \"gray\", // add conditional fill statement\n sort: { y: \"x\", reverse: true }\n }\n )\n )\n ],\n x: { tickFormat: \".1s\" },\n width: 900\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"viewof pickColor = Inputs.color({label: \"Pick Favorite background color\", value: \"#4682b4\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"pickColor","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"// new code with conditional fill\nPlot.plot({\n marks: [\n Plot.barX(\n us_imports,\n Plot.groupY(\n { x: \"sum\" },\n {\n x: \"value\",\n y: \"Sector\",\n fill: d => d.Sector === pickSector ? \"red\" : pickColor, // add conditional fill statement\n sort: { y: \"x\", reverse: true }\n }\n )\n )\n ],\n x: { tickFormat: \".1s\" },\n width: 900\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"import { showMe } from \"@observablehq/show-me\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"import { addTooltips } from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"