Remove mathematically questionable cosine, increase decimals on metric display

web/metrics.js

@@ -7,13 +7,13 @@ const metrics = {
     `,
     evaluate: (data, target) => Math.sqrt(data.inertia - 2 * vectorDot(data.mu.vector, target.vector) + target.sqMag),
   },
-  bigTheta: { // mean of angle
-    option: "Angular Difference (Θ)",
+  bigTheta: { // arith mean of cosine similarity
+    option: "Mean Cosine Similarity (Θ)",
     displayName: String.raw`\Theta`,
     displayBody: p => String.raw`
-      \cos^{-1}\left( \hat{q}\cdot\vec{\nu}\left(${p}\right) \right)
+      \hat{q}\cdot\vec{\nu}\left(${p}\right)
     `,
-    evaluate: (data, target) => rad2deg * Math.acos(vectorDot(data.nu, target.unit)),
+    evaluate: (data, target) => vectorDot(data.nu, target.unit),
   },
   theta: { // angle of mean
     option: "Angular Difference (θ)",

web/render.js

@@ -35,14 +35,14 @@ const renderPokemonTileCluster = (area, totalSize, { mu, nu }, scores) => {
       </div>
       <div class="toggle-on">
         ${
-          [ ["σ =", scores.sigma.toFixed(2)],
-            ["δ =", scores.delta.toFixed(2)],
-            ["M =", scores.manhattan.toFixed(2)],
-            ["Ч =", scores.ch.toFixed(2)],
-            ["Θ =", scores.bigTheta.toFixed(2) + "°"],
-            ["θ =", scores.theta.toFixed(2) + "°"],
-            ["ϕ =", scores.phi.toFixed(2) + "°"],
-            ["ℓ =", scores.lightnessDiff.toFixed(2)],
+          [ ["σ =", scores.sigma.toFixed(3)],
+            ["δ =", scores.delta.toFixed(3)],
+            ["M =", scores.manhattan.toFixed(3)],
+            ["Ч =", scores.ch.toFixed(3)],
+            ["Θ =", scores.bigTheta.toFixed(3)],
+            ["θ =", scores.theta.toFixed(3) + "°"],
+            ["ϕ =", scores.phi.toFixed(3) + "°"],
+            ["ℓ =", scores.lightnessDiff.toFixed(3)],
           ]
             .map(([lbl, val]) => renderStatPair(lbl, val))
             .map(ls => renderStatRow([ls]))
@@ -104,17 +104,17 @@ const renderPokemonTile = (kind, name, { total: { mu, nu, size }, clusters }, sc
         </div>
         <div class="toggle-on">
           ${ renderStatRow(
-            [ ["σ =", scores.total.sigma.toFixed(2)],
-              ["δ =", scores.total.delta.toFixed(2)],
-              ["M =", scores.total.manhattan.toFixed(2)],
-              ["Ч =", scores.total.ch.toFixed(2)],
+            [ ["σ =", scores.total.sigma.toFixed(3)],
+              ["δ =", scores.total.delta.toFixed(3)],
+              ["M =", scores.total.manhattan.toFixed(3)],
+              ["Ч =", scores.total.ch.toFixed(3)],
             ].map(([lbl, val]) => renderStatPair(lbl, val))
           )}
           ${ renderStatRow(
-            [ ["Θ =", scores.total.bigTheta.toFixed(2) + "°"],
-              ["θ =", scores.total.theta.toFixed(2) + "°"],
-              ["ϕ =", scores.total.phi.toFixed(2) + "°"],
-              ["ℓ =", scores.total.lightnessDiff.toFixed(2)],
+            [ ["Θ =", scores.total.bigTheta.toFixed(3)],
+              ["θ =", scores.total.theta.toFixed(3) + "°"],
+              ["ϕ =", scores.total.phi.toFixed(3) + "°"],
+              ["ℓ =", scores.total.lightnessDiff.toFixed(3)],
             ].map(([lbl, val]) => renderStatPair(lbl, val))
           )}
           <hr style="width: 80%; color: ${textColor}"/>