fix custom color schemes

nomic-ai · Mar 14, 2023 · 97119ce · 97119ce
1 parent d9158e0
commit 97119ce
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 16 deletions.
diff --git a/dist/deepscatter.js b/dist/deepscatter.js
@@ -23903,15 +23903,22 @@ class Color extends Aesthetic {
         if (!this.is_dictionary()) {
           palette = palette_from_color_strings(range2);
         } else {
+          const data_values = this.column.data[0].dictionary.toArray();
           const dict_values = Object.fromEntries(
-            this.column.data[0].dictionary.toArray().map((val, i) => [val, i])
+            data_values.map((val, i) => [val, i])
           );
+          console.log({ dict_values });
           const colors2 = [];
-          for (const label of this.domain) {
-            if (dict_values[label] === void 0) {
-              colors2.push(range2[dict_values[label]]);
-            } else {
-              colors2.push("gray");
+          for (let i = 0; i < this.domain.length; i++) {
+            const label = this.domain[i];
+            const color2 = range2[i];
+            if (dict_values[label] !== void 0) {
+              colors2[dict_values[label]] = color2;
+            }
+          }
+          for (let i = 0; i < data_values.length; i++) {
+            if (colors2[i] === void 0) {
+              colors2[i] = "gray";
             }
           }
           palette = palette_from_color_strings(colors2);

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "deepscatter",
   "type": "module",
-  "version": "2.9.2",
+  "version": "2.9.3",
   "description": "Fast, animated zoomable scatterplots scaling to billions of points",
   "files": [
     "dist"

diff --git a/src/ColorAesthetic.ts b/src/ColorAesthetic.ts
@@ -265,17 +265,24 @@ export class Color extends Aesthetic<
         } else {
           // We need to find the integer identifiers for each of
           // the values in the domain.
+          const data_values = this.column.data[0]
+            .dictionary!.toArray()
           const dict_values = Object.fromEntries(
-            this.column.data[0]
-              .dictionary!.toArray()
+            data_values
               .map((val: string, i: Number) => [val, i])
           );
-          const colors = [];
-          for (const label of this.domain) {
-            if (dict_values[label] === undefined) {
-              colors.push(range[dict_values[label]]);
-            } else {
-              colors.push('gray');
+          console.log({dict_values})
+          const colors : string[] = [];
+          for (let i = 0; i < this.domain.length; i++) {
+            const label = this.domain[i];
+            const color = range[i];
+            if (dict_values[label] !== undefined) {
+              colors[dict_values[label]] = color;
+            }
+          }
+          for (let i = 0; i < data_values.length; i++) {
+            if (colors[i] === undefined) {
+              colors[i] = 'gray';
             }
           }
           palette = palette_from_color_strings(colors);

diff --git a/vietnam2.html b/vietnam2.html
@@ -7,11 +7,13 @@
       flex-direction: row;
       flex-wrap: wrap;
     }
+
     dl {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
     }
+
     dt {
       font-weight: bold;
       color: rgb(128, 19, 0);
@@ -26,6 +28,7 @@
       padding: 0 0 0.5em 0;
       width: 180px;
     }
+
     #date {
       width: 100%;
     }
@@ -206,30 +209,36 @@ <h1>Vietnam</h1>
   #deepscatter {
     position: relative;
   }
+
   .overlay {
     position: absolute;
     top: 0;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 99;
   }
+
   #left-overlay {
     left: 0;
   }
+
   #color-legend {
     right: 0;
     display: flex;
     flex-direction: column;
     align-items: right;
     justify-content: right;
   }
+
   .legend-div {
     margin: 5px;
     padding: 5px 15px;
   }
+
   button {
     margin: 0.1em;
   }
+
   button:hover {
     background-color: #eee;
   }
-</style>
+</style>