Updated the scatter plot colors.

Author: Robert Crocker

src/App.tsx

@@ -69,7 +69,7 @@ function App() {
         legend={'right'}
         legendLabel="Markets"
       />
-      {/* <ScatterPlot
+      <ScatterPlot
         theme="light"
         height="100%"
         width="100%"
@@ -83,7 +83,7 @@ function App() {
         yGrid={true}
         yAxis="right"
         yAxisLabel="Body Mass"
-      /> */}
+      />
     </Container>
   );
 }

src/charts/ScatterPlot/ScatterPlot.tsx

@@ -144,10 +144,13 @@ export default function ScatterPlot({
   // ********************
 
   // discreteColors must be between 3 and 9, so here we create a range.
+  const numberOfKeys = Array.from(keys).length;
   const discreteColors =
-    Array.from(keys).length < 4 ? 3 : Math.min(Array.from(keys).length, 9);
-  const computedScheme = d3[`${colorScheme}`][discreteColors];
-  const colorScale = d3.scaleOrdinal(Array.from(computedScheme).reverse());
+    numberOfKeys < 4 ? 3 : Math.min(Array.from(keys).length, 9);
+  const computedScheme = Array.from(
+    d3[`${colorScheme}`][discreteColors]
+  ).reverse();
+  const colorScale = d3.scaleOrdinal(computedScheme);
   colorScale.domain(keys);
 
   // ********************