diff --git a/packages/lib/src/toolbar/controls/Histogram/Histogram.tsx b/packages/lib/src/toolbar/controls/Histogram/Histogram.tsx
index 9f935a8c2..b5f12222c 100644
--- a/packages/lib/src/toolbar/controls/Histogram/Histogram.tsx
+++ b/packages/lib/src/toolbar/controls/Histogram/Histogram.tsx
@@ -4,7 +4,7 @@ import { AxisBottom, AxisLeft } from '@visx/axis';
 import { scaleLinear } from '@visx/scale';
 
 import { useSafeDomain } from '../../../vis/heatmap/hooks';
-import { useToArray, useCombinedDomain, useDomain } from '../../../vis/hooks';
+import { useCombinedDomain, useDomain } from '../../../vis/hooks';
 import type { HistogramParams } from '../../../vis/models';
 import { H5WEB_SCALES } from '../../../vis/scales';
 import Tick from '../../../vis/shared/Tick';
@@ -48,8 +48,6 @@ function Histogram(props: Props) {
 
   const [size, ref] = useMeasure<HTMLDivElement>();
 
-  const valuesArray = useToArray(values);
-
   if (!size) {
     return <div ref={ref} className={styles.container} />;
   }
@@ -67,19 +65,24 @@ function Histogram(props: Props) {
 
   const markerPositions = safeValue.map(xScale) as Domain;
 
+  const rects: JSX.Element[] = [];
+  values.forEach((d, i) =>
+    rects.push(
+      <rect
+        className={styles.bar}
+        key={i} // eslint-disable-line react/no-array-index-key
+        x={xScale(bins[i])}
+        y={height - yScale(d)}
+        width={xScale(bins[i + 1]) - xScale(bins[i]) + 0.5} // +0.5 removes the small gap between bars
+        height={yScale(d) - yScale(0)}
+      />
+    )
+  );
+
   return (
     <div ref={ref} className={styles.container}>
       <svg width="100%" height="100%" className={styles.histogram}>
-        {valuesArray.map((d, i) => (
-          <rect
-            className={styles.bar}
-            key={i} // eslint-disable-line react/no-array-index-key
-            x={xScale(bins[i])}
-            y={height - yScale(d)}
-            width={xScale(bins[i + 1]) - xScale(bins[i]) + 0.5} // +0.5 removes the small gap between bars
-            height={yScale(d) - yScale(0)}
-          />
-        ))}
+        {...rects}
         {colorMap && (
           <ColorBar
             x={markerPositions[0]}
diff --git a/packages/lib/src/vis/heatmap/utils.ts b/packages/lib/src/vis/heatmap/utils.ts
index 1e3539e43..b1b258887 100644
--- a/packages/lib/src/vis/heatmap/utils.ts
+++ b/packages/lib/src/vis/heatmap/utils.ts
@@ -107,7 +107,7 @@ export function getLinearGradient(
 export function getPixelEdgeValues(
   rawValues: NumArray | undefined,
   pixelCount: number
-): number[] {
+): NumArray {
   if (rawValues && rawValues.length === pixelCount) {
     // Add value at right-hand side of last pixel, assuming raw values are regularly spaced
     const deltaCoord = rawValues[1] - rawValues[0];
diff --git a/packages/lib/src/vis/hooks.ts b/packages/lib/src/vis/hooks.ts
index 2c2ec5609..15d601d06 100644
--- a/packages/lib/src/vis/hooks.ts
+++ b/packages/lib/src/vis/hooks.ts
@@ -18,7 +18,6 @@ import {
   getAxisValues,
   getCombinedDomain,
   getValueToIndexScale,
-  toArray,
 } from './utils';
 
 const useBounds = createMemo(getBounds);
@@ -29,8 +28,6 @@ export const useValueToIndexScale = createMemo(getValueToIndexScale);
 export const useAxisDomain = createMemo(getAxisDomain);
 export const useAxisValues = createMemo(getAxisValues);
 
-export const useToArray = createMemo(toArray);
-
 export function useDomain(
   valuesArray: AnyNumArray,
   scaleType: ScaleType = ScaleType.Linear,
diff --git a/packages/lib/src/vis/line/DataCurve.tsx b/packages/lib/src/vis/line/DataCurve.tsx
index e8918288b..4b9358ddc 100644
--- a/packages/lib/src/vis/line/DataCurve.tsx
+++ b/packages/lib/src/vis/line/DataCurve.tsx
@@ -22,7 +22,7 @@ declare global {
 }
 
 interface Props {
-  abscissas: number[];
+  abscissas: NumArray;
   ordinates: NumArray;
   errors?: NumArray;
   showErrors?: boolean;
diff --git a/packages/lib/src/vis/line/hooks.ts b/packages/lib/src/vis/line/hooks.ts
index c8575f4f2..3010c133b 100644
--- a/packages/lib/src/vis/line/hooks.ts
+++ b/packages/lib/src/vis/line/hooks.ts
@@ -7,7 +7,7 @@ import { useVisCanvasContext } from '../shared/VisCanvasProvider';
 const CAMERA_FAR = 1000; // R3F's default
 
 export function useCanvasPoints(
-  abscissas: number[],
+  abscissas: NumArray,
   ordinates: NumArray,
   errors?: NumArray
 ) {
diff --git a/packages/lib/src/vis/scatter/ScatterPoints.tsx b/packages/lib/src/vis/scatter/ScatterPoints.tsx
index 1bf62d8e2..319c617c2 100644
--- a/packages/lib/src/vis/scatter/ScatterPoints.tsx
+++ b/packages/lib/src/vis/scatter/ScatterPoints.tsx
@@ -11,8 +11,8 @@ import { useDataToColorScale } from './hooks';
 import { useBufferAttributes } from './hooks';
 
 interface Props {
-  abscissas: number[];
-  ordinates: number[];
+  abscissas: NumArray;
+  ordinates: NumArray;
   data: NumArray;
   domain: Domain;
   scaleType: ScaleType;
diff --git a/packages/lib/src/vis/scatter/ScatterVis.tsx b/packages/lib/src/vis/scatter/ScatterVis.tsx
index 431ddc33d..467f8bcd1 100644
--- a/packages/lib/src/vis/scatter/ScatterVis.tsx
+++ b/packages/lib/src/vis/scatter/ScatterVis.tsx
@@ -7,7 +7,6 @@ import {
 } from '@h5web/shared';
 import type { ThreeEvent } from '@react-three/fiber';
 import { useTooltip } from '@visx/tooltip';
-import { toArray } from 'lodash';
 import type { NdArray } from 'ndarray';
 import type { ReactNode } from 'react';
 
@@ -57,21 +56,18 @@ function ScatterVis(props: Props) {
   } = props;
 
   const {
-    value: abscissaValue,
+    value: abscissas,
     label: abscissaLabel,
     scaleType: abscissaScaleType,
   } = abscissaParams;
   const {
-    value: ordinateValue,
+    value: ordinates,
     label: ordinateLabel,
     scaleType: ordinateScaleType,
   } = ordinateParams;
 
-  assertLength(abscissaValue, dataArray.size, 'abscissa');
-  assertLength(ordinateValue, dataArray.size, 'ordinates');
-
-  const abscissas = toArray(abscissaValue);
-  const ordinates = toArray(ordinateValue);
+  assertLength(abscissas, dataArray.size, 'abscissa');
+  assertLength(ordinates, dataArray.size, 'ordinates');
 
   const abscissaDomain = useAxisDomain(abscissas, abscissaScaleType, 0.01);
   assertDefined(abscissaDomain, 'Abscissas have undefined domain');
diff --git a/packages/lib/src/vis/scatter/hooks.ts b/packages/lib/src/vis/scatter/hooks.ts
index 990ec272c..9e5fd4701 100644
--- a/packages/lib/src/vis/scatter/hooks.ts
+++ b/packages/lib/src/vis/scatter/hooks.ts
@@ -10,8 +10,8 @@ import { createAxisScale } from '../utils';
 const CAMERA_FAR = 1000; // R3F's default
 
 export function useBufferAttributes(
-  abscissas: number[],
-  ordinates: number[],
+  abscissas: NumArray,
+  ordinates: NumArray,
   data: NumArray,
   dataToColorScale: (val: number) => [number, number, number]
 ) {
diff --git a/packages/lib/src/vis/utils.ts b/packages/lib/src/vis/utils.ts
index 6c65b7240..ee3f4d718 100644
--- a/packages/lib/src/vis/utils.ts
+++ b/packages/lib/src/vis/utils.ts
@@ -162,7 +162,7 @@ function unsafeExtendDomain(
 }
 
 export function getValueToIndexScale(
-  values: number[],
+  values: NumArray,
   switchAtMidpoints?: boolean
 ): ScaleThreshold<number, number> {
   const rawThresholds = switchAtMidpoints
@@ -170,18 +170,15 @@ export function getValueToIndexScale(
     : values; // Else, the switch from i-1 to i will happen at values[i]
 
   // First threshold (going from 0 to 1) should be for the second value. Scaling the first value should return at 0.
-  const thresholds = rawThresholds.slice(1);
+  const thresholds = toArray(rawThresholds.slice(1));
   const indices = range(values.length);
+  if (isDescending(thresholds)) {
+    thresholds.reverse();
+    indices.reverse();
+  }
 
   // ScaleThreshold only works with ascending values so the scale is reversed for descending values
-  return scaleThreshold<number, number>(
-    isDescending(thresholds)
-      ? {
-          domain: [...thresholds].reverse(),
-          range: [...indices].reverse(),
-        }
-      : { domain: thresholds, range: indices }
-  );
+  return scaleThreshold<number, number>({ domain: thresholds, range: indices });
 }
 
 export function getCanvasScale(
@@ -300,12 +297,12 @@ export function getAxisOffsets(
   };
 }
 
-function isDescending(array: number[]): boolean {
+function isDescending(array: NumArray): boolean {
   return array[array.length - 1] - array[0] < 0;
 }
 
 export function getAxisDomain(
-  axisValues: number[],
+  axisValues: NumArray,
   scaleType: ScaleType = ScaleType.Linear,
   extensionFactor = 0
 ): Domain | undefined {
@@ -384,7 +381,7 @@ export function getVisibleDomains(
 export function getAxisValues(
   rawValues: NumArray | undefined,
   axisLength: number
-): number[] {
+): NumArray {
   if (!rawValues) {
     return range(axisLength);
   }
@@ -393,5 +390,5 @@ export function getAxisValues(
     throw new Error(`Expected array to have length ${axisLength} at least`);
   }
 
-  return toArray(rawValues).slice(0, axisLength);
+  return rawValues.slice(0, axisLength);
 }