Add mu, nu, and q displays

listeners.js

@@ -52,6 +52,11 @@ const sortOrders = {
 };
 
 const onControlsChanged = state => {
+  // Update q vector display
+  document.getElementById("qvec").innerHTML = TeXZilla.toMathMLString(String.raw`
+    \vec{q}_{\text{${state.space === "rgb" ? "RGB" : "Jab"}}} 
+    = \left(\text{${state.target[state.space].vector.map(c => c.toFixed(state.space === "rgb" ? 0 : 2)).join(", ")}}\right)
+  `);
   // Update metric displays
   document.getElementById("metric-display").innerHTML = TeXZilla.toMathMLString(`
     ${metrics[state.sortMetric].displayName("P")} = ${metrics[state.sortMetric].displayBody("P")}

nearest.css

@@ -70,8 +70,10 @@ math {
   gap: 4px 8px;
   grid:
     "bulb inpt rand"
+    "bulb qvec qvec" 2em
     "cspc cspc cspc"
     "sort metr metr"
+    "munu munu munu"
     "disp disp disp" 4em
     /1fr  8em  auto
   ;

nearest.html

@@ -27,12 +27,17 @@
       },
       space: "jab",
       sortMetric: "sigma",
-      scaleOption: "none",
+      scaleOption: "inverse",
       sortOrder: "min",
     };
     window.onload = () => {
+      document.getElementById("mu-def").innerHTML = TeXZilla.toMathMLString(String.raw`
+          \vec{\mu}\left(P\right) = \frac{1}{\left|P\right|}\sum_{p\in P}{\vec{p}}
+      `);
+      document.getElementById("nu-def").innerHTML = TeXZilla.toMathMLString(String.raw`
+          \vec{\nu}\left(P\right) = \frac{1}{\left|P\right|}\sum_{p\in P}{\hat{p}}
+      `);
       onColorChanged(state, "#222222");
-      onControlsChanged(state);
     }
   </script>
 </head>
@@ -42,8 +47,9 @@
   <div style="display: inline-block;">
     <div class="control-grid">
       <img style="grid-area: bulb; justify-self: center;" src="https://img.pokemondb.net/sprites/sword-shield/icon/bulbasaur.png" />
-      <button style="grid-area: rand;" type="button" onclick="onRandomColor(state); onControlsChanged(state)">Random Color</button>
+      <button style="grid-area: rand;" type="button" onclick="onRandomColor(state)">Random Color</button>
       <input style="grid-area: inpt;" autocomplete="off" maxlength="7" id="color-input" value="#222222" oninput="onColorChanged(state, event.target.value)" />
+      <div style="grid-area: qvec" id="qvec"></div>
       <div class="toggle-box" style="grid-area: cspc;">
         <input autocomplete="off" type="checkbox" class="toggle-button" id="space-toggle" role="button" onchange="state.space = event.target.checked ? 'rgb' : 'jab'; onControlsChanged(state)">
         <label for="space-toggle" style="display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; padding-bottom: 0.5em;">
@@ -69,7 +75,11 @@
         <option value="inertia">Inertia (I)</option>
         <option value="size">Size (N)</option>
       </select>
-      <div style="grid-area: disp; padding-top: 0.5em; padding-bottom: 0.5em; justify-self: center;" id="metric-display"></div>
+      <div style="grid-area: disp; padding-bottom: 0.5em; justify-self: center;" id="metric-display"></div>
+      <div style="grid-area: munu; padding-top: 0.5em; justify-self: center; display: flex; flex-flow: row nowrap; justify-content: space-between; width: 90%;">
+        <div id="mu-def"></div>
+        <div id="nu-def"></div>
+      </div>
     </div>
     <div class="toggle-box cluster-grid">
       <input autocomplete="off" type="checkbox" class="toggle-button" id="cluster-toggle" role="button" onchange="state.useCluster = event.target.checked; onControlsChanged(state)">
@@ -103,9 +113,9 @@
       </select>
       <span style="grid-area: slbl" class="toggle-on">And scale result by</span>
       <select style="grid-area: scal" autocomplete="off" id="scale-option" class="toggle-on" onchange="state.scaleOption = event.target.value; onControlsChanged(state)">
-        <option value="none" selected>None</option>
+        <option value="none">None</option>
         <option value="direct">Cluster size</option>
-        <option value="inverse">Inverse cluster size</option>
+        <option value="inverse" selected>Inverse cluster size</option>
       </select>
       <div style="grid-area: disp; padding-top: 0.5em; padding-bottom: 0.5em; padding-top: 0.5em; padding-bottom: 0.5em; justify-self: center;" id="cluster-metric-display" class="toggle-on"></div>
     </div>