Add "importance" and proportion to cluster data

web/convert.js

@@ -18,11 +18,19 @@ const buildVectorData = (vector, toHue, toLightness, toChroma, toHex) => {
   return { vector, sqMag, mag, unit, hue, lightness, chroma, hex };
 };
 
-const buildClusterData = (size, inertia, mu1, mu2, mu3, nu1, nu2, nu3, toHue, toLightness, toChroma, toHex) => {
+const calcImportance = (chroma, lightness, proportion) => 
+  chroma // used linearly
+  - Math.abs((lightness / 0.75) - 1) // reduce contribution for overly light color - probably a highlight
+  + 0.5 * Math.tanh(10 * (proportion - 0.25)) // steep ramp centered around 25%
+
+const buildClusterData = (size, inertia, mu1, mu2, mu3, nu1, nu2, nu3, totalSize, toHue, toLightness, toChroma, toHex) => {
   const mu = buildVectorData([mu1, mu2, mu3], toHue, toLightness, toChroma, toHex);
   const nu = [nu1, nu2, nu3];
+  const proportion = size / totalSize;
+  const importance = calcImportance(mu.chroma, mu.lightness, proportion);
   return {
     size, inertia, mu, nu,
+    proportion, importance,
     muNuAngle: rad2deg * Math.acos(vectorDot(mu.unit, nu) / vectorMag(nu)),
   };
 };
@@ -30,19 +38,19 @@ const buildClusterData = (size, inertia, mu1, mu2, mu3, nu1, nu2, nu3, toHue, to
 const buildPokemonData = ([name, size, ...values]) => ({
   name,
   jab: {
-    total: buildClusterData(size, ...values.slice(0, 7), jab2hue, jab2lit, jab2chroma, jab2hex),
+    total: buildClusterData(size, ...values.slice(0, 7), size, jab2hue, jab2lit, jab2chroma, jab2hex),
     clusters: [
-      buildClusterData(...values.slice(7, 15), jab2hue, jab2lit, jab2chroma, jab2hex),
-      buildClusterData(...values.slice(15, 23), jab2hue, jab2lit, jab2chroma, jab2hex),
-      buildClusterData(...values.slice(23, 31), jab2hue, jab2lit, jab2chroma, jab2hex),
+      buildClusterData(...values.slice(7, 15), size, jab2hue, jab2lit, jab2chroma, jab2hex),
+      buildClusterData(...values.slice(15, 23), size, jab2hue, jab2lit, jab2chroma, jab2hex),
+      buildClusterData(...values.slice(23, 31), size, jab2hue, jab2lit, jab2chroma, jab2hex),
     ],
   },
   rgb: {
-    total: buildClusterData(size, ...values.slice(31, 38), rgb2hue, rgb2lit, rgb2chroma, rgb2hex),
+    total: buildClusterData(size, ...values.slice(31, 38), size, rgb2hue, rgb2lit, rgb2chroma, rgb2hex),
     clusters: [
-      buildClusterData(...values.slice(38, 46), rgb2hue, rgb2lit, rgb2chroma, rgb2hex),
-      buildClusterData(...values.slice(46, 54), rgb2hue, rgb2lit, rgb2chroma, rgb2hex),
-      buildClusterData(...values.slice(54, 62), rgb2hue, rgb2lit, rgb2chroma, rgb2hex),
+      buildClusterData(...values.slice(38, 46), size, rgb2hue, rgb2lit, rgb2chroma, rgb2hex),
+      buildClusterData(...values.slice(46, 54), size, rgb2hue, rgb2lit, rgb2chroma, rgb2hex),
+      buildClusterData(...values.slice(54, 62), size, rgb2hue, rgb2lit, rgb2chroma, rgb2hex),
     ],
   },
 });