25:["$","title",null,{"children":"Session 4: Introduction to Observable Plot (Follow-along version) | learn-observable | Observable"}] 49: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)4a:[{"id":"9786511a2b1e02704eecec9f8517b0c81d6543036d0fb2b5b7e429890ae0d1a5861ab1077e35de98c1de3b398c3dbd8be6b39742ba382102c07c74a068fca7be","href":"https://static.observableusercontent.com/files/9786511a2b1e02704eecec9f8517b0c81d6543036d0fb2b5b7e429890ae0d1a5861ab1077e35de98c1de3b398c3dbd8be6b39742ba382102c07c74a068fca7be","name":"aaplStock.csv","type":"text/csv","lastModified":1699051243546.406,"size":87409},{"id":"5f12706b7f060df1c33819deef453fb724ccb95fadef85ca2b5f9257617e2201e511b583416175bf1bc9854454b4839e96db946cb853a54d56d23a5ccc19d2f0","href":"https://static.observableusercontent.com/files/5f12706b7f060df1c33819deef453fb724ccb95fadef85ca2b5f9257617e2201e511b583416175bf1bc9854454b4839e96db946cb853a54d56d23a5ccc19d2f0","name":"googStock.csv","type":"text/csv","lastModified":1699051243546.406,"size":85307},{"id":"ff73290f3fccc5db55f09031bb845e639a07e444ca9fbcf83f2dbb4600a38bf4baccb2a85df3c24dba57a4ed64c230dcf1a87604453969495db835c5f3cbebf2","href":"https://static.observableusercontent.com/files/ff73290f3fccc5db55f09031bb845e639a07e444ca9fbcf83f2dbb4600a38bf4baccb2a85df3c24dba57a4ed64c230dcf1a87604453969495db835c5f3cbebf2","name":"us-counties-10m.json","type":"application/json","lastModified":1699051243546.406,"size":842177},{"id":"10cf48d33362c825a287a02c7c3ffa74dd2f2721aefabc469e526d1941cd1dcb086e824a7d03210c87705b1726ffc922a211eaad63e62483be55c2fafb74f0fa","href":"https://static.observableusercontent.com/files/10cf48d33362c825a287a02c7c3ffa74dd2f2721aefabc469e526d1941cd1dcb086e824a7d03210c87705b1726ffc922a211eaad63e62483be55c2fafb74f0fa","name":"wb_tidy.csv","type":"text/csv","lastModified":1699051243546.406,"size":504352},{"id":"7f680522a3e5b934ed914e49331f0e4b92e3b5cdb73842ef6a978593dea26dacda9a3a145609076bbbcc99eed89a3a852828c3b85b55326bd9e39932d93e64df","href":"https://static.observableusercontent.com/files/7f680522a3e5b934ed914e49331f0e4b92e3b5cdb73842ef6a978593dea26dacda9a3a145609076bbbcc99eed89a3a852828c3b85b55326bd9e39932d93e64df","name":"tslaStock.csv","type":"text/csv","lastModified":1699051243546.406,"size":87114},{"id":"55a16bb55ce30dcb1aa69279dceb74daf5dbc8e98cef33393697b9ac9ad03df4fafd5a1d4393fd94f6d1a68a6c5df0a4817262bf312bde95a69892b625c40f1b","href":"https://static.observableusercontent.com/files/55a16bb55ce30dcb1aa69279dceb74daf5dbc8e98cef33393697b9ac9ad03df4fafd5a1d4393fd94f6d1a68a6c5df0a4817262bf312bde95a69892b625c40f1b","name":"Power_Plants.csv","type":"text/csv","lastModified":1699051243546.406,"size":3216985}] 29:{"id":"52fc5be8a6f5d49a","slug":null,"title":"Session 4: Introduction to Observable Plot (Follow-along version)","thumbnail":"eacd3a46bfddeac509343ca19f146072e1c093d4de5f42975206263e4ed2a39e","access_level":"public","create_time":"$D2023-11-03T22:40:43.546Z","update_time":"$D2023-11-03T23:38:14.481Z","view_time":null,"first_public_time":"$D2023-11-03T22:40:43.546Z","has_unpublished_edits":null,"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":"f7b96f60164c6743","login":"t-learn-observable","name":"learn-observable","avatar_url":"https://avatars-next.observableusercontent.com/ad6971d5afae4827fd3181173be6f9ef3a93aead6f6d6c03bfe0d618f4a1fffe","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":160,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7c29ae6c9e491b5a","login":"toylyol","name":"TO","avatar_url":"https://avatars-next.observableusercontent.com/6d812ba854bb78c36291be640561402eac65bfe000670665b9b6c87fca05921e","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"f7b96f60164c6743","login":"t-learn-observable","name":"learn-observable","avatar_url":"https://avatars-next.observableusercontent.com/ad6971d5afae4827fd3181173be6f9ef3a93aead6f6d6c03bfe0d618f4a1fffe","tier":"starter_2024","role":"editor"},{"type":"individual","id":"7c29ae6c9e491b5a","login":"toylyol","name":"TO","avatar_url":"https://avatars-next.observableusercontent.com/6d812ba854bb78c36291be640561402eac65bfe000670665b9b6c87fca05921e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"## Activity 1: Crosshairs and pointer transform","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"**Data:** The World Bank DataBank","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"wb2010","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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 opacity: 0.6,\n r: 8,\n tip: true, // Note existing channels are the default; update with title\n title: (d) => `County: ${d.country_name}\\nGDP: ${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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"## Activity 2: Custom tooltips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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: { Open: \"Open\" } // See another way to update tooltip\n }),\n Plot.tip(\n // Create static annotation\n stocks,\n Plot.selectMaxY({\n x: \"Date\",\n y: \"Close\",\n stroke: \"symbol\",\n anchor: \"right\" // Change position of tooltip anchor\n })\n )\n ],\n color: { legend: true },\n marginTop: 50\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"## Activity 3: Dropdown and slider","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":134,"value":"viewof selectRegion = Inputs.select(\n wb.map((d) => d.region),\n { label: \"Select a region.\", unique: true }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"viewof pickYear = Inputs.range(\n d3.extent(wb, (d) => d.year),\n { label: \"Select a year.\", step: 1 }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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 tip: true\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"plants","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"viewof pickStates = Inputs.checkbox(plants.map((d) => d.state).sort(), {\n label: \"Select states.\",\n value: [\"Arizona\", \"California\", \"Utah\", \"Nevada\", \"Colorado\"],\n unique: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":155,"value":"viewof pickSource = Inputs.radio(\n plants.map((d) => d.primary_source),\n { label: \"Select sources.\", value: \"wind\", unique: true }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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 color: { legend: true }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"## Congratulations! Done with Session 4!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"World Bank data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"US power plant data: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"plants","database":"Power_Plants.csv"},{"id":29,"value":"US spatial data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"us = FileAttachment(\"us-counties-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"Access state polygons:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"states = topojson.feature(us, us.objects.states)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"Stocks data: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"aapl = FileAttachment(\"aaplStock.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"dateParse = d3.timeParse(\"%m/%d/%y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"import { showMe } from \"@observablehq/show-me\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null