week 6

Author: efrymire

observablehq.config.js

@@ -2,6 +2,7 @@
 export default {
   // The app’s title; used in the sidebar and webpage titles.
   title: "Interactive Data Visualization (Fall 2025)",
+  theme: "light",
 
   // The pages and sections in the sidebar. If you don’t specify this option,
   // all pages will be listed in alphabetical order. Listing pages explicitly
@@ -20,7 +21,9 @@ export default {
       open: true,
       pages: [
         { name: "Instructions", path: "/lab_1/readme" },
-        { name: "Dashboard", path: "/lab_1/index" },
+        { name: "Week 5 Class", path: "/lab_1/week_5" },
+        { name: "Week 6 Notes", path: "/lab_1/week_6_notes" },
+        { name: "Week 6 Class", path: "/lab_1/week_6_class" },
       ],
     },
   ],

src/lab_1/index.md src/lab_1/week_5.mdsrc/lab_1/index.md renamed to src/lab_1/week_5.md

@@ -0,0 +1,200 @@
+---
+title: "Week 6 Class"
+toc: true
+---
+
+```js
+const penguins = await FileAttachment("./data/penguins.csv").csv({ typed: true })
+display(penguins) // data! yay!
+```
+
+
+<!-- ```js
+for (let i = 0; i < 10; i++) {
+  display(i)
+}
+``` -->
+
+<!-- ```js
+Plot.plot({
+  height: 500, // pixels
+  y: {
+    grid: true
+  },
+  marks: [
+    Plot.frame(),
+    Plot.line(aapl, { 
+      x: "Date", 
+      y: d => d["Close"], 
+    }),
+    Plot.ruleY([-200, 0]),
+  ]
+})
+``` -->
+<!-- 
+```js
+Plot.plot({
+  marks: [
+    Plot.frame(),
+    Plot.dot(penguins, {
+      x: "bill_length_mm",
+      y: "bill_depth_mm",
+      stroke: "species",
+      fill: "island",
+      tip: true
+    })
+  ]
+})
+``` -->
+
+<!-- ```js
+const groupOutput = Plot.groupX(
+        { y: "count" },
+        { x: "island" }
+      )
+display(groupOutput)
+``` -->
+
+
+<!-- ```js
+Plot.plot({
+  height: 200,
+  marks: [
+    Plot.frame(),
+    Plot.barX(penguins, 
+      // groupOutput
+      Plot.groupY(
+        { x: "count" },
+        { y: "island", fill: "species", fy:"species"  }
+      )
+    )
+  ]
+})
+``` -->
+
+
+
+<!-- ```js
+Inputs.table(olympians)
+```
+
+```js
+const binOutput = Plot.binX(
+        { y: "count" },
+        { x: "weight" }
+      )
+display(binOutput)
+```
+
+```js
+Plot.plot({
+  height: 300,
+  marks: [
+    Plot.frame(),
+    Plot.rectY(olympians, 
+      Plot.binX(
+        { y: "count" },
+        { x: "weight" }
+      )
+    )
+  ]
+})
+``` -->
+
+
+
+
+```js
+Plot.plot({
+  marks: [
+    Plot.barY(penguins, 
+      Plot.groupX(
+        { y: "count" },
+        { 
+          x: "island", 
+          fill: "island", // three colors per bar, as per the island
+          // fill: "species" // makes a stacked bar chart, with a legend!
+        }
+      )
+    )
+  ],
+  color: { legend: true }
+})
+```
+
+```JSON
+[
+  { island: "Biscoe", count: 168 }, 
+  { island: "Dream", count: 124 }, 
+  { island: "Torgersen", count: 52 }
+]
+```
+
+```js
+let dream = 0; 
+let biscoe = 0;
+let torgersen = 0;
+for (let p = 0; p < penguins.length; p++) {
+  const penguin = penguins[p]
+  if (penguin.island === "Dream") dream = dream + 1;
+  if (penguin.island === "Biscoe") biscoe = biscoe + 1;
+  if (penguin.island === "Torgersen") torgersen = torgersen + 1;
+  // display(penguin)
+}
+```
+
+Biscoe: ${biscoe},
+Dream: ${dream},
+Torgersen: ${torgersen}
+
+```js
+const forLoopPenguins = [
+  { island: "Biscoe", count: biscoe },
+  { island: "Dream", count: dream },
+  { island: "Torgersen", count: torgersen }
+]
+display(forLoopPenguins)
+```
+
+
+```js
+Plot.plot({
+  height: 300,
+  marks: [
+    Plot.frame(),
+    Plot.barY(
+      forLoopPenguins,
+      { x: "island", y: "count" }
+    )
+  ]
+})
+```
+
+```js
+let biscoeCountAgain = 0;
+let dreamCountAgain = 0;
+let torgersenCountAgain = 0;
+penguins.forEach(p => {
+  if (p.island === "Biscoe") biscoeCountAgain = biscoeCountAgain + 1
+  if (p.island === "Dream") dreamCountAgain = dreamCountAgain + 1
+  if (p.island === "Torgersen") torgersenCountAgain = torgersenCountAgain + 1
+})
+display(biscoeCountAgain) 
+display(dreamCountAgain) 
+display(torgersenCountAgain)
+```
+
+
+```js
+const reducedPenguins = penguins.reduce((accumulator, currentValue) => {
+  return {
+  ...accumulator,
+  [currentValue.island]: accumulator[currentValue.island] + 1
+ }
+}, {
+  "Biscoe": 0,
+  "Dream": 0,
+  "Torgersen": 0
+})
+display(reducedPenguins)
+```