wip: debug histogram data colors not showing up (tooltips show up);

Author: jaanli

README.md

@@ -53,3 +53,7 @@ A typical Framework project looks like this:
 | `yarn deploy`     | Deploy your project to Observable                        |
 | `yarn clean`      | Clear the local data loader cache                        |
 | `yarn observable` | Run commands like `observable help`                      |
+
+## GPT-4 reference
+
+https://chat.openai.com/share/0284945f-996d-4e62-85c5-bdc0f4e68e18

docs/components/surveyHistogram.js

@@ -0,0 +1,73 @@
+import * as Plot from "@observablehq/plot";
+import * as d3 from "d3";
+
+// Assuming dy is a predefined value or imported from another module
+// For demonstration, let's define dy here. Adjust as necessary based on your actual data and requirements.
+const dy = 300; // This should match the actual height or be dynamically calculated based on the data
+
+const marginTop = 0;
+const marginRight = 20;
+const marginBottom = 30;
+const marginLeft = 20;
+
+const canvasCache = new WeakSet();
+
+export function SurveyHistogram(
+  value,
+  count,
+  category,
+  {canvas = document.createElement("canvas"), color, width, height = 360, label, y1, y2}
+) {
+  const ky = 165; // Adjust this value based on your data's density
+
+  const plot = Plot.plot({
+    figure: true,
+    width,
+    height,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    style: "overflow: visible;",
+    x: {type: "log", domain: [y1, y2 - 1], label},
+    y: {axis: null, domain: [0, (height - marginTop - marginBottom) * ky], label: "Count"},
+    color: {label: color.label},
+    marks: [
+      Plot.ruleY([0]),
+      // Including tip functionality requires further adaptation and is left as an exercise
+    ]
+  });
+
+  const svg = plot.querySelector("svg");
+  const div = document.createElement("div");
+  div.style = "position: relative;";
+
+  if (!canvasCache.has(canvas)) {
+    canvasCache.add(canvas);
+    canvas.width = width - marginLeft - marginRight;
+    canvas.height = height - marginTop - marginBottom;
+    canvas.style = `
+      image-rendering: pixelated;
+      position: absolute;
+      left: ${marginLeft}px;
+      top: ${marginTop}px;
+      width: ${width - marginLeft - marginRight}px;
+      height: ${height - marginTop - marginBottom}px;
+    `;
+
+    const context = canvas.getContext("2d");
+    // Custom rendering logic based on `value`, `count`, and `category` goes here
+
+    // This placeholder for the tick function demonstrates the approach; adapt based on your data processing
+    // The actual drawing logic will vary based on how your data is structured and should be implemented accordingly
+  }
+
+  svg.style.position = "relative";
+  svg.replaceWith(div);
+  div.appendChild(canvas);
+  div.appendChild(svg);
+
+  // Implement the `renderTip` and `find` functions if tooltip functionality is needed
+
+  return plot;
+}

docs/data/income-histogram.parquet

@@ -65,7 +65,7 @@ const latencyByRouteCanvas = document.createElement("canvas");
 
 ```js
 const latencyHistogram = FileAttachment("data/latency-histogram.parquet").parquet();
-const histogramCanvas = document.createElement("canvas");
+const histogramCanvas_new = document.createElement("canvas");
 ```
 
 ```js
@@ -74,30 +74,33 @@ const routeColor = Object.assign(Plot.scale({color: {domain: topRoutesPixel.map(
 const routeSwatch = (route) => html`<span style="white-space: nowrap;"><svg width=10 height=10 fill=${routeColor.apply(route)}><rect width=10 height=10></rect></svg> <span class="small">${route}</span></span>`;
 ```
 
-<div class="grid grid-cols-2" style="grid-auto-rows: 504px;">
+```js
+const incomeData = FileAttachment("data/income-histogram.parquet").parquet();
+const histogramCanvas = document.createElement("canvas");
+```
+
 
+```js
+// Assuming modification for categorization based on age
+const ageColorMapping = d3.sort(d3.rollups(incomeData.getChild("age"), (D) => D.length, (d) => d).filter(([d]) => d), ([, d]) => -d).map(([age, count]) => ({age, count}));
+const ageColor = Object.assign(Plot.scale({color: {domain: ageColorMapping.map((d) => d.age.toString())}}), {label: "age"});
+const ageSwatch = (age) => html`<span style="white-space: nowrap;"><svg width=10 height=10 fill=${ageColor.apply(age.toString())}><rect width=10 height=10></rect></svg> <span class="small">${age}</span></span>`;
+```
+
+
+<div class="grid grid-cols-2" style="grid-auto-rows: 504px;">
+  <div class="card">
+    <h2>Income Distribution by Age</h2>
+    ${resize((width) => ApiHistogram(incomeData.getChild("income"), incomeData.getChild("count"), incomeData.getChild("age"), {canvas: histogramCanvas, color: ageColor, width, label: "Income ($)", y1: 0.5, y2: 100_000}))}
+  </div>
   <div class="card">
     <h2>Response latency histogram</h2>
-    ${resize((width) => ApiHistogram(latencyHistogram.getChild("duration"), latencyHistogram.getChild("count"), latencyHistogram.getChild("route"), {canvas: histogramCanvas, color: routeColor, width, label: "Duration (ms)", y1: 0.5, y2: 10_000}))}
+    ${resize((width) => ApiHistogram(latencyHistogram.getChild("duration"), latencyHistogram.getChild("count"), latencyHistogram.getChild("route"), {canvas: histogramCanvas_new, color: routeColor, width, label: "Duration (ms)", y1: 0.5, y2: 10_000}))}
   </div>
-  <div class="card">${
-    resize((width) => Plot.plot({
-      title: "How big are penguins, anyway? 🐧",
-      width,
-      grid: true,
-      x: {label: "Body mass (g)"},
-      y: {label: "Flipper length (mm)"},
-      color: {legend: true},
-      marks: [
-        Plot.linearRegressionY(penguins, {x: "body_mass_g", y: "flipper_length_mm", stroke: "species"}),
-        Plot.dot(penguins, {x: "body_mass_g", y: "flipper_length_mm", stroke: "species", tip: true})
-      ]
-    }))
-  }</div>
 </div>
 
 ---
-
+<!-- 
 ## Next steps
 
 Here are some ideas of things you could try…
@@ -124,4 +127,4 @@ Here are some ideas of things you could try…
   <div class="card">
     Visit <a href="https://github.com/observablehq/framework">Framework on GitHub</a> and give us a star. Or file an issue if you’ve found a bug!
   </div>
-</div>
+</div> -->