3e:null 3f:["$","title",null,{"children":"Session 2: Introduction to Observable Plot (Follow-along version) | TRSS | Observable"}] 45:T4a8,- [All course recordings](https://www.youtube.com/watch?v=tHorkp-WCQY&list=PLOHIJAFwtkEevglMLsR9wBnXpPK3QY_Go) - Session 1: [slides](https://docs.google.com/presentation/d/e/2PACX-1vQxvKDGkfiatd5fcGSIPZuEKUpRAq02UHMo6HC9_cJqKsNx5CT-6LAsWr72f5oPfq7Xi_-gJypxaggz/pub?start=false&loop=false&delayms=3000) | [code key ](https://observablehq.com/@observablehq/plot-session-1-code-key) - Session 2: [slides](https://docs.google.com/presentation/d/e/2PACX-1vRbctfgXwRAiIJGBRELygOkQ7uYjLWDUU6GpjlyFwgpoomW5sheZydbvq2Cv0hIvtuIDMbCTC3bUokD/pub?start=false&loop=false&delayms=3000#slide=id.g290bcce257c_0_0) | [code key](https://observablehq.com/@observablehq/plot-session-2-code-key) - Session 3: [slides](https://docs.google.com/presentation/d/e/2PACX-1vQUSJTQu9ENukUeVTGO7p-ZFvd_mtJr2E-vfZgpU8IaqSk0Fg9BRALLhCYsOlgakQDcQ_Trd-cvj4VM/pub?start=false&loop=false&delayms=3000) | [code key](https://observablehq.com/@observablehq/plot-session-3-code-key) - Session 4: [slides](https://docs.google.com/presentation/d/e/2PACX-1vTYeVDfeZFRF_CCqNkHfXf11im_6bCzu6afT[…]gD4A-J5yv25btEVDyc8FP/pub?start=false&loop=false&delayms=3000) | [code-key](https://observablehq.com/@observablehq/plot-session-4-code-key)46:[{"id":"108539582ad221030c84327722d5de8f236f0e5201bf6658edce9fabaaac0d0c183dea39c9140ebb611e362aa69831e6c703a8d4a6d35b31b27c528f81410af9","href":"https://static.observableusercontent.com/files/108539582ad221030c84327722d5de8f236f0e5201bf6658edce9fabaaac0d0c183dea39c9140ebb611e362aa69831e6c703a8d4a6d35b31b27c528f81410af9","name":"mackCreekVertebrates.csv","type":"text/csv","lastModified":1744817834681.618,"size":2680032}] 43:{"id":"d8ce1bbefc325b7b","slug":null,"title":"Session 2: Introduction to Observable Plot (Follow-along version)","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-04-16T15:37:14.681Z","update_time":"$D2025-04-18T16:35:11.735Z","view_time":null,"first_public_time":"$D2025-04-16T15:37:14.681Z","has_unpublished_edits":null,"fork":{"id":"1740831e7bae1422","slug":"plot-session-2-follow-along","title":"Session 2: Introduction to Observable Plot (Follow-along version)","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d23f4772d2636bfa","login":"trss","name":"TRSS","avatar_url":"https://avatars-next.observableusercontent.com/cf75fa02188cff9d08ad21efa4d0fa7074c8dcaedce88236eef651d212e5964f","tier":"starter_2024","bio":"","following":false},"version":530,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f50c9bb109895dae","login":"trss","name":"trss","avatar_url":"https://avatars-next.observableusercontent.com/3349e6e48487259972ccf248f2400cb670e60904d75fa82437c27c3c3c1b276f","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"d23f4772d2636bfa","login":"trss","name":"TRSS","avatar_url":"https://avatars-next.observableusercontent.com/cf75fa02188cff9d08ad21efa4d0fa7074c8dcaedce88236eef651d212e5964f","tier":"starter_2024","role":"editor"},{"type":"individual","id":"f50c9bb109895dae","login":"trss","name":"trss","avatar_url":"https://avatars-next.observableusercontent.com/3349e6e48487259972ccf248f2400cb670e60904d75fa82437c27c3c3c1b276f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"fd724e4d9ef73001","slug":"plot-course","title":"Introduction to Data Visualization in Observable Plot Course by Allison Horst","owner":{"id":"d23f4772d2636bfa","login":"trss","name":"TRSS"}},"type":"notebook","body":{"titling":"auto","title":"Session 2: Introduction to Observable Plot (Follow-along version)","cells":[{"id":0,"value":"# Session 2: Introduction to Observable Plot (Follow-along version)\n## Scales, transforms, and more customization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"## Activity 1: Plot essentials recap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"The data previewed below is for coastal giant salamanders recorded over time in Mack Creek, Andrews Experimental Forest ([Gregory and Arismendi 2023](https://doi.org/10.6073/pasta/753b1ca1837049bc7c3e77e784408a1e)).\n\nLet's warm up by making a chart of the relationship between total length (mm) and weight. Then, we will update a few options (constants and channels).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"salamanders","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":478,"value":"Plot.plot({\n marks: [\n Plot.dot(salamanders, {\n x: \"totalLength\",\n y: (d) => d.weight,\n opacity: 0.5,\n fill: \"creekSection\",\n tip: true\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"showMe(`Plot.plot({\n marks: [\n Plot.frame(),\n Plot.dot(salamanders, {\n x: \"totalLength\",\n y: d => d.weight, // You can use functions instead of \"variableName\"!\n fill: \"creekSection\",\n opacity: 0.5,\n r: \"totalLength\",\n // sort: {channel: \"fill\"},\n tip: true\n })\n ]\n})`, {dependencies: {salamanders}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"## Activity 2: More fun with scales (and beyond)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":230,"value":"From what we've learned about scales, let's update the chart we made in Activity 1 in several ways: \n\n- Convert the y-axis scale to \"log\" (then try some others, like \"pow\")\n- Reverse the x-axis scale\n- Update the x-axis domain\n- Customize the color scheme\n- Bonus: Add gridlines and labels!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":484,"value":"Plot.plot({\n marks: [\n Plot.dot(salamanders, {\n x: \"totalLength\",\n y: (d) => d.weight,\n opacity: 0.5,\n fill: \"creekSection\",\n tip: true\n })\n ],\n x: { domain: [0, 400], reverse: true, ticks: 5, tickFormat: \".2f\" },\n y: { type: \"pow\", exponent: 0.5, grid: true },\n color: { range: [\"cyan\", \"purple\"] }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"showMe(`Plot.plot({\n marks: [\n Plot.frame(),\n Plot.dot(salamanders, {\n x: \"totalLength\",\n y: d => d.weight,\n fill: \"creekSection\", // Later, switch to totalLength to see continuous custom scheme!\n opacity: 0.5,\n r: \"totalLength\",\n sort: {channel: \"fill\"},\n tip: true\n })\n ],\n y: {type: \"pow\", exponent: 0.5},\n x: {domain: [0, 400], ticks: 5, reverse: true},\n color: {range: [\"cyan\", \"purple\"], legend: true},\n grid: true\n})`, {dependencies: {salamanders}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"## Activity 3: Bin transform for summary values over time","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":310,"value":"Again using the salamanders data, let's make a bar chart (thinking carefully about the mark, here) to visualize the change in _mean salamander length_ over different intervals of time (e.g. first for different years, then by different time spans). \n\nWe'll do that from scratch using a combination of `Plot.rectY()` and `Plot.binX()`, customizing the interval option to reveal the mean over different bins of time (e.g. 1 year, 5 years, 10 years). \n\nThen, we'll see how we can get up-and-running even more quickly by starting with the Chart cell, then converting to JavaScript to keep customizing!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":507,"value":"Plot.plot({\n color: { legend: true },\n marks: [\n Plot.rectY(\n salamanders,\n Plot.binX(\n { fill: \"mean\", y: \"mean\" },\n {\n x: \"date\",\n y: \"totalLength\",\n fill: \"totalLength\",\n tip: true,\n interval: \"5 years\"\n }\n )\n ),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"showMe(`Plot.plot({\n marks: [\n Plot.rectY(\n salamanders,\n Plot.binX(\n { y: \"mean\" },\n { x: \"date\", y: \"totalLength\", interval: \"5 years\"}\n )\n )\n ]\n})`, {dependencies: {salamanders}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"## Activity 4: Group transform for counts by reach","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":329,"value":"This time, let's start with the Chart cell to create a summary view of total counts of salamanders by creekSection. Then we'll check out the JavaScript code (which you could also write by hand!).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":514,"value":"Plot.plot({\n marks: [\n Plot.barX(\n salamanders,\n Plot.groupY(\n { x: \"count\" },\n { y: \"creekSection\", tip: true, fill: \"creekSection\" }\n )\n ),\n Plot.ruleX([0])\n ],\n color: { range: [\"purple\", \"magenta\"] }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"## Activity 5: Normalize transform","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":338,"value":"There are _many_ more built-in transforms in Observable Plot. Let's wrap the day with a transform that normalizes values to some basis (e.g. the first value, mean value, max value, or something else!). We'll use more transforms in future sessions, too! \n\nFor this activity, we'll use a different dataset with lake **volume** for Mono Lake, California — a saline lake supporting a rich and diverse ecosystem, which saw its levels drop drastically after water started being diverted to Los Angeles in the early 1940s. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":421,"value":"monoYearly","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":419,"value":"\nWe'll start by creating a line graph, then normalize to different basis..es?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":519,"value":"Plot.plot({\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(\n monoYearly,\n // { x: \"year\", y: \"volume\" }\n Plot.normalizeY({ x: \"year\", y: \"volume\", basis: \"mean\" })\n )\n ],\n marginLeft: 100\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"showMe(`Plot.plot({\n marks: [\n Plot.line(monoYearly, Plot.normalizeY({x: \"year\", y: \"volume\", basis: \"first\"})) // Try mean, min, last,!\n ],\n marginLeft: 60\n})`, {dependencies: {monoYearly}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"---\n## Congratulations! Done with Session 2!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":415,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":403,"value":"import {monoYearly} from \"@observablehq/keep-saving-mono-lake\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"SELECT \n SAMPLEDATE as date\n , SECTION as creekSection\n , SPECIES as species\n , LENGTH2 as totalLength\n , WEIGHT as weight \nFROM \"mackCreekVertebrates\"\nWHERE SPECIES='DITE'","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"salamanders","database":"mackCreekVertebrates.csv"},{"id":429,"value":"import { showMe } from \"@observablehq/show-me\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"