Render visual importance instead of intensity, use known proportion data, delete importance from non-cluster sections

web/render.js

@@ -23,7 +23,7 @@ const renderStatRow = lines => `
   </div>
 `;
 
-const renderPokemonTileCluster = (area, totalSize, { mu, nu }, scores) => {
+const renderPokemonTileCluster = (area, { mu, nu, proportion }, scores) => {
   const textColor = getContrastingTextColor(mu.hex);
   return `
     <div
@@ -31,7 +31,7 @@ const renderPokemonTileCluster = (area, totalSize, { mu, nu }, scores) => {
       style="grid-area: ${area}; color: ${textColor}; background-color: ${mu.hex};"
     >
       <div class="pkmn-tile_row" style="justify-content: center;">
-        ${(100 * scores.size / totalSize).toFixed(2)}% ${mu.hex}
+        ${(100 * proportion).toFixed(2)}% ${mu.hex}
       </div>
       <div class="toggle-on">
         ${
@@ -60,7 +60,7 @@ const renderPokemonTileCluster = (area, totalSize, { mu, nu }, scores) => {
             ["I =", scores.inertia.toFixed(2)],
             ["L =", scores.lightness.toFixed(2)],
             ["C =", scores.chroma.toFixed(2)],
-            ["γ = ", scores.intensity.toFixed(2)],
+            ["γ = ", scores.importance.toFixed(2)],
             ["V =", scores.muNuAngle.toFixed(2)],
             ["N =", scores.size],
           ]
@@ -139,7 +139,6 @@ const renderPokemonTile = (kind, name, { total: { mu, nu, size }, clusters }, sc
           ${ renderStatRow(
             [ ["L =", scores.total.lightness.toFixed(2)],
               ["C =", scores.total.chroma.toFixed(2)],
-              ["γ = ", scores.total.intensity.toFixed(2)],
             ].map(([lbl, val, cls]) => renderStatPair(lbl, val, cls))
           )}
           ${ bestClusterIndex < 0 ? "" : `<hr style="width: 80%; color: ${textColor}"/>` }
@@ -150,7 +149,7 @@ const renderPokemonTile = (kind, name, { total: { mu, nu, size }, clusters }, sc
           ])}
         </div>
       </div>
-      ${clusters.map((c, i) => renderPokemonTileCluster(`cls${i+1}`, size, c, scores.clusters[i])).join("\n")}
+      ${clusters.map((c, i) => renderPokemonTileCluster(`cls${i+1}`, c, scores.clusters[i])).join("\n")}
     </div>
   `
 };