week 9

efrymire · efrymire · commit a0d02b4075d3 · 2025-11-10T17:48:10.000-08:00
diff --git a/observablehq.config.js b/observablehq.config.js
@@ -38,6 +38,8 @@ export default {
         { name: "Dashboard", path: "/lab_2/index" },
         { name: "Week 8 Notes", path: "/lab_2/week_8_notes" },
         { name: "Week 8 Class", path: "/lab_2/week_8_class" },
+        { name: "Week 9 Notes", path: "/lab_2/week_9_notes" },
+        { name: "Week 9 Class", path: "/lab_2/week_9_class" },
       ],
     },
   ],
diff --git a/src/lab_2/viewership_data/production_cost.csv b/src/lab_2/viewership_data/production_cost.csv
@@ -0,0 +1,13 @@
+show_name,cost_per_episode_usd,number_of_episodes,total_production_cost_usd
+Stranger Things,12000000,42,504000000
+The Crown,13000000,60,780000000
+Wednesday,8500000,8,68000000
+Money Heist,3500000,41,143500000
+Squid Game,2400000,9,21600000
+The Witcher,10000000,24,240000000
+Bridgerton,7500000,24,180000000
+Dark,4200000,26,109200000
+Ozark,6800000,44,299200000
+The Last of Us,15000000,9,135000000
+House of the Dragon,20000000,10,200000000
+Breaking Bad,3000000,62,186000000
diff --git a/src/lab_2/viewership_data/viewership.csv b/src/lab_2/viewership_data/viewership.csv
@@ -0,0 +1,13 @@
+show_name,avg_weekly_viewers,launch_date,weeks_since_launch,total_estimated_viewership
+Stranger Things,15200000,2016-07-15,486,7387200000
+The Crown,9800000,2016-11-04,470,4606000000
+Wednesday,18500000,2022-11-23,154,2849000000
+Money Heist,11400000,2017-05-02,444,5061600000
+Squid Game,28200000,2021-09-17,216,6091200000
+The Witcher,14100000,2019-12-20,307,4328700000
+Bridgerton,16300000,2020-12-25,254,4140200000
+Dark,8200000,2017-12-01,414,3394800000
+Ozark,12700000,2017-07-21,433,5499100000
+The Last of Us,21500000,2023-01-15,147,3160500000
+House of the Dragon,19800000,2022-08-21,168,3326400000
+Breaking Bad,8900000,2008-01-20,929,8268100000
diff --git a/src/lab_2/week_8_notes.md b/src/lab_2/week_8_notes.md
@@ -254,7 +254,7 @@ This is helpful, but wouldn't it be nice if these dots correspond to the price a
 </details>
 <br><br>
 
-## Data joins
+## Data Joins
 
 Lab 2 includes multiple datasets which introduces new challenges when we want to marry the data points. There may be instances where we want to filter to state values, combine data, or reference values from one dataset into another. 
 
@@ -358,15 +358,17 @@ const people_with_state_again = people.map(personObject => ({
 display(people_with_state_again)
 ```
 
+These are just a couple ways to do data joins in javascript, but this is an example of something that AI can be very helpful at, with some clear direction and requests for simple JS functions to achieve what you're looking for. 
+
 
 **Example 2: Find a value from one dataset in another dataset**
 
 Now that we know how to do this join, we can do these arrow functions within the channel itself. 
 
 Before we get into the join code here, it's important to remember:
-1. Data channels can be functions, so we could use that to our advantage to get from one data point to a related data point in another dataset
+1. Data channels can be functions, so we could use that to our advantage to get from one data point to a related data point in another dataset.
 2. When we define arrow functions, we have to have a very clear understanding of what is being passed to the function. If we need to, we can use `console.log(data)` within that function to debug.
-3. Historically we have just used the generic `d` declaration in our functions (`(d) => d.price`), but we cannot use that twice in two nested functions -- we have to use another variable (commonly, `e`, or a helpful word, like `event => event.Date`). 
+3. Historically we have just used the generic `d` declaration in our functions (`(d) => d.price`), but we _cannot_ use `d` twice within two nested functions (`(d) => { d.events.filter((d) => d.attendance) }`) -- we have to use another variable (commonly, `e`, or a helpful word, like `event => event.Date`). 
 
 Let's make another dropdown closer to this example that we can leverage in the below chart. 
 ```js
@@ -381,6 +383,12 @@ const selectedStockEvents = events.filter(d => d["Related Tickers"].includes(yet
 display(selectedStockData[0])
 ```
 
+When we finally return to our original intention stated earlier: 
+
+>Ideally the circle could be positioned on the line. This means we would have to position the event at the appropriate x value (date), then look up the y value for the stock, and use that for the y value of the dot.
+
+We can use the channel function to look up the price value for that day in the other dataset.
+
 Just like in the earlier example, we will use two marks for this example. The first mark is the stock line data (`Plot.line()`), and the second mark is the stock event data (`Plot.dot()`). Each has its own dataset. When we render the `y` value of the event mark, we will look for the stock value for that date in the other dataset. 
 
 ```js echo
@@ -421,12 +429,14 @@ Plot.plot({
       x: selectedStockEvents[0].Date, // position at the event date
       y: selectedStockData.find(e => { // y position at the ticker line value on this date
         return e.Date.toDateString() === selectedStockEvents[0].Date.toDateString()
-      })?.Close
+      })?.Close // the ? here just means that only return it if it exists, and don't "fail" if its undefined.
     }),
   ]
 })
 ```
 
+Now we know how to use values from one dataset within a visualization of another dataset!
+
 <hr/>
 
 ## Color Scales
diff --git a/src/lab_2/week_9_class.md b/src/lab_2/week_9_class.md
@@ -0,0 +1,284 @@
+---
+title: "Week 9 Class"
+toc: false
+---
+
+
+# Last Class Review 
+```js
+// const stocks = await FileAttachment("./stock_data/stocks.csv").csv({ typed: true })
+// const events = await FileAttachment("./stock_data/stock_events.csv").csv({ typed: true })
+// display(stocks.slice(0, 10))
+// display(events)
+```
+
+<!-- Create an array of unique tickers: -->
+```js
+// const allTickers = stocks.map(d => d.Ticker)
+// // display(allTickers)
+// const setTickers = new Set(allTickers)
+// const uniqueTickers = Array.from(setTickers)
+// display(uniqueTickers)
+```
+
+<!-- ```js
+const selectedStock = view(Inputs.select(
+  [null, ...uniqueTickers], 
+  { value: "AAPL" } //"select" }
+  ))
+``` -->
+
+<!-- Selected stock is: ${selectedStock} -->
+
+<!-- ```js
+const filteredStocks = stocks.filter(d => d.Ticker === selectedStock)
+const filteredEvents = events.filter(d => d["Related Tickers"].includes(selectedStock))
+display(filteredEvents)
+``` -->
+
+<!-- ```js
+display(width)
+``` -->
+
+<!-- ```js
+Plot.plot({
+  title: selectedStock === null 
+    ? "pick a stock to continue" 
+    : `Viewing: ${selectedStock}`,
+  height: 200,
+  width,
+  marks: [
+    Plot.line(
+      // stocks,
+      filteredStocks,
+      {
+      x: "Date",
+      y: "Close",
+      z: "Ticker",
+      // Changing transparency
+      stroke: d => d["Ticker"] === selectedStock ? "black" : "none",
+    }),
+    Plot.linearRegressionY(filteredStocks, {x: "Date", y: "Close", stroke: "red"}),
+    Plot.ruleY([0]),
+    Plot.ruleX([new Date(2018, 0, 1)]),
+    Plot.dot(
+      filteredEvents,
+      {
+        x: "Date",
+        y: 0,
+        tip: true,
+        channels: {
+          "Event": "Event Name",
+          "Notes": "Notes"
+        }
+      }
+    ),
+    Plot.tip([filteredEvents[11]], {
+      x: "Date", //filterEvents.date
+      // x: filteredEvents[0].Date
+      channels: {
+          "Event": "Event Name",
+          "Notes": "Notes"
+        }
+    })
+  ]
+})
+``` -->
+<!-- 
+```js
+Plot.plot({
+  title: selectedStock === null 
+    ? "pick a stock to continue" 
+    : `Viewing: ${selectedStock}`,
+  height: 200,
+  width,
+  marks: [
+    Plot.line(
+      // stocks,
+      filteredStocks,
+      {
+      x: "Date",
+      y: "Close",
+      z: "Ticker",
+    }),
+    Plot.ruleY([0]),
+    Plot.dot(
+      filteredEvents,
+      {
+        x: d => d["Date"],
+        y: event => {
+          const thisStockObj = filteredStocks.filter(stock => 
+            stock.Date.toDateString() === event.Date.toDateString()
+            // && event["Related Tickers"].includes(stock.Ticker)
+            // && stock.Ticker === selectedStock
+            )
+          console.log(thisStockObj)
+          // return 0
+          return thisStockObj[0]?.Close || 0
+        },
+        tip: true,
+        channels: {
+          "Event": "Event Name",
+          "Notes": "Notes"
+        }
+      }
+    ),
+  ]
+})
+``` -->
+
+
+
+```js
+const viewership = await FileAttachment('./viewership_data/viewership.csv').csv({ typed: true })
+const cost = await FileAttachment('./viewership_data/production_cost.csv').csv({ typed: true })
+
+display(viewership)
+display(cost)
+```
+
+```js
+view(Inputs.table(viewership))
+```
+
+
+<!-- ```js
+Plot.plot({
+  width, 
+  marginLeft: 120,
+  marks: [
+    Plot.barX(viewership,
+      {
+        x: "total_estimated_viewership",
+        y: "show_name",
+        sort: { y: "-x" }
+      }
+    )
+  ]
+})
+```
+
+
+```js
+Plot.plot({
+  width, 
+  marginLeft: 120,
+  marks: [
+    Plot.barX(cost,
+      {
+        x: "total_production_cost_usd",
+        y: "show_name",
+        sort: { y: "-x" }
+      }
+    )
+  ]
+})
+``` -->
+
+<!-- ```js
+const newData = cost.map(d => ({ ...d, newValue: "E"}))
+view(Inputs.table(newData))
+``` -->
+
+
+
+```js
+Plot.plot({
+  width, 
+  marginLeft: 120,
+  x: {
+    tickFormat: tick => `${tick} vpd`
+  },
+  color: {
+    scheme: "YlOrRd",
+    legend: true,
+    tickFormat: tick => d3.format(".1s")(tick)
+  },
+  marks: [
+    Plot.barX(viewership, // always look here
+      {
+        y: d => d["show_name"],
+        fill: "total_estimated_viewership",
+        x: (views) => {
+          // console.log("show viewers:", views)
+          const thisShowCost = cost.find(c => {
+            // console.log("c:", c)
+            // console.log("check:", 
+            //   c.show_name, 
+            //   views.show_name, 
+            //   c.show_name === views.show_name)
+            return c.show_name === views.show_name
+          })
+          // console.log("thisShowCost", thisShowCost)
+          const newMetric = views.total_estimated_viewership / thisShowCost.total_production_cost_usd
+          return newMetric
+        },
+        sort: { y: "-x" }
+      }
+    )
+  ]
+})
+```
+
+
+# AI HELP
+
+Here's what I asked AI:
+<div style="font-family: monospace; font-size: 12px; background: lightgrey; border-radius: 2px; padding: 15px 10px">
+I am working with Observable Plot, and I would like to join two datasets in this file (viewership, costs) on show name. I want to make a new metric, TOTAL views per TOTAL dollar (spent). 
+
+Here is the cost data structure: 
+{
+  show_name: "Stranger Things"
+  cost_per_episode_usd: 12000000
+  number_of_episodes: 42
+  total_production_cost_usd: 504000000
+}
+
+Here is the views data structure: 
+{
+  show_name: "Stranger Things"
+  avg_weekly_viewers: 15200000
+  launch_date: 2016-07-15
+  weeks_since_launch: 486
+  total_estimated_viewership: 7387200000
+}
+</div>
+
+It returned: 
+```js
+// Join the datasets and create the new metric
+const joinedData = viewership.map(show => {
+  // Find the matching cost data for this show
+  const matchingCost = cost.find(c => c.show_name === show.show_name);
+  
+  if (matchingCost) {
+    return {
+      show_name: show.show_name,
+      total_estimated_viewership: show.total_estimated_viewership,
+      total_production_cost_usd: matchingCost.total_production_cost_usd,
+      views_per_dollar: show.total_estimated_viewership / matchingCost.total_production_cost_usd
+    };
+  }
+  return null; // If no matching cost data found
+}).filter(d => d !== null); // Remove any shows without cost data
+
+display(joinedData);
+```
+<!-- selectedStock: ${select} -->
+
+<div class="card">
+${Plot.plot({
+  width, 
+  marginLeft: 120,
+  title: "Views per Dollar Spent",
+  marks: [
+    Plot.barX(joinedData, {
+      x: "views_per_dollar",
+      y: "show_name",
+      sort: { y: "-x" },
+      tip: true
+    })
+  ]
+})}
+</div>
diff --git a/src/lab_2/week_9_notes.md b/src/lab_2/week_9_notes.md
