Add manhattan distance

nearest.html

@@ -76,7 +76,7 @@
   <noscript>Requires javascript</noscript>
   <div style="display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch;">
     <div style="display: inline-block;" class="toggle-box">
-      <input autocomplete="off" type="checkbox" checked id="all-control-toggle" class="toggle-button" role="button">
+      <input autocomplete="off" type="checkbox" id="all-control-toggle" class="toggle-button" role="button">
       <label for="all-control-toggle" style="min-width: 1.1em; display: inline-block;">
         <div class="toggle-off" style="writing-mode: vertical-rl">► Controls</div>
         <div class="toggle-off" style="margin-top: 16px; text-align: center;" id="collapsed-fn-name"></div>

web/metrics.js

@@ -39,6 +39,14 @@ const metrics = {
     `,
     evaluate: (data, target) => vectorDist(data.mu.vector, target.vector),
   },
+  manhattan: { // manhattan distance
+    option: "Manhattan Distance (M)",
+    displayName: "M",
+    displayBody: p => String.raw`
+      \sum_{i} \left| \vec{\mu}\left(${p}\right)_i - \vec{q}_i \right|
+    `,
+    evaluate: (data, target) => data.mu.vector.map((x, i) => Math.abs(x - target.vector[i])).reduce((x, y) => x + y),
+  },
   ch: { // chebyshev
     option: "Chebyshev Distance (Ч)",
     displayName: "Ч",

web/render.js

@@ -31,6 +31,10 @@ const renderPokemonTileCluster = (area, totalSize, { mu, nu }, scores) => {
         <span class="pkmn-tile_label">δ =</span>
         <span class="pkmn-tile_value">${scores.delta.toFixed(2)}</span>
       </div>
+      <div class="pkmn-tile_row">
+        <span class="pkmn-tile_label">M =</span>
+        <span class="pkmn-tile_value">${scores.manhattan.toFixed(2)}</span>
+      </div>
       <div class="pkmn-tile_row">
         <span class="pkmn-tile_label">Ч =</span>
         <span class="pkmn-tile_value">${scores.ch.toFixed(2)}</span>
@@ -119,10 +123,10 @@ const renderPokemonTile = (kind, name, { total: { mu, nu, size }, clusters }, sc
             <span class="pkmn-tile_value">${scores.total.sigma.toFixed(2)}</span>
             <span class="pkmn-tile_label">δ =</span>
             <span class="pkmn-tile_value">${scores.total.delta.toFixed(2)}</span>
+            <span class="pkmn-tile_label">M =</span>
+            <span class="pkmn-tile_value">${scores.total.manhattan.toFixed(2)}</span>
             <span class="pkmn-tile_label">Ч =</span>
             <span class="pkmn-tile_value">${scores.total.ch.toFixed(2)}</span>
-            <span class="pkmn-tile_label">ℓ =</span>
-            <span class="pkmn-tile_value">${scores.total.lightnessDiff.toFixed(2)}</span>
           </div>
           <div class="pkmn-tile_row">
             <span class="pkmn-tile_label">Θ =</span>
@@ -131,6 +135,8 @@ const renderPokemonTile = (kind, name, { total: { mu, nu, size }, clusters }, sc
             <span class="pkmn-tile_value">${scores.total.theta.toFixed(2)}°</span>
             <span class="pkmn-tile_label">ϕ =</span>
             <span class="pkmn-tile_value">${scores.total.phi.toFixed(2)}°</span>
+            <span class="pkmn-tile_label">ℓ =</span>
+            <span class="pkmn-tile_value">${scores.total.lightnessDiff.toFixed(2)}</span>
           </div>
           <hr style="width: 80%; color: ${textColor}"/>
           <div class="pkmn-tile_row">