display improvements

web/index.html

@@ -33,10 +33,10 @@
           <option value="geoDiff">Geometric Difference (Ω)</option>
           <option value="psi">RMS Deviation (Ψ)</option>
           <option value="theta">Mean Cosine Difference (Θ)</option>
-          <option value="psiL">RMS Deviation Lightness (Lᵣ)</option>
-          <option value="psiA">RMS Deviation Red/Green (aᵣ)</option>
-          <option value="psiB">RMS Deviation Blue/Yellow (bᵣ)</option>
-          <option value="psiC">RMS Deviation Chroma (Cᵣ)</option>
+          <option value="psiL">RMS Deviation Lightness (Lᵣₘₛ)</option>
+          <option value="psiA">RMS Deviation Red/Green (aᵣₘₛ)</option>
+          <option value="psiB">RMS Deviation Blue/Yellow (bᵣₘₛ)</option>
+          <option value="psiC">RMS Deviation Chroma (Cᵣₘₛ)</option>
           <option value="delta">Euclidean Distance (δ)</option>
           <option value="deltaL">Lightness Difference (ΔL)</option>
           <option value="deltaA">Red/Green Difference (Δa)</option>
@@ -47,14 +47,15 @@
         </select>
         <select class="pill-shape highlight-border" name="stat" disabled>
           <option value="size">Size (N)</option>
+          <option value="stddevTotal">Standard Deviation (σ)</option>
           <option value="deltaL">Mean Lightness (L̅)</option>
-          <option value="stddevL">Standard Deviation (σL)</option>
+          <option value="stddevL">Lightness Deviation (σᴸ)</option>
           <option value="deltaA">Mean Red/Green (a̅)</option>
-          <option value="stddevA">Standard Deviation (σa)</option>
+          <option value="stddevA">Red/Green Deviation (σᵃ)</option>
           <option value="deltaB">Mean Blue/Yellow (b̅)</option>
-          <option value="stddevB">Standard Deviation (σb)</option>
+          <option value="stddevB">Blue/Yellow Deviation (σᵇ)</option>
           <option value="chromaMean" selected>Mean Chroma (C̅)</option>
-          <option value="chromaDev">Chroma Deviation (σC)</option>
+          <option value="chromaDev">Chroma Deviation (σꟲ)</option>
         </select>
       </form>
     </template>
@@ -64,7 +65,7 @@
       <div>|Ψ|&nbsp;=&nbsp;<span bind-to="psi"></span></div>
       <div>Θ&nbsp;=&nbsp;<span bind-to="theta"></span>°</div>
       <div class="pkmn-data-wide">Ψ&nbsp;=&nbsp;(<span bind-to="psiVec"></span>)</div>
-      <div>Cᵣ&nbsp;=&nbsp;<span bind-to="psiC"></span></div>
+      <div>Cᵣₘₛ&nbsp;=&nbsp;<span bind-to="psiC"></span></div>
       <div>Δh&nbsp;=&nbsp;<span bind-to="deltaH"></span>°</div>
       <div>|δ|&nbsp;=&nbsp;<span bind-to="delta"></span></div>
       <div>φ&nbsp;=&nbsp;<span bind-to="angDiff"></span>°</div>
@@ -74,7 +75,7 @@
       <div class="pkmn-data-wide">μ&nbsp;=&nbsp;(<span bind-to="centroid"></span>)</div>
       <div>C̅&nbsp;=&nbsp;<span bind-to="chromaMean"></span></div>
       <div class="pkmn-data-wide">σ&nbsp;=&nbsp;(<span bind-to="stddev"></span>)</div>
-      <div>σC&nbsp;=&nbsp;<span bind-to="chromaDev"></span></div>
+      <div>σꟲ&nbsp;=&nbsp;<span bind-to="chromaDev"></span></div>
       <div class="pkmn-data-wide">τ&nbsp;=&nbsp;(<span bind-to="tilt"></span>)</div>
       <div>h̅&nbsp;=&nbsp;<span bind-to="hue"></span>°</div>
       <div class="pkmn-data-separator | full-grid-row" role="presentation"></div>

web/main.js

@@ -64,6 +64,7 @@ const getColorData = hex => {
 const pokemonData = database.map(({ total, clusters, ...rest }) => ({
   total: {
     ...total,
+    stddevTotal: Math.hypot(...total.stddev),
     stddevL: total.stddev[0],
     stddevA: total.stddev[1],
     stddevB: total.stddev[2],
@@ -78,6 +79,7 @@ const pokemonData = database.map(({ total, clusters, ...rest }) => ({
     .sort((a, b) => b.size - a.size)
     .map(c => ({
       ...c,
+      stddevTotal: Math.hypot(...c.stddev),
       stddevL: c.stddev[0],
       stddevA: c.stddev[1],
       stddevB: c.stddev[2],
@@ -298,6 +300,8 @@ const createPokemonTile = makeTemplate(
       .replace("unfezant-m", "unfezant")
       .replace("frillish-m", "frillish")
       .replace("jellicent-m", "jellicent")
+      .replace("pyroar-m", "pyroar")
+      .replace("pyroar-f", "pyroar-female")
       .replace("tapu ", "tapu-")
       .replace("urshifu-gigantamax", "urshifu-gigantamax-single-strike")
       .replace("urshifu-rapid-strike-gigantamax", "urshifu-gigantamax-rapid-strike")
@@ -315,6 +319,7 @@ const createPokemonTile = makeTemplate(
         "furfrou",
         "magearna",
         "alcremie",
+        "minior",
       ].find(s => spriteName.includes(s))
     ) {
       spriteName = spriteName.replace(/-.*$/, "");

web/styles.css

@@ -180,7 +180,7 @@ body {
   transition: accent-color 250ms, color 250ms, background-color 250ms;
 
   display: grid;
-  grid-template-columns: 20ch 1fr 12ch;
+  grid-template-columns: 24ch 1fr 12ch;
 }
 
 body > * + :not(:last-child) {
@@ -237,7 +237,7 @@ button.color-select:hover {
 }
 
 input[name="resultsToDisplay"] {
-  width: 16ch;
+  width: 18ch;
 }
 
 #cls-title,