31:T546,- **Session 1 materials:** [key](https://observablehq.com/@observablehq/ds-workflows-in-js-session-1-key) | [follow-along notebook](https://observablehq.com/@observablehq/ds-workflows-in-js-session-1-blank) | [slides](https://docs.google.com/presentation/d/e/2PACX-1vQPakekH-wnGvApH2XV3Yys9OMbxS-gAqnc7O5JQFCqTRdnd2RnrF3klgwSSa4n3UEMtTxpzComEwHw/pub?start=false&loop=false&delayms=3000) | [recording](https://www.youtube.com/watch?v=IHX6lHp1Hq0&t=1790s) - **Session 2 materials:** [key](https://observablehq.com/@observablehq/ds-workflows-in-js-session-2-key) | [follow-along notebook](https://observablehq.com/@observablehq/ds-workflows-in-js-session-2-blank) | [slides](https://docs.google.com/presentation/d/e/2PACX-1vQNETAbaaLkZZihSwTsSNeYdg4UkvkPnXItEs1be_pJPwYBzMQaV9EHCPBWoUliHDWgH2NY_WMkn90j/pub?start=false&loop=false&delayms=3000) | [recording](https://www.youtube.com/watch?v=myU1ZSjpRN0) - **Session 3 materials:** [key](https://observablehq.com/@observablehq/ds-workflows-in-js-session-3-key) | [follow-along notebook](https://observablehq.com/@observablehq/ds-workflows-in-js-session-3-blank) | [slides](https://docs.google.com/presentation/d/e/2PACX-1vSPaqCrg8ZbjeBhZnd85nozVBiFSzvctOewc_hG2DXbJCm0IpkWpW9eXztvcNabHAbakqAVSzyq3sDn/pub?start=false&loop=false&delayms=3000) | [recording](https://www.youtube.com/watch?v=NoHUp9_4dyM&t=5s)32:[{"id":"46d380263a26043f279a123d3da73568f24fde693603d597318ccc51cebe48d48a6f906f575e3f126d21302cfaeaa6b917e75dae24ca1f2a8b51d2240c801788","href":"https://static.observableusercontent.com/files/46d380263a26043f279a123d3da73568f24fde693603d597318ccc51cebe48d48a6f906f575e3f126d21302cfaeaa6b917e75dae24ca1f2a8b51d2240c801788","name":"HTL-MAR-FiddlerCrabBodySize.csv","type":"text/csv","lastModified":1688831448903.19,"size":20899}] 2f:{"title":"Data science workflows in JavaScript - Session 1 Key","cells":[{"id":0,"value":"# Data science workflows in JavaScript - Session 1 Key\n","pinned":false,"hidden":false,"mode":"md"},{"id":336,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":319,"value":"Welcome to Session 1 of 3 in our DS Workflows in JS workshop series from Observable!","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"## Session 1 Learning Objectives \nAfter completing Session 1, participants will be able to: \n\n- Attach a file in an Observable notebook\n- Explore the data in tabular form in the Data table cell\n- Do some basic data wrangling in the Data table cell\n- Use the Chart cell and Observable Plot for exploratory data visualization\n- Import a JavaScript library in a notebook\n- Perform and visualize results of simple linear regression\n- Share a notebook link with external viewers","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"## Meet the data\n\nIn Session 1, we'll be exploring the relationship between environmental conditions (e.g. water temperature) and fiddler crab size for crabs observed along the east coast of the United States from Florida to Massachussetts ([D. Johnson 2019](https://portal.edirepository.org/nis/mapbrowse?packageid=knb-lter-pie.540.1)).","pinned":false,"hidden":false,"mode":"md"},{"id":31,"value":"

Fiddler crab (*Minuca pugnax*). Photo by David S. Johnson. Published in Crabby New Neighbors: Climate Change in the Plum Island Ecosystem by Emily Greenhalgh, University of Chicago Marine Biological Laboratory News, 21 May 2021.

","pinned":false,"hidden":false,"mode":"html"},{"id":34,"value":"There are 9 variables in the data: \n\n- **Date**: record date\n- **Site:** a 3 character site identifier\n- **Latitude:** the site latitude in degrees\n- **Replicate:** a number, indicating the crab recorded (30 at each site)\n- **carapace_width:** crab carapace width, in millimeters\n- **MATA:** mean annual air temperature in degrees Celsius\n- **SATA:** standard deviation of annual air temperature in degrees Celsius\n- **MATW:** mean annual water temperature in degrees Celsius\n- **SATW:** standard deviation of annual water temperature in degrees Celsius","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"**Data: **\n Johnson, D. 2019. Fiddler crab body size in salt marshes from Florida to Massachusetts, USA at PIE and VCR LTER and NOAA NERR sites during summer 2016. ver 1. Environmental Data Initiative. https://doi.org/10.6073/pasta/4c27d2e778d3325d3830a5142e3839bb.\n","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"## Step 0: Fork the follow-along notebook\n\nPress the Fork button in the upper right of the shared notebook to create your own copy (requires an Observable account). You can follow along _without_ an account in tinker mode, but your work will not be saved.","pinned":false,"hidden":false,"mode":"md"},{"id":147,"value":"## Step 1: Quick intro to working in a notebook\n\n- Cells and the Add cell menu\n- Running cells\n- Files pane","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"## Step 2: Attach the data in your notebook\nClick on the link below to download the fiddler crab data from the Environmental Data Initiative Data Portal. The file will be saved as `HTL-MAL-FiddlerCrabBodySize.csv`.","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"Download the crab data!","pinned":false,"hidden":false,"mode":"html"},{"id":63,"value":"Attach the file to your notebook using one of the following methods: \n\n1. Clicking on the Files pane icon (TODO add icon) in the top right of the notebook, clicking the plus sign to File attachments, then finding and choosing the `HTL-MAL-FiddlerCrabBodySize.csv` file you downloaded above.\n\n2. Drag the file over the Files pane in your notebook to attach it.","pinned":false,"hidden":false,"mode":"md"},{"id":71,"value":"## Step 3: Load and take a look at the data\nIn the Files pane, click the \"Insert into notebook\" icon to the right of the file. This will automatically create a new interactive Data table cell, where you can preview the data in tabular form and even do some basic exploration and data wrangling.","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"crabs = await FileAttachment(\"HTL-MAR-FiddlerCrabBodySize.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"What is `crabs`? An **array of objects**. Let's take a look at it outside of the Data table cell to see how that looks.","pinned":false,"hidden":false,"mode":"md"},{"id":112,"value":"crabs","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"## Step 4: A bit of data wrangling\n\nThis data is already _tidy_, but we may want to simplify it a bit more. Here, we will select and rename certain columns in two ways: \n\n- Right in the Data table cell (no code)\n- In JavaScript","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"Check the names (there is something a bit crabby):","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"Object.keys(crabs[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"Then do our wrangling in JavaScript:","pinned":false,"hidden":false,"mode":"md"},{"id":94,"value":"crabsJS = crabs.map(d => ({lat: d.Latitude,\n site: d[\"Site \"],\n sizeMm: d.carapace_width,\n airTempC: d.MATA,\n waterTempC: d.MATW}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"## Step 5: Exploratory data visualization\nLet’s make some quick exploratory charts with [Observable Plot](https://observablehq.com/plot/), a JavaScript library for data visualization by the team that built D3. We’ll do this in several ways: \n\n1. Using the Chart cell in Observable, then ejecting to JS for customization\n2. Using code snippets for Observable Plot\n\n_A note on using Observable Plot in our notebooks:_ a number of JavaScript libraries are automatically available when working in Observable notebooks as [recommended libraries in the standard library](https://observablehq.com/@observablehq/recommended-libraries), including D3, Observable Plot, lodash, and others commonly used on the platform, which is why you don’t need to separately install or load Plot to use it here. In the next section we’ll see how we can load a library that is **not** automatically available for use in Observable.","pinned":false,"hidden":false,"mode":"md"},{"id":140,"value":"### Chart cell","pinned":false,"hidden":false,"mode":"md"},{"id":161,"value":"First, let’s make a histogram of all crab sizes in the dataset. Then, we’ll facet by other variables to see if we can notice any interesting trends. Add a new Chart cell by searching for Chart in the Add cell menu, then choose the variable(s) you want to visualize.","pinned":false,"hidden":false,"mode":"md"},{"id":153,"value":"Plot.plot({\n marks: [\n Plot.auto(crabs, {x: \"carapace_width\", fy: \"Site \", color: \"#c83dac\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"Plot.plot({\n marks: [\n Plot.rectY(\n crabs,\n Plot.binX(\n { y: \"count\" },\n {fy: \"Site \", x: \"carapace_width\", fill: \"red\", tip: true }\n )\n ),\n Plot.frame({strokeOpacity: 0.1})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"### Observable Plot snippets","pinned":false,"hidden":false,"mode":"md"},{"id":173,"value":"Plot.plot({\n marks: [\n Plot.dot(crabsJS, {y: \"lat\", x: \"sizeMm\", fill: \"site\", opacity: 0.5, r: 5}),\n Plot.frame({stroke: \"#ccc\"})\n ],\n height: 500,\n inset: 20,\n y: {ticks: 5},\n color: {legend: true}\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"Plot.plot({\n marks: [\n Plot.dot(crabsJS, {y: \"sizeMm\", x: \"waterTempC\", fill: \"gray\", opacity: 0.5, r: 5}),\n Plot.frame({stroke: \"#ccc\"})\n ],\n height: 500,\n inset: 20,\n y: {ticks: 5},\n grid: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"## Step 6: Simple linear regression","pinned":false,"hidden":false,"mode":"md"},{"id":224,"value":"We will use the SimpleLinearRegression method from the [ml.js](https://github.com/mljs/ml) JavaScript library. Since ml.js is _not_ automatically available, we’ll use [require](https://observablehq.com/@observablehq/require) to access it in our notebook:","pinned":false,"hidden":false,"mode":"md"},{"id":222,"value":"ML = require(\"https://www.lactame.com/lib/ml/6.0.0/ml.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"Now, we have access to the methods in ml.js, including [`SimpleLinearRegression`](https://github.com/mljs/regression-simple-linear), which will estimate parameters for a linear model by ordinary least squares.","pinned":false,"hidden":false,"mode":"md"},{"id":232,"value":"crabsLM = new ML.SimpleLinearRegression(crabsJS.map(d => d.lat), crabsJS.map(d => d.sizeMm))","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"crabsLM.slope","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"crabsLM.intercept","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"crabsLM.predict(36)","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"What did we just reveal for fiddler crabs on the east coast? That they follow **Bergmann's Rule!**","pinned":false,"hidden":false,"mode":"md"},{"id":251,"value":"## Step 7: Final visualization and summary statement\nTo wrap it up, let’s create a final visualization with a summary statement. We’ll again use Observable Plot to create and customize a chart. ","pinned":false,"hidden":false,"mode":"md"},{"id":260,"value":"Plot.plot({\n marks: [\n Plot.dot(crabsJS, {x: \"lat\", y: \"sizeMm\", fill: \"steelblue\", opacity: 0.6, r: 4}),\n Plot.dot(crabsJS, Plot.groupX({ y: \"mean\" }, { x: \"lat\", y: \"sizeMm\", tip: true, fill: \"orange\", symbol: \"square\", r: 4})),\n Plot.linearRegressionY(crabsJS, {x: \"lat\", y: \"sizeMm\"}),\n Plot.frame()\n ],\n x: {label: \"Latitude (degrees)\", domain: [28, 44]},\n y: {label: \"Carapace size (millimeters)\", domain: [5, 25], ticks: 5, grid: true}\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"On average, we expect the mean size of fiddler crab carapace to increase by ${crabsLM.slope.toFixed(3)} millimeters with each additional one degree in latitude on the US east coast from Florida to Massachusetts.","pinned":false,"hidden":false,"mode":"md"},{"id":306,"value":"## Step 8: Share your notebook\nThere are a number of ways to share your notebook with others. The easiest is to share the notebook link - that’s right, your notebook is already a live page. At the top of your notebook, click the Share notebook to update the sharing settings, add colleagues as viewers or editors, and even make your own custom URL. \n\nSend along the link, and anyone with permissions (or the public!) can see your work. ","pinned":false,"hidden":false,"mode":"md"},{"id":315,"value":"## Today we learned: \n\n- How to attach a CSV in an Observable notebook\n- Data table cell to inspect & wrangle data\n- A little data wrangling in JS\n- Chart cell and Observable Plot for quick exploratory data viz\n- Require to load a JavaScript module\n- Simple linear regression in JS with ml.js\n- Creating a final visualization\n- Referring to code outputs in markdown with template literals\n- Sharing a notebook URL\n- Bergmann's Rule! ","pinned":false,"hidden":false,"mode":"md"}],"files":"$W32","stdlib":"1","titling":"auto"}