Improve qvec rendering

nearest.css

@@ -92,20 +92,14 @@ body {
 
 .math-section {
     border: 4px solid #222;
-    padding: 1em;
-    padding-bottom: 0.2em;
+    padding: 0.3em;
     align-self: stretch;
 }
 
-.qvecs {
-    align-items: flex-end;
-}
-
 #obj-fn {
     display: inline-flex;
     flex-flow: column nowrap;
     justify-content: center;
-    min-height: 64px;
 }
 
 .padded {

nearest.html

@@ -98,8 +98,10 @@
             </div>
 
             <div class="panel math-section">
-                <div id="q-vec-jab"></div>
-                <div id="q-vec-rgb"></div>
+                <div class="container center-aligned">
+                    <div id="q-vec-jab"></div>
+                    <div id="q-vec-rgb"></div>
+                </div>
 
                 <div class="container center-aligned start-justified">
                     <span class="eqn-label">Optimizing:</span>

nearest.js

@@ -114,6 +114,9 @@ const state = {
 };
 
 // Metrics
+const getBestKMean = (stats, q) => argMin(stats.kMeans.map((z, i) => vectorSqDist(z.vector, q.vector) / stats.kWeights[i]));
+const getWorstKMean = (stats, q) => argMax(stats.kMeans.map((z, i) => vectorSqDist(z.vector, q.vector) / stats.kWeights[i]));
+
 const summarySelectors = [
   // true mean
   stats => [stats.trueMean, 1],
@@ -123,12 +126,12 @@ const summarySelectors = [
   stats => [stats.kMeans[stats.smallestCluster], stats.kWeights[stats.smallestCluster]],
   // best fit cluster
   (stats, q) => {
-    const best = argMin(stats.kMeans.map((z, i) => vectorSqDist(z.vector, q.vector) / stats.kWeights[i]));
+    const best = getBestKMean(stats, q);
     return [stats.kMeans[best], stats.kWeights[best]];
   },
   // worst fit cluster
   (stats, q) => {
-    const worst = argMax(stats.kMeans.map((z, i) => vectorSqDist(z.vector, q.vector) / stats.kWeights[i]));
+    const worst = getWorstKMean(stats, q);
     return [stats.kMeans[worst], stats.kWeights[worst]];
   },
 ];
@@ -393,7 +396,7 @@ const onColorChanged = skipScore => {
   if (readColor) {
     state.targetColor = readColor;
 
-    renderQVec(state.targetColor.jabData.vector.map(c => c.toFixed(2)), getQJABDisplay(), "Jab");
+    renderQVec(state.targetColor.jabData.vector.map(c => c.toFixed(3)), getQJABDisplay(), "Jab");
     renderQVec(state.targetColor.rgbData.vector.map(c => c.toFixed()), getQRGBDisplay(), "RGB");
 
     const textColor = getContrastingTextColor(state.targetColor.rgbData.vector);