week 13

Author: efrymire

observablehq.config.js

@@ -58,6 +58,8 @@ export default {
       pages: [
         { name: "Instructions", path: "/lab_4/readme" },
         { name: "Dashboard", path: "/lab_4/index" },
+        { name: "Week 13 Notes", path: "/lab_4/week_13_notes" },
+        { name: "Week 13 Class", path: "/lab_4/week_13_class" },
       ],
     }
 

src/lab_3/week_10_notes.md

@@ -251,7 +251,7 @@ display(unemployment)
 4. Use topojson from d3 to convert this topology file into a feature collection we can render in svg:
 
 ```js echo
-const counties = topojson.feature(geo, geo.objects.data)
+const counties = topojson.feature(geo, geo.objects.counties)
 display(counties)
 ```
 5. [optional] If your GeoJSON data doesn't already have the data as part of the properties, you'll need to create a join to add that information. 

src/lab_4/components/charts.js

@@ -0,0 +1,97 @@
+// this time, we _do_ have to import plot and d3, because we aren't in the observable markdown file that includes these libraries by default.
+import * as Plot from "npm:@observablehq/plot";
+import * as d3 from "npm:d3";
+
+export function plotChart(width) {
+  return Plot.plot({
+    width,
+    marks: [
+      Plot.frame(),
+      Plot.text(["Hello, world!"], {
+        frameAnchor: "middle",
+      })
+    ]
+  })
+};
+
+export function d3Chart(width) {
+  const svg = d3.create("svg")
+    .attr("width", width)
+    .attr("height", 100)
+    .style("border-style", "solid")
+
+  svg
+    .append("text")
+    .text("Hello, world!")
+    .attr("x", width / 2)
+    .attr("y", 50)
+    .attr("text-anchor", "middle")
+  
+  return svg.node();
+}
+
+
+export function scatterplot(width, data, x, y, color) {
+  console.log("scatterplot with data:", data)
+
+  // Set up margins for axes
+  const margin = { top: 20, right: 30, bottom: 40, left: 50 }
+  const height = 300
+  const innerWidth = width - margin.left - margin.right
+  const innerHeight = height - margin.top - margin.bottom
+
+  const xScale = d3.scaleLinear()
+    .domain(d3.extent(data.map(d => d[x])))
+    .range([0, innerWidth])
+
+  const yScale = d3.scaleLinear()
+    .domain(d3.extent(data.map(d => d[y])))
+    .range([innerHeight, 0]) // Flip y axis so smaller values are at bottom
+  
+  const colorScale = d3.scaleOrdinal()
+    .domain(data.map(d => d[color]))
+    .range(d3.schemeTableau10)
+
+  const svg = d3.create("svg")
+    .attr("width", width)
+    .attr("height", height)
+
+  // Create a group for the chart content
+  const g = svg.append("g")
+    .attr("transform", `translate(${margin.left},${margin.top})`)
+
+  // Add x axis
+  g.append("g")
+    .attr("transform", `translate(0,${innerHeight})`)
+    .call(d3.axisBottom(xScale))
+    .append("text")
+    .attr("x", innerWidth / 2)
+    .attr("y", 35)
+    .attr("fill", "black")
+    .style("text-anchor", "middle")
+    // obviously this is hard coded, so it would still render if we changed the x variable, but its a helpful example of how to make axis text appear.
+    .text("Culmen Depth (mm)")
+
+  // Add y axis
+  g.append("g")
+    .call(d3.axisLeft(yScale))
+    .append("text")
+    .attr("transform", "rotate(-90)")
+    .attr("y", -35)
+    .attr("x", -innerHeight / 2)
+    .attr("fill", "black")
+    .style("text-anchor", "middle")
+    // same here -- hard coded, and would still render if we changed the y variable.
+    .text("Culmen Length (mm)")
+
+  // Add circles
+  g.selectAll("circle")
+    .data(data)
+    .join("circle")
+    .attr("cx", d => xScale(d[x]))
+    .attr("cy", d => yScale(d[y]))
+    .attr("r", 3)
+    .attr("fill", d => colorScale(d[color]))
+
+  return svg.node();
+}

src/lab_4/week_13_class.md

@@ -0,0 +1,154 @@
+---
+title: "Week 13 Class"
+toc: true
+---
+
+```js
+display(width)
+```
+<!-- // // <circle cy="100" cx="50" r="50"></circle> -->
+<!-- <svg style="border: 1px solid;" id="container" width="400" height="400">
+
+</svg> -->
+
+
+<!-- ```js
+const svg = d3.select("#container")
+  .append('text')
+  .text('Hello world!')
+  .attr("x", 50)
+  .attr("y", 50)
+
+display(svg)
+console.log(svg)
+``` -->
+
+<!-- ```js
+const svg = d3.select("#container")
+  .style("background-color", "lightgray")
+
+const circles = svg.selectAll(".words")
+  .data([
+    "quick", "brown", "fox", "jumped", "over",
+  ])
+  .join("text")
+  .attr("class", "words")
+  .text(d => d)
+  // .text("hello world")
+  .attr("x", (d, i) => i * 75)
+  .attr("y", 50)
+
+
+  console.log(circles)
+
+  
+display(svg)
+console.log(svg)
+``` -->
+
+<!-- 
+```js
+display(penguins)
+```
+```js
+Plot.plot({
+  marks: [
+    Plot.dot(penguins, {
+      x: "culmen_length_mm",
+      y: d => d["culmen_depth_mm"]
+    })
+  ]
+})
+``` -->
+
+
+<!-- ```js
+console.log(penguins)
+const svg = d3.select("#container")
+  // .style("background-color", "lightgray")
+
+const xDomain = d3.extent(penguins.map(d => d["culmen_length_mm"]))
+const xScale = d3.scaleLinear()
+  .domain(xDomain)
+  .range([0, 400])
+  .nice()
+
+
+const yDomain = d3.extent(penguins.map(d => d["culmen_depth_mm"]))
+const yScale = d3.scaleLinear()
+  .domain(yDomain)
+  .range([400, 0])
+  .nice()
+
+const penguinCircles = svg.selectAll()
+  .data(penguins)
+  .join("circle")
+  .style("stroke", "black")
+  .style("fill", "none")
+  .attr("r", 3)
+  .attr("cx", d => xScale(d["culmen_length_mm"]))
+  .attr("cy", d => yScale(d["culmen_depth_mm"]))
+
+display(penguinCircles)
+
+
+
+``` -->
+
+<svg style="border: 1px solid;" id="container" width="${width}$" height="200">
+
+</svg>
+
+```js
+const stocks = await FileAttachment('../lab_2/stock_data/stocks.csv').csv({ typed: true})
+display(stocks)
+
+const svg = d3.select("#container")
+
+const xDomain = d3.extent(stocks.map(d => d["Date"]))
+const xScale = d3.scaleTime()
+  .domain(xDomain)
+  .range([0, width])
+  .nice()
+
+const yDomain = d3.extent(stocks.map(d => d["Close"]))
+const yScale = d3.scaleLinear()
+  .domain(yDomain)
+  .range([200, 0])
+  .nice()
+
+console.log(stocks[864])
+console.log(xScale(stocks[864].Date))
+console.log(yScale(stocks[864].Close))
+
+const pathGen = d3.line()
+  .x(d => xScale(d["Date"]))
+  .y(d => yScale(d["Close"]))
+
+  console.log(pathGen)
+
+const tickerData = d3.groups(stocks, d => d["Ticker"]).map(([ticker, data]) => data)
+console.log(tickerData)
+
+const stockPath = svg.selectAll(".stocks")
+  .data(tickerData)
+  // .data(stocks)
+  .join("path")
+  .attr("class", "stocks")
+  .attr("d", d => pathGen(d))
+  .style("stroke", "black")
+  .style("fill", "none")
+
+
+// d3.select("#container")
+//   .selectAll(".stocks")
+//   .data(tickerData)
+//   // .data(stocks)
+//   .join("path")
+//   .attr("class", "stocks")
+//   .attr("d", d => pathGen(d))
+//   .style("stroke", "black")
+//   .style("fill", "none");
+
+
+```