From cecff6b22a92e8a7dc9abc52ce9df56866851b1b Mon Sep 17 00:00:00 2001
From: rlskoeser <rebecca.s.koeser@princeton.edu>
Date: Mon, 13 May 2024 23:03:14 -0400
Subject: [PATCH] Set x-axis domain so labels won't change when filtered

---
 figures/interactive/top_recommendations.html | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/figures/interactive/top_recommendations.html b/figures/interactive/top_recommendations.html
index 7abc3c4..bbd2528 100644
--- a/figures/interactive/top_recommendations.html
+++ b/figures/interactive/top_recommendations.html
@@ -94,12 +94,16 @@
     position: relative;
 }
 .container .plot {
-    padding-bottom: 75px;
     overflow: scroll;
     height: 100%;
     width: max-content;
     margin: auto;
 }
+/* extra space so we can scroll past the fade */
+.plot > svg, .plot > figure {
+    margin-bottom: 125px;
+}
+
 .container::after {
     /* use absolutely positioned block to fade out and indicate more content */
     content: " ";
@@ -167,7 +171,11 @@ <h2>Collaborative Filtering Methods</h2>
 <script type="module">
 
 let lenskitdata = await d3.csv("lenskit_top_scores.csv");
+let lenskitscores = lenskitdata.map(x => x.score);
+let lenskitdomain = [Math.min(...lenskitscores), Math.max(...lenskitscores)];
 let cfdata = await d3.csv("memorycf_top_scores.csv");
+let cfscores = cfdata.map(x => x.score);
+let cfdomain = [Math.min(...cfscores), Math.max(...cfscores)];
 const titles = await d3.csv("titles.csv");
 
 // create a dict to lookup item title by item id
@@ -198,6 +206,7 @@ <h2>Collaborative Filtering Methods</h2>
       x: {
         grid: true,
         axis: "both",   // draw both top and bottom
+        domain: lenskitdomain,
       },
       y: {
         domain: item_ids,
@@ -205,7 +214,6 @@ <h2>Collaborative Filtering Methods</h2>
       marks: [
         Plot.axisX({
             label: "Score",
-            axis: "both",
             anchor: "top",
             labelAnchor: "center",
         }),
@@ -243,6 +251,7 @@ <h2>Collaborative Filtering Methods</h2>
       symbol: {legend: true},
       x: {
         grid: true,
+        domain: cfdomain,
         axis: "both",   // draw both top and bottom
       },
       y: {
@@ -251,7 +260,6 @@ <h2>Collaborative Filtering Methods</h2>
       marks: [
         Plot.axisX({
             label: "Score",
-            axis: "both",
             anchor: "top",
             labelAnchor: "center",
         }),