Flip XZ axis in PCA transform plots

simularium · Aug 5, 2024 · 73960f7 · 73960f7
1 parent 1f52716
commit 73960f7
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 29 deletions.
diff --git a/scripts/figures.js b/scripts/figures.js
@@ -750,18 +750,18 @@ function generate_pca_transform() {
         .domain(linspace(xaxis.bounds[0] - xaxis.padding, xaxis.bounds[1] + xaxis.padding, COLORMAP.length))
 
     let INSET_SIZE = 350
-    let padding = 10
+    let padding = 20
     let hscale = 0.4
     let vscale = 0.25
     let lscale = 0.25
     let offset = (width - ((1 + vscale) * INSET_SIZE) - padding) / 2
     let INSETS = G.append("g").attr("transform", `translate(${offset},0)`)
     let XY = INSETS.append("g").attr("transform", `translate(${vscale * INSET_SIZE + padding},0)`)
-    createInset(XY, INSET_SIZE, hscale * INSET_SIZE, "X", "Y")
+    createInset(XY, INSET_SIZE, hscale * INSET_SIZE, "X", "Y", false)
     let XZ = INSETS.append("g").attr("transform", `translate(${vscale * INSET_SIZE + padding},${hscale * INSET_SIZE + padding})`)
-    createInset(XZ, INSET_SIZE, lscale * INSET_SIZE, "X", "Z")
+    createInset(XZ, INSET_SIZE, lscale * INSET_SIZE, "X", "Z", true)
     let YZ = INSETS.append("g").attr("transform", `translate(0,0)`)
-    createInset(YZ, vscale * INSET_SIZE, hscale * INSET_SIZE, "Y", "Z")
+    createInset(YZ, vscale * INSET_SIZE, hscale * INSET_SIZE, "Z", "Y", false)
 
     Promise.all([
         d3.csv("data/actin_compression_pca_results.csv"),
@@ -872,7 +872,7 @@ function generate_pca_transform() {
                 .attr("d", function(d) {
                     let makePath = d3.line()
                         .x(m => xscale_inset(m))
-                        .y((m,i) => yscale_inset(d.z[i]))
+                        .y((m,i) => yscale_inset(-d.z[i]))
                     return makePath(d.x)
                 })
                 .attr("fill", d => "none")

diff --git a/scripts/utilities.js b/scripts/utilities.js
@@ -131,30 +131,50 @@ function makeLabel(simulator, velocity, repeat) {
     }
 }
 
-function createInset(g, width, height, a, b) {
+function createInset(g, width, height, a, b, invert) {
     g.append("rect")
-        .attr("width", width)
-        .attr("height", height)
-        .attr("fill", "none")
-        .attr('stroke', '#555')
-        .attr("stroke-dasharray", "1,2")
-        .attr("stroke-width", 0.5)
-    g.append("path")
-        .attr("d", `m 0,${height} l 0,-15  m 0,15 l 15,0`)
-        .attr("fill", "none")
-        .attr('stroke', '#fff')
-    g.append("text")
-        .attr("x", 0)
-        .attr("y", height - 20)
-        .attr("fill", "#fff")
-        .attr("text-anchor", "middle")
-        .text(b)
-    g.append("text")
-        .attr("x", 21)
-        .attr("y", height + 4)
-        .attr("fill", "#fff")
-        .attr("text-anchor", "middle")
-        .text(a)
+            .attr("width", width)
+            .attr("height", height)
+            .attr("fill", "none")
+            .attr('stroke', '#555')
+            .attr("stroke-dasharray", "1,2")
+            .attr("stroke-width", 0.5)
+
+    if (invert) {
+        g.append("path")
+            .attr("d", `m 0,0 l 0,15 m 0,-15 l 15,0`)
+            .attr("fill", "none")
+            .attr('stroke', '#fff')
+        g.append("text")
+            .attr("x", 0)
+            .attr("y", 28)
+            .attr("fill", "#fff")
+            .attr("text-anchor", "middle")
+            .text(b)
+        g.append("text")
+            .attr("x", 21)
+            .attr("y", 4)
+            .attr("fill", "#fff")
+            .attr("text-anchor", "middle")
+            .text(a)
+    } else {
+        g.append("path")
+            .attr("d", `m 0,${height} l 0,-15 m 0,15 l 15,0`)
+            .attr("fill", "none")
+            .attr('stroke', '#fff')
+        g.append("text")
+            .attr("x", 0)
+            .attr("y", height - 20)
+            .attr("fill", "#fff")
+            .attr("text-anchor", "middle")
+            .text(b)
+        g.append("text")
+            .attr("x", 21)
+            .attr("y", height + 4)
+            .attr("fill", "#fff")
+            .attr("text-anchor", "middle")
+            .text(a)
+    }
 }
 
 function individualVizLink(simulator, velocity, replicate) {
@@ -176,4 +196,4 @@ function formatVelocity(velocity) {
         v = "0" + v
     }
     return v
-}
+}