improve displays

web/index.html

@@ -40,6 +40,7 @@
         <select class="pill-shape highlight-border" name="stat" disabled>
           <option value="beta">Visual Importance (β)</option>
           <option value="size">Size (N)</option>
+          <option value="lightness">Mean Lightness (L̅)</option>
           <option value="chroma">Mean Chroma (C̅)</option>
           <option value="variance">Variance (σ²)</option>
         </select>
@@ -47,35 +48,42 @@
     </template>
 
     <template id="pkmn-data-template">
-      <div class="full-grid-row">μ&nbsp;=&nbsp;(<span bind-to="centroid"></span>)</div>
-      <div class="full-grid-row">τ&nbsp;=&nbsp;(<span bind-to="tilt"></span>)</div>
-      <div>σ²&nbsp;=&nbsp;<span bind-to="variance"></span></div>
-      <div>σ&nbsp;=&nbsp;<span bind-to="stddev"></span></div>
-      <div>C̅&nbsp;=&nbsp;<span bind-to="chroma"></span></div>
-      <div>h̅&nbsp;=&nbsp;<span bind-to="hue"></span>°</div>
       <div>α&nbsp;=&nbsp;<span bind-to="alpha"></span></div>
-      <div>β&nbsp;=&nbsp;<span bind-to="beta"></span></div>
-      <div>δ&nbsp;=&nbsp;<span bind-to="delta"></span></div>
       <div>Ψ&nbsp;=&nbsp;<span bind-to="psi"></span></div>
-      <div>θ&nbsp;=&nbsp;<span bind-to="theta"></span>°</div>
       <div>Ω&nbsp;=&nbsp;<span bind-to="omega"></span></div>
-      <div>N&nbsp;=&nbsp;<span bind-to="size"></span></div>
+      <div role="presentation"></div>
+      <div>δ&nbsp;=&nbsp;<span bind-to="delta"></span></div>
+      <div>θ&nbsp;=&nbsp;<span bind-to="theta"></span>°</div>
       <div>ΔL&nbsp;=&nbsp;<span bind-to="deltaL"></span></div>
       <div>ΔC&nbsp;=&nbsp;<span bind-to="deltaC"></span></div>
       <div>Δh&nbsp;=&nbsp;<span bind-to="deltaH"></span>°</div>
+      <div class="pkmn-data-separator | full-grid-row" role="presentation"></div>
+      <div>β&nbsp;=&nbsp;<span bind-to="beta"></span></div>
+      <div class="pkmn-data-size">N&nbsp;=&nbsp;<span bind-to="size"></span></div>
+      <div>σ²&nbsp;=&nbsp;<span bind-to="variance"></span></div>
+      <div>L̅&nbsp;=&nbsp;<span bind-to="lightness"></span></div>
+      <div>C̅&nbsp;=&nbsp;<span bind-to="chroma"></span></div>
+      <div class="pkmn-data-separator | full-grid-row" role="presentation"></div>
+      <div>a̅&nbsp;=&nbsp;<span bind-to="abar"></span></div>
+      <div>b̅&nbsp;=&nbsp;<span bind-to="bbar"></span></div>
+      <div>h̅&nbsp;=&nbsp;<span bind-to="hue"></span>°</div>
+      <div class="full-grid-row center">τ&nbsp;=&nbsp;(<span bind-to="tilt"></span>)</div>
     </template>
 
     <template id="pkmn-tile-template">
       <div class="pkmn-tile | flex col no-gap">
         <div class="ellipsis emphasis" bind-to="name"></div>
-        <div class="pkmn-info | highlight-border flex even">
+        <div class="pkmn-info | highlight-border flex">
           <div class="flex col small-gap">
             <a bind-to="link" href=""><img bind-to="image" /></a>
-            <div class="center" bind-to="score"></div>
-            <button bind-to="totalBtn" class="pkmn-total | color-select"></button>
-            <div class="total-info | grid small-gap" bind-to="totalData"></div>
+            <div class="math-font center" bind-to="score"></div>
+            <button
+              bind-to="totalBtn"
+              class="pkmn-total | math-font color-select"
+            ></button>
+            <div class="total-info | math-font grid small-gap" bind-to="totalData"></div>
           </div>
-          <div class="cluster-buttons | flex col">
+          <div class="cluster-buttons | math-font flex col">
             <button bind-to="cls1Btn" class="color-select" hidden></button>
             <div class="cluster-info | grid small-gap" bind-to="cls1Data"></div>
             <button bind-to="cls2Btn" class="color-select" hidden></button>
@@ -189,7 +197,7 @@
             <span class="toggle-label | pill-shape highlight-border">Maximizing</span>
           </label>
         </div>
-        <div class="fn-body | flex">
+        <div class="fn-body | math-font flex">
           <label>
             <input
               form="colorCalculateForm"
@@ -281,7 +289,7 @@
             <span class="toggle-label | pill-shape highlight-border">Maximizing</span>
           </label>
         </div>
-        <div class="fn-body | flex">
+        <div class="fn-body | math-font flex">
           <span class="toggle-label | pill-shape highlight-border">
             <output form="colorCalculateForm" name="clusterMetricSymbol"></output>(K)
           </span>

web/main.js

@@ -65,7 +65,9 @@ const pokemonData = database.map(({ total, clusters, ...rest }) => ({
   total: {
     ...total,
     unitCentroid: unitVector(total.centroid),
-    stddev: Math.sqrt(total.variance),
+    lightness: total.centroid[0],
+    abar: total.centroid[1],
+    bbar: total.centroid[2],
     proportion: 1,
     beta: 1,
     inverseSize: 1 / total.size,
@@ -73,7 +75,9 @@ const pokemonData = database.map(({ total, clusters, ...rest }) => ({
   clusters: clusters.map(c => ({
     ...c,
     unitCentroid: unitVector(c.centroid),
-    stddev: Math.sqrt(c.variance),
+    lightness: c.centroid[0],
+    abar: c.centroid[1],
+    bbar: c.centroid[2],
     proportion: c.size / total.size,
     beta: Math.sqrt((c.chroma * c.size) / total.size),
     inverseSize: 1 / c.size,

web/styles.css

@@ -158,6 +158,11 @@ input.pill-shape {
   border: 1px solid var(--highlight);
 }
 
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Math&display=swap");
+.math-font {
+  font-family: "Noto Sans Math", sans-serif;
+}
+
 /* Block */
 
 body {
@@ -304,9 +309,11 @@ button.color-select:hover {
 }
 
 .pkmn-tile button {
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   font-weight: 600;
-  min-width: 12ch;
+  /* padding-block-start: 0.35rem; */
+  padding-inline-start: 2ch;
+  padding-inline-end: 1ch;
 }
 
 .pkmn-tile button[data-included="true"] {
@@ -315,10 +322,11 @@ button.color-select:hover {
 
 .pkmn-tile button[data-included="true"]::before {
   position: absolute;
-  content: "▸";
-  inset: 50% auto auto 1ch;
+  content: "·";
+  inset: 50% auto auto 0.375ch;
+  font-size: 1.5rem;
   /* slightly nicer than a normal vertical centering */
-  transform: translateY(-55%);
+  transform: translateY(-48%);
 }
 
 .pkmn-tile :is(.cluster-info, .total-info) {
@@ -330,8 +338,10 @@ button.color-select:hover {
   transition: visibility 200ms, opacity 200ms ease-out, transform 200ms ease-out;
   font-size: 0.75rem;
 
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: min-content;
   column-gap: 0.5ch;
+  row-gap: 0.125rem;
 
   padding: var(--tile-block-padding) 0.5ch;
   border-radius: var(--tile-border-radius);
@@ -341,6 +351,15 @@ button.color-select:hover {
   color: var(--background);
 }
 
+.pkmn-tile .pkmn-data-separator {
+  height: 1px;
+  background-color: var(--background);
+}
+
+.pkmn-tile .pkmn-data-size {
+  grid-column: 2 / -1;
+}
+
 .pkmn-tile:hover {
   z-index: 10;
 }
@@ -368,13 +387,11 @@ button.color-select:hover {
   padding: 0.125rem 0.75ch;
 }
 
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Math&display=swap");
 .fn-control .fn-body {
   --gap: 0.25ch;
   margin-block: 0.5rem;
   justify-content: center;
   align-items: center;
-  font-family: "Noto Sans Math", sans-serif;
 }
 
 .fn-control :is(input[type="checkbox"], input[type="radio"]) {