Add chroma calc and fix hue angle calc for jab

web/convert.js

@@ -1,22 +1,25 @@
 const jab2hex = jab => d3.jab(...jab).formatHex();
 const rgb2hex = rgb => d3.rgb(...rgb).formatHex();
-const jab2hue = ([, a, b]) => rad2deg * Math.atan2(b, a);
+const jab2hue = jab => d3.jch(d3.jab(...jab)).h || 0;
 const rgb2hue = rgb => d3.hsl(d3.rgb(...rgb)).h || 0;
-const jab2lit = ([j]) => j;
+const jab2lit = ([j]) => j / 100;
 const rgb2lit = rgb => d3.hsl(d3.rgb(...rgb)).l || 0;
+const jab2chroma = jab => d3.jch(d3.jab(...jab)).C / 100;
+const rgb2chroma = rgb => d3.jch(d3.rgb(...rgb)).C / 100;
 
-const buildVectorData = (vector, toHue, toLightness, toHex) => {
+const buildVectorData = (vector, toHue, toLightness, toChroma, toHex) => {
   const sqMag = vectorDot(vector, vector);
   const mag = Math.sqrt(sqMag);
   const unit = vector.map(c => c / mag);
   const hue = toHue(vector);
   const lightness = toLightness(vector);
+  const chroma = toChroma(vector);
   const hex = toHex(vector);
-  return { vector, sqMag, mag, unit, hue, lightness, hex };
+  return { vector, sqMag, mag, unit, hue, lightness, chroma, hex };
 };
 
-const buildClusterData = (size, inertia, mu1, mu2, mu3, nu1, nu2, nu3, toHue, toLightness, toHex) => {
-  const mu = buildVectorData([mu1, mu2, mu3], toHue, toLightness, toHex);
+const buildClusterData = (size, inertia, mu1, mu2, mu3, nu1, nu2, nu3, toHue, toLightness, toChroma, toHex) => {
+  const mu = buildVectorData([mu1, mu2, mu3], toHue, toLightness, toChroma, toHex);
   const nu = [nu1, nu2, nu3];
   return {
     size, inertia, mu, nu,
@@ -27,19 +30,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, jab2hex),
+    total: buildClusterData(size, ...values.slice(0, 7), jab2hue, jab2lit, jab2chroma, jab2hex),
     clusters: [
-      buildClusterData(...values.slice(7, 15), jab2hue, jab2lit, jab2hex),
-      buildClusterData(...values.slice(15, 23), jab2hue, jab2lit, jab2hex),
-      buildClusterData(...values.slice(23, 31), jab2hue, jab2lit, jab2hex),
+      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),
     ],
   },
   rgb: {
-    total: buildClusterData(size, ...values.slice(31, 38), rgb2hue, rgb2lit, rgb2hex),
+    total: buildClusterData(size, ...values.slice(31, 38), rgb2hue, rgb2lit, rgb2chroma, rgb2hex),
     clusters: [
-      buildClusterData(...values.slice(38, 46), rgb2hue, rgb2lit, rgb2hex),
-      buildClusterData(...values.slice(46, 54), rgb2hue, rgb2lit, rgb2hex),
-      buildClusterData(...values.slice(54, 62), rgb2hue, rgb2lit, rgb2hex),
+      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),
     ],
   },
 });

web/listeners.js

@@ -124,8 +124,8 @@ const onColorChanged = (state, newValue) => {
   const { J, a, b } = d3.jab(rgb);
 
   state.target = {
-    jab: buildVectorData([J, a, b], jab2hue, jab2lit, jab2hex),
-    rgb: buildVectorData([rgb.r, rgb.g, rgb.b], rgb2hue, rgb2lit, rgb2hex),
+    jab: buildVectorData([J, a, b], jab2hue, jab2lit, jab2chroma, jab2hex),
+    rgb: buildVectorData([rgb.r, rgb.g, rgb.b], rgb2hue, rgb2lit, rgb2chroma, rgb2hex),
   };
 
   const rootElem = document.querySelector(":root");