29:null 2a:["$","title",null,{"children":"Session 4: Introduction to Observable Plot (Follow-along version) | Angie Hjort | Observable"}] 2f: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)30:[{"id":"9786511a2b1e02704eecec9f8517b0c81d6543036d0fb2b5b7e429890ae0d1a5861ab1077e35de98c1de3b398c3dbd8be6b39742ba382102c07c74a068fca7be","href":"https://static.observableusercontent.com/files/9786511a2b1e02704eecec9f8517b0c81d6543036d0fb2b5b7e429890ae0d1a5861ab1077e35de98c1de3b398c3dbd8be6b39742ba382102c07c74a068fca7be","name":"aaplStock.csv","type":"text/csv","lastModified":1698336039364.149,"size":87409},{"id":"5f12706b7f060df1c33819deef453fb724ccb95fadef85ca2b5f9257617e2201e511b583416175bf1bc9854454b4839e96db946cb853a54d56d23a5ccc19d2f0","href":"https://static.observableusercontent.com/files/5f12706b7f060df1c33819deef453fb724ccb95fadef85ca2b5f9257617e2201e511b583416175bf1bc9854454b4839e96db946cb853a54d56d23a5ccc19d2f0","name":"googStock.csv","type":"text/csv","lastModified":1698336039364.149,"size":85307},{"id":"ff73290f3fccc5db55f09031bb845e639a07e444ca9fbcf83f2dbb4600a38bf4baccb2a85df3c24dba57a4ed64c230dcf1a87604453969495db835c5f3cbebf2","href":"https://static.observableusercontent.com/files/ff73290f3fccc5db55f09031bb845e639a07e444ca9fbcf83f2dbb4600a38bf4baccb2a85df3c24dba57a4ed64c230dcf1a87604453969495db835c5f3cbebf2","name":"us-counties-10m.json","type":"application/json","lastModified":1698336039364.149,"size":842177},{"id":"10cf48d33362c825a287a02c7c3ffa74dd2f2721aefabc469e526d1941cd1dcb086e824a7d03210c87705b1726ffc922a211eaad63e62483be55c2fafb74f0fa","href":"https://static.observableusercontent.com/files/10cf48d33362c825a287a02c7c3ffa74dd2f2721aefabc469e526d1941cd1dcb086e824a7d03210c87705b1726ffc922a211eaad63e62483be55c2fafb74f0fa","name":"wb_tidy.csv","type":"text/csv","lastModified":1698336039364.149,"size":504352},{"id":"7f680522a3e5b934ed914e49331f0e4b92e3b5cdb73842ef6a978593dea26dacda9a3a145609076bbbcc99eed89a3a852828c3b85b55326bd9e39932d93e64df","href":"https://static.observableusercontent.com/files/7f680522a3e5b934ed914e49331f0e4b92e3b5cdb73842ef6a978593dea26dacda9a3a145609076bbbcc99eed89a3a852828c3b85b55326bd9e39932d93e64df","name":"tslaStock.csv","type":"text/csv","lastModified":1698336039364.149,"size":87114},{"id":"55a16bb55ce30dcb1aa69279dceb74daf5dbc8e98cef33393697b9ac9ad03df4fafd5a1d4393fd94f6d1a68a6c5df0a4817262bf312bde95a69892b625c40f1b","href":"https://static.observableusercontent.com/files/55a16bb55ce30dcb1aa69279dceb74daf5dbc8e98cef33393697b9ac9ad03df4fafd5a1d4393fd94f6d1a68a6c5df0a4817262bf312bde95a69892b625c40f1b","name":"Power_Plants.csv","type":"text/csv","lastModified":1698336039364.149,"size":3216985}] 2d:{"id":"d2acab54ccbd7665","slug":null,"title":"Session 4: Introduction to Observable Plot (Follow-along version)","thumbnail":"eacd3a46bfddeac509343ca19f146072e1c093d4de5f42975206263e4ed2a39e","access_level":"public","create_time":"$D2023-10-26T16:00:39.364Z","update_time":"$D2023-10-26T16:56:51.897Z","view_time":null,"first_public_time":"$D2023-10-26T16:00:39.364Z","fork":{"id":"e9fa81491d42ffcd","slug":"plot-session-4-follow-along","title":"Session 4: Introduction to Observable Plot (Follow-along version)","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c555e02063f451b5","login":"angiehjort","name":"Angie Hjort","avatar_url":"https://avatars-next.observableusercontent.com/d3c0d6d22f1525b9f9f1d4c8187de1dc20adc65c5baeb538c15672fb523883fa","tier":"starter_2024"},"version":174,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1245953aabb247aa","login":"angiehjort","name":"Angie Hjort","avatar_url":"https://avatars-next.observableusercontent.com/d3c0d6d22f1525b9f9f1d4c8187de1dc20adc65c5baeb538c15672fb523883fa","tier":null}],"members":[{"type":"individual","id":"1245953aabb247aa","login":"angiehjort","name":"Angie Hjort","avatar_url":"https://avatars-next.observableusercontent.com/d3c0d6d22f1525b9f9f1d4c8187de1dc20adc65c5baeb538c15672fb523883fa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"bca6f2c110294361","slug":"observable-course","title":"Observable course","owner":{"id":"c555e02063f451b5","login":"angiehjort","name":"Angie Hjort"}},"type":"notebook","body":{"title":"Session 4: Introduction to Observable Plot (Follow-along version)","cells":[{"id":3,"value":"# Session 4: Introduction to Observable Plot (Follow-along version)\n## Interactivity","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"## Activity 1: Crosshairs and pointer transform","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"**Data:** The World Bank DataBank","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"wb2010","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"Plot.plot({\n marks: [\n Plot.dot(wb2010, { x: \"gdp\", y: \"life_exp\", fill: \"gray\" }),\n Plot.dot(\n wb2010,\n Plot.pointer({\n x: \"gdp\",\n y: \"life_exp\",\n fill: \"red\",\n r: 10,\n opacity: 0.5,\n tip: true,\n title: d => `Country: ${d.country_name}`\n })\n ),\n Plot.crosshair(wb2010, { x: \"gdp\", y: \"life_exp\", fill: \"gray\" })\n ],\n x: { type: \"log\" },\n margin: 50\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"showMe(`Plot.plot({\n marks: [\n Plot.dot(wb2010, { x: \"gdp\", y: \"life_exp\", fill: \"gray\"}),\n Plot.dot(\n wb2010,\n Plot.pointer({\n x: \"gdp\",\n y: \"life_exp\",\n fill: \"red\",\n r: 8,\n opacity: 0.6,\n tip: true\n })\n ),\n Plot.crosshair(wb2010, { x: \"gdp\", y: \"life_exp\", textFill: \"red\", textStroke: \"white\", strokeWidth: 3 })\n ],\n x: {type: \"log\"},\n margin: 50\n})`, {dependencies: {wb2010}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"## Activity 2: Custom tooltips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"Three quick ways to customize your tooltips!\n\n- Add more channels\n- Formatting and style\n- Tip mark for static annotations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"Plot.plot({\n marks: [\n Plot.lineY(stocks, {\n x: \"Date\",\n y: \"Close\",\n stroke: \"symbol\",\n tip: true,\n channels: {\n Open: \"Open\"\n }\n }),\n Plot.tip(stocks, Plot.selectMaxY({x: \"Date\", y: \"Close\", stroke: \"symbol\", \n fill: \"yellow\", anchor: \"top\" }))\n ],\n color: { legend: true }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"showMe(`Plot.plot({\n marks: [\n Plot.lineY(stocks, {\n x: \"Date\",\n y: \"Close\",\n stroke: \"symbol\",\n tip: true,\n channels: {\n Open: \"Open\"\n }\n }),\n Plot.tip(\n stocks,\n Plot.selectMaxY({ x: \"Date\", y: \"Close\", stroke: \"symbol\", anchor: \"right\", fill: \"yellow\"})\n ) // Static annotation!\n ],\n color: { legend: true }\n})`, {dependencies: {stocks}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"## Activity 3: Dropdown and slider","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"Add a dropdown menu to select a specific Region.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"viewof region = Inputs.select(wb.map(m => m.region), {unique: true, label: \"Select one\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"wb","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"showMe(`selectRegion = Inputs.select(wb.map(d => d.region), {label: \"Select region:\", unique: true})`, {dependencies: {wb}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"viewof time = Inputs.range(d3.extent(wb, d => d.year), {label: \"year\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"Add a slider so the user can visualize values at or below a chosen year.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"showMe(`pickYear = Inputs.range(d3.extent(wb, d => d.year), {label: \"Year:\", step: 1, value: d3.min(wb, d => d.year)})`, {dependencies: {wb}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"Update the chart below so that: \n\n- It only shows observations for countries in the selected region\n- Only observations *at or below* the selected year are visible\n- Observations at the selected year are opaque, but all previous are more transparent","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"Plot.plot({\n marks: [\n Plot.dot(wb, {\n filter: f => f.region === region && f.year <= time,\n sort: \"time\",\n x: \"gdp\",\n y: \"co2\",\n stroke: \"white\",\n strokeOpacity: 0.5,\n fill: \"country_name\",\n r: \"gdp\",\n })\n ],\n x: { type: \"log\" },\n y: { type: \"log\" },\n r: { range: [3, 20] }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"showMe(`Plot.plot({\n marks: [\n Plot.dot(wb, {\n filter: (d) => d.region == region && d.year <= time,\n x: \"gdp\",\n y: \"co2\",\n fill: \"country_name\",\n r: \"gdp\",\n opacity: d => d.year == time ? 1 : 0.2\n })\n ],\n x: { type: \"log\" },\n y: { type: \"log\" },\n r: { range: [3, 20] }\n})`, {dependencies: {wb, region, time}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"## Activity 4: Input form with checkbox and radio","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"**Data:** [US Energy Information Administration US Energy Atlas](https://atlas.eia.gov/datasets/eia::power-plants/about)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"plants","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"Create a checkbox input with all states in the plants data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":157,"value":"viewof checkboxes = Inputs.checkbox(plants.map(m => m.state).sort(), {label: \"Select states\", value: [\"Alabama\"], unique: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"showMe(`pickStates = Inputs.checkbox(plants.map(d => d.state).sort(), {label: \"Select states to compare:\", unique: true, value: [\"Alabama\", \"Alaska\", \"Arizona\"]})`, {dependencies: {plants}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"Create a radio button input where a user selects the primary power source.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"viewof radios = Inputs.radio(plants.filter(f => checkboxes.includes(f.state)).map(m => m.primary_source), {label: \"Select one\", value: \"A\", unique: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"showMe(`pickSource = Inputs.radio(plants.map(d => d.primary_source), {label: \"Select primary source:\", unique: true, value: \"oil\"})`, {dependencies: {plants}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"Update the chart below to only compare data for the selected primary source, and across the selected states in the checkbox input.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"Plot.plot({\n marks: [\n Plot.barX(plants,\n Plot.groupY(\n { x: \"sum\" },\n {\n filter: f => checkboxes.includes(f.state) && f.primary_source == radios,\n x: \"total_capacity\",\n y: \"state\",\n fill: \"primary_source\",\n sort: { y: \"x\", reverse: true, limit: 10 }\n }\n )\n ),\n Plot.ruleX([0])\n ],\n marginLeft: 100\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"showMe(`Plot.plot({\n marks: [\n Plot.barX(\n plants.filter(\n (d) =>\n pickStates.includes(d.state) && d.primary_source == pickSource\n ),\n Plot.groupY(\n { x: \"sum\" },\n {\n x: \"total_capacity\",\n y: \"state\",\n fill: \"primary_source\",\n sort: { y: \"x\", reverse: true, limit: 10 }\n }\n )\n ),\n Plot.ruleX([0])\n ],\n marginLeft: 100\n})`, {dependencies: {plants, pickSource, pickStates}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"## Congratulations! Done with Session 4!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"World Bank data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"wb = FileAttachment(\"wb_tidy.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"wb2010 = wb.filter(d => d.year == 2010)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"US power plant data: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"SELECT \n Longitude as longitude\n , Latitude as latitude\n , Plant_Name as plant\n , City as city\n , County as county\n , StateName as state\n , Total_MW as total_capacity\n , (case when PrimSource = 'petroleum' then 'oil'\n when PrimSource = 'geothermal' then 'other'\n when PrimSource = 'biomass' then 'other'\n when PrimSource = 'pumped storage' then 'other'\n when PrimSource = 'batteries' then 'other'\n else PrimSource end) as 'primary_source'\n FROM \"Power_Plants\"","pinned":true,"hidden":true,"mode":"sql","author":"$undefined","summary":"$undefined","output":"plants","database":"Power_Plants.csv"},{"id":29,"value":"US spatial data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"us = FileAttachment(\"us-counties-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"Access state polygons:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"states = topojson.feature(us, us.objects.states)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"Stocks data: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"aapl = FileAttachment(\"aaplStock.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"goog = FileAttachment(\"googStock.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"tsla = FileAttachment(\"tslaStock.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"dateParse = d3.timeParse(\"%m/%d/%y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"stocks = aapl.map(d => ({...d, symbol: \"aapl\"})).concat(goog.map(d => ({...d, symbol: \"goog\"})), tsla.map(d => ({...d, symbol: \"tsla\"}))).map(d => ({...d, Date: dateParse(d.Date)}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"import { showMe } from \"@observablehq/show-me\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"