Cleaning up displayed math, renaming metrics for clarity

nearest.html

@@ -28,10 +28,10 @@
                 <div class="container control">
                     <label for="metric">Metric:</label>
                     <select type="checkbox" onchange="onMetricChanged()" id="metric">
-                        <option selected>RMS/Std Dev</option>
-                        <option>Mean Angle</option>
-                        <option>Chroma/Hue Angle</option>
-                        <option>Custom</option>
+                        <option selected>RMS/Standard Deviation</option>
+                        <option>Similarity of Mean</option>
+                        <option>Chroma/Hue Rotation</option>
+                        <option>Custom Metric</option>
                     </select>
                 </div>
 

nearest.js

@@ -36,7 +36,7 @@ const pokemonColorData = database.map(data => {
   const yRGBColor = d3.rgb(...data.yRGB);
   const [ yJABNorm, yJABHat ] = vectorNorm(data.yJAB);
   const [ yRGBNorm, yRGBHat ] = vectorNorm(data.yRGB);
-  const [ _, yChromaHat ] = vectorNorm(data.yJAB.slice(1));
+  const [ , yChromaHat ] = vectorNorm(data.yJAB.slice(1));
 
   return {
     ...data,
@@ -68,7 +68,7 @@ const readColorInput = () => {
 
   const [ qJABNorm, qJABHat ] = vectorNorm(qJAB);
   const qJABNormSq = qJABNorm * qJABNorm;
-  const [ _, qChromaHat ] = vectorNorm(qJAB.slice(1));
+  const [ , qChromaHat ] = vectorNorm(qJAB.slice(1));
 
   const [ qRGBNorm, qRGBHat ] = vectorNorm(qRGB);
   const qRGBNormSq = qRGBNorm * qRGBNorm;
@@ -142,15 +142,15 @@ const calcDisplayMetrics = ({
 
 // Math Rendering
 const renderQVec = (q, node, sub) => {
-  node.innerHTML = TeXZilla.toMathMLString(`\\vec{q}_{\\text{${sub}}} = \\left(${q.join(", ")}\\right)`);
+  node.innerHTML = TeXZilla.toMathMLString(`\\vec{q}_{\\text{${sub}}} = \\left(\\text{${q.join(", ")}}\\right)`);
 };
 
 const renderVec = math => `\\vec{${math.charAt(0)}}${math.substr(1)}`;
 const renderNorm = vec => `\\frac{${vec}}{\\left|\\left|${vec}\\right|\\right|}`;
 const metricText = [
   "\\text{RMS}_{P} ~ \\arg\\min_{P}\\left[X\\left(P\\right) - 2\\vec{q}\\cdot \\vec{Y}\\left(P\\right)\\right]",
-  `\\angle \\left(\\vec{q}, \\vec{Y}\\left(P\\right)\\right) ~ \\arg\\min_{P}\\left[-${renderNorm(renderVec("q"))}\\cdot ${renderNorm(renderVec("Y\\left(P\\right)"))}\\right]`,
-  "\\angle \\left(\\vec{q}_{\\perp}, \\vec{Y}\\left(P\\right)_{\\perp} \\right)",
+  `\\angle \\left(\\vec{q}, \\vec{Y}\\left(P\\right)\\right) ~ \\arg\\max_{P}\\left[\\cos\\left(\\angle \\left(\\vec{q}, \\vec{Y}\\left(P\\right)\\right)\\right)\\right]`,
+  "\\angle \\left(\\vec{q}_{\\perp}, \\vec{Y}\\left(P\\right)_{\\perp} \\right), \\vec{v}_{\\perp} = \\text{oproj}_{\\left\\{\\vec{J}, \\vec{L}\\right\\}}{\\vec{v}}",
 ];
 const updateObjective = () => {
   let tex = metricText?.[state.metric];