25:["$","title",null,{"children":"Data visualization through code using Observablehq notebook | Dheeraj Yss | Observable"}] 49:T4ea,lineplot_stocksv2 = // Calculates (by default a rolling mean, using the current value as the middle of the window). Can also update to "start" or "end" for leading or trailing windows! Add `strict` to avoid noisy tails (from incomplete windows at series endpoints) Plot.plot({ marks: [ Plot.lineY(stocks, { x: "Date", y: "Close", stroke: "symbol", opacity: 0.3, tip: true }), Plot.lineY( stocks, Plot.windowY( { k: 50, anchor: "middle", reduce: "mean", strict: true }, { x: "Date", y: "Close", stroke: "symbol" } ) ), Plot.text( stocks, Plot.selectLast({ x: "Date", y: "Close", text: "symbol", fill: "symbol", textAnchor: "start", dx: 5, dy: -9, // Use the getDy function to set the dy value fontSize: 15 }) ), Plot.tip([`Oct 27, 2022: Elon Musk becomes Twitter CEO`], { x: new Date("2022-10-27"), y: 250, anchor: "bottom-left" }) ], color: { legend: true, range: ["teal", "navy", "orange"] }, x: { domain: [new Date("2019-01-01"), new Date("2024-06-04")] }, y: { domain: [0, 400], label: "Closing Price (USD)" }, marginRight: 100 })4a:[{"id":"1c53a9c94a2e4871a534ecf4aa25747cca8316097255b0e1d34989343ffb0c42bfa878d9d330938dcf00c6015831ca3546a3e2ab403eaceb0e543d7549ae9d49","href":"https://static.observableusercontent.com/files/1c53a9c94a2e4871a534ecf4aa25747cca8316097255b0e1d34989343ffb0c42bfa878d9d330938dcf00c6015831ca3546a3e2ab403eaceb0e543d7549ae9d49","name":"wb_tidy@2.csv","type":"text/csv","lastModified":1717503416665.844,"size":1163456},{"id":"e22ee726bac38c5826aa89e3123f0a3bbc6f3c50e27391de3d1c82c51667e793763f63df068f2a4037f5120dc0af12e74e07e205b594713410e36c99cf7fae57","href":"https://static.observableusercontent.com/files/e22ee726bac38c5826aa89e3123f0a3bbc6f3c50e27391de3d1c82c51667e793763f63df068f2a4037f5120dc0af12e74e07e205b594713410e36c99cf7fae57","name":"aaplStock.csv","type":"text/csv","lastModified":1717504089010.01,"size":743601},{"id":"fda40a70ce7ff21a12467ad791ea6a56337062e7a9f1d9b64892ff503ae283eba9ac10f8c5b52ac8b83b9bb3c0d56323936625e613c879bc94486cb5a5f321a1","href":"https://static.observableusercontent.com/files/fda40a70ce7ff21a12467ad791ea6a56337062e7a9f1d9b64892ff503ae283eba9ac10f8c5b52ac8b83b9bb3c0d56323936625e613c879bc94486cb5a5f321a1","name":"googStock.csv","type":"text/csv","lastModified":1717504187144.705,"size":351166},{"id":"6ee735d353f7bd79cd0c9c0817a16445099a0206044a946a06a2dd0fff9b87c434c611a0bb28ed34717ff35248770d4d244c1b4cfe011ab6c4df9f545a4d1f45","href":"https://static.observableusercontent.com/files/6ee735d353f7bd79cd0c9c0817a16445099a0206044a946a06a2dd0fff9b87c434c611a0bb28ed34717ff35248770d4d244c1b4cfe011ab6c4df9f545a4d1f45","name":"tslaStock.csv","type":"text/csv","lastModified":1717504211950.398,"size":247330},{"id":"65531717758ec9f954e3eaf2b422da3bf5b029e581ddb4c6ecc94e0b80010c1ebb1a10f097a6c963a829f981d0a06c7835047908f8e672314e87646cfb715b84","href":"https://static.observableusercontent.com/files/65531717758ec9f954e3eaf2b422da3bf5b029e581ddb4c6ecc94e0b80010c1ebb1a10f097a6c963a829f981d0a06c7835047908f8e672314e87646cfb715b84","name":"us_energy.csv","type":"text/csv","lastModified":1717053879003.277,"size":14963},{"id":"29c75ea205588cf1600abcdad0a60b5b7471d38fe8088d547b2daa2b120f17be5a7593de2cbe2cf7ddc9a942656301487fa74338249c7b74f2c09062db430100","href":"https://static.observableusercontent.com/files/29c75ea205588cf1600abcdad0a60b5b7471d38fe8088d547b2daa2b120f17be5a7593de2cbe2cf7ddc9a942656301487fa74338249c7b74f2c09062db430100","name":"Meteorite_Landings.csv","type":"text/csv","lastModified":1717588918353.116,"size":4171874},{"id":"108539582ad221030c84327722d5de8f236f0e5201bf6658edce9fabaaac0d0c183dea39c9140ebb611e362aa69831e6c703a8d4a6d35b31b27c528f81410af9","href":"https://static.observableusercontent.com/files/108539582ad221030c84327722d5de8f236f0e5201bf6658edce9fabaaac0d0c183dea39c9140ebb611e362aa69831e6c703a8d4a6d35b31b27c528f81410af9","name":"mackCreekVertebrates@2.csv","type":"text/csv","lastModified":1717144543981.928,"size":2680032},{"id":"252596aabba0c090c0b1c01f38e92a01186711ef640cf0a87c1b2b5477e7011b2e7ef8a4780884ee26906179004c5810d6c74fcaf439f61bd983b9019669fb7c","href":"https://static.observableusercontent.com/files/252596aabba0c090c0b1c01f38e92a01186711ef640cf0a87c1b2b5477e7011b2e7ef8a4780884ee26906179004c5810d6c74fcaf439f61bd983b9019669fb7c","name":"Power Plants.csv","type":"text/csv","lastModified":1717744947151.78,"size":3730822},{"id":"ff73290f3fccc5db55f09031bb845e639a07e444ca9fbcf83f2dbb4600a38bf4baccb2a85df3c24dba57a4ed64c230dcf1a87604453969495db835c5f3cbebf2","href":"https://static.observableusercontent.com/files/ff73290f3fccc5db55f09031bb845e639a07e444ca9fbcf83f2dbb4600a38bf4baccb2a85df3c24dba57a4ed64c230dcf1a87604453969495db835c5f3cbebf2","name":"us-counties-10m.json","type":"application/json","lastModified":1717764999416.847,"size":842177}] 29:{"id":"c14eafd65a30fc4d","slug":null,"title":"Data visualization through code using Observablehq notebook","thumbnail":"681588e2bc015057dffc1fedbc409f122f8a2f4900747d944c96348be882fe7a","access_level":"public","create_time":"$D2024-05-30T05:58:53.763Z","update_time":"$D2024-06-12T06:02:43.712Z","view_time":null,"first_public_time":"$D2024-05-30T05:58:53.763Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5c22e83bd8b9e1b7","login":"dheeraj-yss","name":"Dheeraj Yss","avatar_url":"https://avatars-next.observableusercontent.com/c286afcdd6699461441422eba25928616a5133c775a1bf2e5f93b442ae6ec6ef","tier":"free_2026","bio":"Seasoned SQL, JS Dev | Database | MS SQL Server | T-SQL | Azure | Python |","followed_by_you":false,"follows_you":false},"version":896,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b31e9ef9057f3c23","login":"dheeraj-yss","name":"Dheeraj Yss","avatar_url":"https://avatars-next.observableusercontent.com/de1ebf4b9de23c5ab6a267dccdeccad084c321895042a12b64cd3c664ea81a6c","tier":null,"bio":"Seasoned SQL, JS Dev | Database | MS SQL Server | T-SQL | Azure | Python |","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"5c22e83bd8b9e1b7","login":"dheeraj-yss","name":"Dheeraj Yss","avatar_url":"https://avatars-next.observableusercontent.com/c286afcdd6699461441422eba25928616a5133c775a1bf2e5f93b442ae6ec6ef","tier":"free_2026","role":"editor"},{"type":"individual","id":"b31e9ef9057f3c23","login":"dheeraj-yss","name":"Dheeraj Yss","avatar_url":"https://avatars-next.observableusercontent.com/de1ebf4b9de23c5ab6a267dccdeccad084c321895042a12b64cd3c664ea81a6c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Data visualization through code using Observablehq notebook","cells":[{"id":159,"value":"

Data visualization through code using Observablehq notebook

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":184,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"# 1. Session 1: Introduction to Observable Plot\nPlot essentials: grammar of graphics, marks, channels and scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":368,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"## 1.1 Activity 1: Observable notebooks, and first weather chart in Observable Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":92,"value":"From the Add Cell menu, start typing \"cell\" in the search bar, then click on the **Cell chart** item. This will add a new JavaScript cell to your notebook containing working placeholder code for a heatmap of temperatures using the built-in `weather` data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"cellchart_weather = addTooltips(\n Plot.plot({\n marks: [\n Plot.cell(weather.slice(-365), {\n x: (d) => d.date.getUTCDate(),\n y: (d) =>\n new Date(\n d.date.getUTCFullYear(),\n d.date.getUTCMonth(),\n 1\n ).toLocaleString(\"default\", { month: \"short\" }),\n fill: \"temp_max\",\n //tip: true,\n sort: { y: \"y\", reverse: false },\n title: \"temp_max\"\n })\n ],\n color: { legend: true }\n }),\n // Set styles for the hovered element\n { opacity: 1, \"stroke-width\": \"1px\", stroke: \"black\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"weather[0].date","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"## 1.2 Activity 2: The grammar of graphics in Observable Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"Uploaded the file `us_energy.csv` (with data from the US Energy Information Administration), and below we load it into the notebook as an array of objects named `energy`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"energy = FileAttachment(\"us_energy.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"The `energy` data contains different amounts of energy produced in the US, by source (`type`), over a range of years:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"table_energydata = await FileAttachment(\"us_energy.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"table_energydata","database":"$undefined"},{"id":88,"value":"A new scatterplot, replacing the default variables with the year (x) and quadrillion_btu (y) from energy instead:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"scatterplot_energy = Plot.plot({\n marks: [Plot.dot(energy, { x: \"year\", y: \"quadrillion_btu\" })]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"## 1.3 Activity 3: Customization with marks, channels, and scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"- Using the `energy` data, create a line chart of energy production over time\n- Add dot marks atop the lines\n- Add a fill channel to change colors based on the energy type\n- Customize with a new color scheme, labels and formatting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"linechart_energy = Plot.plot({\n marks: [\n Plot.line(energy, { x: \"year\", y: \"quadrillion_btu\", stroke: \"type\" }),\n Plot.dot(energy, {\n x: \"year\",\n y: \"quadrillion_btu\",\n fill: \"type\",\n stroke: \"white\",\n tip: true,\n r: 4\n }),\n Plot.frame()\n ],\n x: { tickFormat: \"Y\", type: \"linear\", label: \"Year\" },\n y: { domain: [0, 45], label: \"Quadrillion BTU\" },\n color: { scheme: \"Accent\", legend: true },\n grid: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"## 1.4 Activity 4: A custom size and color scale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":139,"value":"- Create a scatterplot of flipper_length_mm and body_mass_g using the built-in penguins data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"scatterplot_penguins = Plot.plot({\n marks: [\n Plot.dot(penguins, {\n x: \"body_mass_g\",\n y: \"flipper_length_mm\",\n r: \"flipper_length_mm\",\n fill: \"species\",\n tip: true\n })\n ],\n r: {\n domain: d3.extent(penguins, (d) => d.flipper_length_mm),\n range: [1, 10]\n },\n color: {\n domain: [\"Adelie\", \"Chinstrap\", \"Gentoo\"],\n range: [\"purple\", \"teal\", \"orange\"]\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":177,"value":"# 2. Session 2: Introduction to Observable Plot\nScales, transforms, and more customization\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":214,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":216,"value":"## 2.1 Data ingestion","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":330,"value":"- salamanders data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"SELECT \n SAMPLEDATE as date\n , SECTION as creekSection\n , REACH as reach\n , SPECIES as species\n , LENGTH2 as totalLength\n , WEIGHT as weight \nFROM \"mackCreekVertebrates\"\nWHERE SPECIES='DITE'","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"salamanders","database":"mackCreekVertebrates@2.csv"},{"id":332,"value":"- monoYearly data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":334,"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":194,"value":"## 2.2 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":196,"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":248,"value":"salamanders","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":252,"value":"scatterplot_salamanders = Plot.plot({\n marks: [\n Plot.frame(),\n Plot.dot(salamanders, {\n x: \"totalLength\",\n y: (d) => d.weight,\n fill: \"creekSection\",\n opacity: 0.5,\n r: \"totalLength\",\n // sort: { channel: \"fill\" }\n tip: true\n })\n ],\n y: { label: \"weight\" }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"## 2.3 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":265,"value":"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":267,"value":"scatterplot_salamanders_v2 = 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 x: { domain: [0, 400], ticks: 5, reverse: true },\n y: { type: \"pow\", exponent: 0.5, label: \"weight\" },\n color: { range: [\"cyan\", \"purple\"], legend: true },\n grid: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"## 2.4 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":277,"value":"Again using the salamanders data, let's make a bar chart (thinking carefully about the mark, here) \n- 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- We'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). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"barplot_salmanders = Plot.plot({\n marks: [\n Plot.rectY(\n salamanders,\n Plot.binX(\n { y: \"mean\" },\n { x: \"date\", y: \"totalLength\", interval: \"5 years\", tip: true }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"- Import tooltips function","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":776,"value":"import { addTooltips } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"addTooltips(\n Plot.plot({\n marks: [\n Plot.rectY(\n salamanders,\n Plot.binX(\n {\n y: (elems) =>\n elems.reduce((acc, curr) => acc + curr, 0) / elems.length,\n title: (elems) =>\n `${(\n elems.reduce((acc, curr) => acc + curr.totalLength, 0) /\n elems.length\n ).toFixed(0)}`\n },\n { x: \"date\", y: \"totalLength\" }\n )\n ),\n Plot.ruleY([0])\n ]\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"- Then, 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":294,"value":"chartQuick_salamanders = Plot.plot({\n color: {\n legend: true\n },\n marks: [\n Plot.auto(salamanders, {x: \"date\", y: {value: \"totalLength\", reduce: \"mean\"}, color: {value: \"totalLength\", reduce: \"mean\"}})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"chartQuick_salamanders","database":"$undefined"},{"id":304,"value":"barplotGenra_salamanders = Plot.plot({\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 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":307,"value":"## 2.5 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":309,"value":"This time, let's start with the Chart cell to create a summary view of total counts of salamanders by creekSection. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":313,"value":"chartQuick_salamandersv2 = Plot.plot({\n marks: [\n Plot.auto(salamanders, {y: \"creekSection\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"chartQuick_salamandersv2","database":"$undefined"},{"id":311,"value":"- 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":316,"value":"barplotGenra_salamandersv2 = Plot.plot({\n marks: [\n Plot.barX(\n salamanders,\n Plot.groupY(\n { x: \"count\" },\n { y: \"creekSection\", tip: true, fill: \"reach\", tip: true }\n )\n ),\n Plot.ruleX([0])\n ],\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":324,"value":"## 2.6 Activity 5: Normalize transform","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":326,"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 on lake levels 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":346,"value":"Datatable_monoYearlydata = monoYearly","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"Datatable_monoYearlydata","database":"$undefined"},{"id":350,"value":"We'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":352,"value":"lineplot_monoYearly = Plot.plot({\n marks: [\n Plot.line(\n monoYearly,\n Plot.normalizeY({ x: \"year\", y: \"volume\", basis: \"first\", tip: true })\n ) // Try mean, min, last,!\n ],\n marginLeft: 60,\n x: { tickFormat: \"\" }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"lineplot_monoYearlyv2 = Plot.plot({\n marks: [\n Plot.line(\n monoYearly,\n Plot.normalizeY(\"first\", { x: \"year\", y: \"lake\", 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":370,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":372,"value":"# 3. Session 3: Introduction to Observable Plot\nMore customization: faceting, annotation, a map, and introducing Inputs for interactivity","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":376,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":378,"value":"## 3.1 Activity 1: Warm-up (and add faceting!)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":380,"value":"**Data:** The World Bank Open Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":392,"value":"worldbank = await FileAttachment(\"wb_tidy@2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"worldbank","database":"$undefined"},{"id":399,"value":"scatterplot_incgrfact = Plot.plot({\n marks: [\n Plot.frame(),\n Plot.dot(worldbank, {\n filter: (d) => d.year == 2010,\n x: \"gdp\",\n y: \"co2\",\n fill: \"#ccc\",\n r: \"life_exp\",\n opacity: 0.7\n }),\n Plot.dot(worldbank, {\n filter: (d) => d.year == 2010,\n x: \"gdp\",\n y: \"co2\",\n fill: \"life_exp\",\n r: \"life_exp\",\n opacity: 0.7,\n tip: true,\n fy: \"income_group\"\n })\n ],\n x: { type: \"log\", label: \"GDP (USD)\" },\n y: { type: \"log\", label: \"CO2 Emissions\" },\n fy: {\n label: \"Income group\",\n domain: [\n \"Not classified\",\n \"Low income\",\n \"Lower middle income\",\n \"Upper middle income\",\n \"High income\"\n ],\n reverse: true\n },\n color: { legend: true, label: \"Life expectancy (years)\" },\n r: { domain: d3.extent(worldbank, (d) => d.life_exp), range: [1, 10] },\n marginRight: 150\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"## 3.2 Activity 2: Customization continued - Annotation and transforms continued (select, window)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":421,"value":"Here, we have an existing line chart of stock market closing prices ($, USD) for three companies (AAPL, GOOG (Alphabet), and TSLA).\n\nWe will update the chart with some annotations, facets, and by adding a window transform to show a noise-reduced version of the trends for each","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":430,"value":"- loading data from attached files:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":424,"value":"aapl = FileAttachment(\"aaplStock.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"goog = FileAttachment(\"googStock.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"tsla = FileAttachment(\"tslaStock.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"- dateParse function:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":432,"value":"dateParse = d3.timeParse(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"- combining data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":447,"value":"stocks = aapl\n .map((d) => ({ ...d, symbol: \"aapl\" }))\n .concat(\n goog.map((d) => ({ ...d, symbol: \"goog\" })),\n tsla.map((d) => ({ ...d, symbol: \"tsla\" }))\n )\n .map((d) => ({ ...d, Date: dateParse(d.Date) }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"stocks","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":475,"value":"lineplot_stocks = Plot.plot({\n marks: [\n Plot.lineY(stocks, {\n x: \"Date\",\n y: \"Close\",\n stroke: \"symbol\",\n tip: true\n })\n ],\n x: {\n domain: [new Date(\"2019-01-01\"), new Date(\"2024-06-04\")]\n },\n y: {\n domain: [0, 400]\n },\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":508,"value":"(Below is the final version that we'll make in the course, starting from the base plot above):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":512,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"## 3.3 Activity 3: A map with Plot.geo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":602,"value":"**Data:** The Meteoritical Society (published by NASA and [accessed from Data.gov](https://catalog.data.gov/dataset/meteorite-landings))","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":609,"value":"null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":610,"value":"meteorites = await FileAttachment(\"Meteorite_Landings.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"meteorites","database":"$undefined"},{"id":628,"value":"import { land } from \"@observablehq/plot-live-earthquake-map\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"scatter_geoplot_meteorites = Plot.plot({\n projection: \"equal-earth\",\n marks: [\n Plot.graticule(),\n Plot.geo(land, {\n fill: \"#ccc\"\n }),\n Plot.dot(meteorites, {\n x: \"reclong\",\n y: \"reclat\",\n r: \"mass (g)\",\n fill: \"purple\",\n opacity: 0.5,\n tip: true\n })\n ],\n r: { range: [1, 10] }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"## 3.4 Activity 4: A taste of Inputs for interactivity","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":641,"value":"First, let's look at a partially built example and make an existing chart interactive!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":643,"value":"viewof pickColor = Inputs.color({ label: \"Favorite color\", value: \"#4682b4\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"scatterplot_cars = Plot.plot({\n marks: [\n Plot.dot(cars, {\n x: \"power (hp)\",\n y: \"economy (mpg)\",\n tip: true,\n fill: pickColor\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"Now, we will add interactivity to a chart we created above (stock prices) using Inputs to change the window size! ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":658,"value":"viewof pickWindow = Inputs.range([2, 90], {label: \"Amount\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"lineplot_stocksv3 = Plot.plot({\n marks: [\n Plot.lineY(stocks, {\n x: \"Date\",\n y: \"Close\",\n stroke: \"symbol\",\n opacity: 0.3\n }),\n Plot.lineY(\n stocks,\n Plot.windowY(\n { k: pickWindow, anchor: \"middle\", reduce: \"mean\", strict: true },\n { x: \"Date\", y: \"Close\", stroke: \"symbol\" }\n )\n )\n ],\n color: { legend: true, range: [\"teal\", \"navy\", \"orange\"] },\n x: {\n domain: [new Date(\"2019-01-01\"), new Date(\"2024-06-04\")]\n },\n y: {\n domain: [0, 400],\n label: \"Closing Price (USD)\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":667,"value":"# Session 4: Introduction to Observable Plot\n## Interactivity ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":670,"value":"## 4.1 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":672,"value":"**Data:** The World Bank DataBank","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":682,"value":"wb = worldbank","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"wb2010 = wb.filter(d => d.year == 2010)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"wb2010","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":688,"value":"scatterplot_wb2010 = 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 title: (d) => `${d.country_name}`\n })\n ),\n Plot.crosshair(wb2010, {\n x: \"gdp\",\n y: \"life_exp\",\n textFill: \"red\",\n textStroke: \"white\",\n strokeWidth: 3\n })\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":699,"value":"## 4.2 Activity 2: Custom tooltips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":703,"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":720,"value":"scatterplot_stocksv1 = 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 anchor: \"right\",\n fill: \"yellow\"\n })\n ) // Static annotation!\n ],\n x: {\n domain: [new Date(\"2019-01-01\"), new Date(\"2024-06-04\")]\n },\n y: {\n domain: [0, 400],\n label: \"Closing Price (USD)\"\n },\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":705,"value":"## 4.3 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":708,"value":"Add a dropdown widget to select region, and a slider to select year:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":728,"value":"viewof selectRegion = Inputs.select(\n wb.map((d) => d.region),\n { label: \"Select region:\", unique: true }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"viewof pickYear = Inputs.range(\n d3.extent(wb, (d) => d.year),\n { label: \"Year:\", step: 1, value: /*d3.min(wb, (d) => d.year)*/ [\"1997\"] }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"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":734,"value":"scatterplot_wbv1 = 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 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":714,"value":"## 4.4 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":716,"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":718,"value":"The chart below compares 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":739,"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":741,"value":"SELECT \n Longitude as longitude\n , Latitude as latitude\n , Plant_Name as plant\n , City as city\n , County as county\n , State 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":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"plants","database":"Power Plants.csv"},{"id":750,"value":"US spatial data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":752,"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":754,"value":"Access state polygons:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":756,"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":761,"value":"viewof pickStates = Inputs.checkbox(plants.map((d) => d.state).sort(), {\n label: \"Select states to compare:\",\n unique: true,\n value: [\"Alabama\", \"Alaska\", \"Arizona\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"viewof pickSource = Inputs.radio(\n plants.map((d) => d.primary_source),\n { label: \"Select primary source:\", unique: true, value: \"oil\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"The chart below compares 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":770,"value":"barplot_plants = Plot.plot({\n marks: [\n Plot.barX(\n plants.filter(\n (d) => 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})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null