week 7

Author: efrymire

observablehq.config.js

@@ -26,6 +26,15 @@ export default {
         { name: "Week 6 Class", path: "/lab_1/week_6_class" },
       ],
     },
+    {
+      name: "Lab 2: Subway Staffing",
+      open: true,
+      pages: [
+        { name: "Week 7 Notes", path: "/lab_2/week_7_notes" },
+        { name: "Week 7 Class", path: "/lab_2/week_7_class" },
+        { name: "Playing with AI", path: "/lab_2/playing_with_ai" },
+      ],
+    },
   ],
 
   // Content to add to the head of the page, e.g. for a favicon:

src/lab_2/playing_with_ai.md

@@ -0,0 +1,53 @@
+
+
+```js
+display(flare)
+```
+<!-- 
+```js
+Plot.plot({
+  marks: [
+    Plot.dot(diamonds, {x: "carat", y: "price", r: 0.1})
+  ]
+})
+``` -->
+
+```js
+display(Plot.treeNode({
+        path: "name",
+        value: "size",
+        fill: (d) => d.depth,
+        stroke: "white"
+      }))
+```
+
+
+
+```js
+const root = d3.hierarchy({children: flare})
+    .sum(d => d.size);
+
+display(root.descendants())
+```
+
+```js
+Plot.plot({
+  marks: [
+    Plot.dot(flare, 
+      Plot.treeNode(
+        Plot.tree({path: "name", value: "size"}), {
+          fill: "node:depth",
+          stroke: "white",
+          strokeWidth: 1
+        }
+      )
+    )
+  ],
+  r: {range: [0, 400]},
+  color: {scheme: "Spectral", legend: true},
+  width: 928,
+  height: 928,
+  axis: null,
+  margin: 1
+})
+```

src/lab_2/week_7_class.md

@@ -0,0 +1,147 @@
+<!-- ## Scales
+
+```js
+display(width)
+```
+
+```js
+Plot.plot({
+  // width: width,
+  x: { domain: [0, 100], grid: true },
+  // y: {},
+  // marks: []
+})
+```
+
+```js
+Plot.plot({
+  x: { domain: [100, 0], grid: true }
+})
+```
+
+```js
+Plot.plot({
+  x: { domain: [ new Date(2020, 0, 0), new Date(2020, 2, 0) ]},
+  marks: [ Plot.frame() ]
+})
+``` -->
+
+<!-- ${Plot.plot({ marks: [Plot.frame()]})} -->
+
+<!-- ## Point vs Band
+
+```js
+const letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
+```
+
+```js
+Plot.plot({ 
+  x: {
+    domain: letters, 
+    type: "point", 
+    grid: true
+  }
+})
+```
+
+```js
+Plot.plot({ 
+  x: {
+    domain: letters, 
+    type: "band", 
+  },
+  marks: [
+    Plot.cell(letters, {
+      x: d => d, // Plot.identity
+      stroke: "lightgrey"
+    })
+  ]
+})
+``` -->
+
+## Marks
+
+```js
+view(Inputs.table(diamonds))
+```
+
+```js
+Plot.plot({
+  height: 200,
+  marks: [
+    Plot.dot(diamonds, {
+      x: "x", 
+      y: "y",
+      r: "price",
+      fill: "lightgrey",
+      fillOpacity: 0.15,
+      tip: true
+    })
+  ]
+})
+```
+
+```js
+Plot.plot({
+  height: 200, 
+  color: {
+    scheme: "YlOrRd",
+    legend: true,
+    label: "Average price"
+  },
+  marks: [
+    Plot.barY(diamonds, 
+      Plot.groupX(
+        { y: "count", fill: "mean" },
+        { x: "cut", y: "count", fill: "price" , tip: true }
+      )
+    ),
+  ],
+})
+```
+
+
+<!-- ```js
+Plot.plot({
+  marks: [
+    Plot.frame(),
+    Plot.dot(diamonds.filter((d, i) => i < 100), {
+      x: "color",
+      y: "cut"
+    })
+  ]
+})
+``` -->
+
+```js
+Plot.plot({
+  marks: [
+    Plot.frame(),
+    Plot.text(diamonds, 
+      Plot.group(
+        { text: "count" },
+        { x: "color", y: "cut", text: "count" }
+      )
+    )
+  ]
+})
+```
+
+```js
+Plot.plot({
+  marks: [
+    Plot.frame(),
+    Plot.cell(diamonds, 
+      Plot.group(
+        { fill: "mean" },
+        { x: "color", y: "cut", fill: "price"  }
+      )
+    )
+  ],
+  color: {
+    scheme: "YlOrRd",
+    legend: true,
+    label: "Average price"
+  },
+})
+```