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":1698336424273.367,"size":87409},{"id":"5f12706b7f060df1c33819deef453fb724ccb95fadef85ca2b5f9257617e2201e511b583416175bf1bc9854454b4839e96db946cb853a54d56d23a5ccc19d2f0","href":"https://static.observableusercontent.com/files/5f12706b7f060df1c33819deef453fb724ccb95fadef85ca2b5f9257617e2201e511b583416175bf1bc9854454b4839e96db946cb853a54d56d23a5ccc19d2f0","name":"googStock.csv","type":"text/csv","lastModified":1698336424273.367,"size":85307},{"id":"ff73290f3fccc5db55f09031bb845e639a07e444ca9fbcf83f2dbb4600a38bf4baccb2a85df3c24dba57a4ed64c230dcf1a87604453969495db835c5f3cbebf2","href":"https://static.observableusercontent.com/files/ff73290f3fccc5db55f09031bb845e639a07e444ca9fbcf83f2dbb4600a38bf4baccb2a85df3c24dba57a4ed64c230dcf1a87604453969495db835c5f3cbebf2","name":"us-counties-10m.json","type":"application/json","lastModified":1698336424273.367,"size":842177},{"id":"10cf48d33362c825a287a02c7c3ffa74dd2f2721aefabc469e526d1941cd1dcb086e824a7d03210c87705b1726ffc922a211eaad63e62483be55c2fafb74f0fa","href":"https://static.observableusercontent.com/files/10cf48d33362c825a287a02c7c3ffa74dd2f2721aefabc469e526d1941cd1dcb086e824a7d03210c87705b1726ffc922a211eaad63e62483be55c2fafb74f0fa","name":"wb_tidy.csv","type":"text/csv","lastModified":1698336424273.367,"size":504352},{"id":"7f680522a3e5b934ed914e49331f0e4b92e3b5cdb73842ef6a978593dea26dacda9a3a145609076bbbcc99eed89a3a852828c3b85b55326bd9e39932d93e64df","href":"https://static.observableusercontent.com/files/7f680522a3e5b934ed914e49331f0e4b92e3b5cdb73842ef6a978593dea26dacda9a3a145609076bbbcc99eed89a3a852828c3b85b55326bd9e39932d93e64df","name":"tslaStock.csv","type":"text/csv","lastModified":1698336424273.367,"size":87114},{"id":"55a16bb55ce30dcb1aa69279dceb74daf5dbc8e98cef33393697b9ac9ad03df4fafd5a1d4393fd94f6d1a68a6c5df0a4817262bf312bde95a69892b625c40f1b","href":"https://static.observableusercontent.com/files/55a16bb55ce30dcb1aa69279dceb74daf5dbc8e98cef33393697b9ac9ad03df4fafd5a1d4393fd94f6d1a68a6c5df0a4817262bf312bde95a69892b625c40f1b","name":"Power_Plants.csv","type":"text/csv","lastModified":1698336424273.367,"size":3216985}] 2d:{"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"},{"id":4,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"## Activity 1: Crosshairs and pointer transform","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"**Data:** The World Bank DataBank","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"wb2010","pinned":false,"hidden":false,"mode":"ojs"},{"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 opacity: 0.6,\n r: 8,\n tip: true,\n title: (d) => `Country: ${d.country_name}\\nGDP: S{d.gdp}`\n })\n ),\n Plot.crosshair(wb2010, { x: \"gdp\", y: \"life_exp\" })\n ],\n x: { type: \"log\" },\n margin: 50\n})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":9,"value":"## Activity 2: Custom tooltips","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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(\n stocks,\n Plot.selectMaxY({\n x: \"Date\",\n y: \"Close\",\n stroke: \"symbol\",\n fill: \"yellow\",\n anchor: \"top-right\"\n })\n )\n ],\n color: { legend: true }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":12,"value":"## Activity 3: Dropdown and slider","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"Add a dropdown menu to select a specific Region.","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"viewof selectRegion = Inputs.select(\n wb.map((d) => d.region),\n { label: \"Select one\", unique: true }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":79,"value":"Add a slider so the user can visualize values at or below a chosen year.","pinned":false,"hidden":false,"mode":"md"},{"id":137,"value":"viewof pickYear = Inputs.range(\n d3.extent(wb, (d) => d.year),\n { label: \"Pick year\", step: 1 }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":15,"value":"Plot.plot({\n marks: [\n Plot.dot(wb, {\n filter: (d) => d.region == selectRegion && d.year <= pickYear,\n x: \"gdp\",\n y: \"co2\",\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"},{"id":64,"value":"showMe(`Plot.plot({\n marks: [\n Plot.dot(wb, {\n filter: (d) => d.region == selectRegion && d.year <= pickYear,\n x: \"gdp\",\n y: \"co2\",\n fill: \"country_name\",\n r: \"gdp\",\n opacity: d => d.year == pickYear ? 1 : 0.2\n })\n ],\n x: { type: \"log\" },\n y: { type: \"log\" },\n r: { range: [3, 20] }\n})`, {dependencies: {wb, selectRegion, pickYear}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"## Activity 4: Input form with checkbox and radio","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":18,"value":"plants","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"Create a checkbox input with all states in the plants data.","pinned":false,"hidden":false,"mode":"md"},{"id":142,"value":"viewof pickStates = Inputs.checkbox(plants.map((d) => d.state).sort(), {\n label: \"Select some\",\n value: [\"Alabama\", \"Alaska\"],\n unique: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":94,"value":"Create a radio button input where a user selects the primary power source.","pinned":false,"hidden":false,"mode":"md"},{"id":148,"value":"viewof radios = Inputs.radio([\"A\", \"B\"], {label: \"Select one\", value: \"A\"})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":21,"value":"Plot.plot({\n marks: [\n Plot.barX(\n plants.filter((d) => pickStates.includes(d.state)),\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})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":22,"value":"## Congratulations! Done with Session 4!","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"World Bank data:","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"wb = FileAttachment(\"wb_tidy.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"wb2010 = wb.filter(d => d.year == 2010)","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"US power plant data: ","pinned":false,"hidden":false,"mode":"md"},{"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","output":"plants","database":"Power_Plants.csv"},{"id":29,"value":"US spatial data:","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"us = FileAttachment(\"us-counties-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"Access state polygons:","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"states = topojson.feature(us, us.objects.states)","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"Stocks data: ","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"aapl = FileAttachment(\"aaplStock.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"goog = FileAttachment(\"googStock.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"tsla = FileAttachment(\"tslaStock.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"dateParse = d3.timeParse(\"%m/%d/%y\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":39,"value":"import { showMe } from \"@observablehq/show-me\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}