diff --git a/playwright/scatterPlot/04_color.spec.ts b/playwright/scatterPlot/04_color.spec.ts
index 9c67fda23..72227621d 100644
--- a/playwright/scatterPlot/04_color.spec.ts
+++ b/playwright/scatterPlot/04_color.spec.ts
@@ -4,7 +4,7 @@ test('no color selected', async ({ page }, testInfo) => {
   await page.goto('/');
   await page.getByTestId('SingleSelectCloseButton').last().click();
   await expect(page.getByLabel('Legend')).toBeDisabled();
-  await expect(page.locator('g[class="legend"]')).not.toBeVisible();
+  await expect(page.getByTestId('PlotLegend')).not.toBeVisible();
 });
 
 test('color selected', async ({ page }) => {
@@ -12,7 +12,12 @@ test('color selected', async ({ page }) => {
   await page.getByTestId('SingleSelectColor').click();
   await page.getByRole('option', { name: 'Cellularity' }).click();
   await expect(page.getByLabel('Legend')).not.toBeDisabled();
-  await expect(page.locator('g[class="legend"]')).toBeVisible();
+
+  const toggleLegend = await page.getByTestId('ToggleLegend');
+  const parentElement = await toggleLegend.evaluateHandle((node) => node.parentElement);
+  await parentElement.click();
+
+  await expect(page.getByTestId('PlotLegend')).toBeVisible();
 });
 
 test('show color scale', async ({ page }, testInfo) => {
diff --git a/playwright/scatterPlot/05_shape.spec.ts b/playwright/scatterPlot/05_shape.spec.ts
index 3030c4e45..66d93de3e 100644
--- a/playwright/scatterPlot/05_shape.spec.ts
+++ b/playwright/scatterPlot/05_shape.spec.ts
@@ -10,5 +10,10 @@ test('shape selected', async ({ page }) => {
   await page.getByTestId('SingleSelectShape').click();
   await page.getByRole('option', { name: 'Breast Surgery Type Sparse' }).click();
   await expect(page.getByLabel('Legend')).not.toBeDisabled();
-  expect(await page.locator('g[class="legend"]')).toBeVisible();
+
+  const toggleLegend = await page.getByTestId('ToggleLegend');
+  const parentElement = await toggleLegend.evaluateHandle((node) => node.parentElement);
+  await parentElement.click();
+
+  await expect(page.getByTestId('PlotLegend')).toBeVisible();
 });
diff --git a/src/hooks/useAsync.tsx b/src/hooks/useAsync.tsx
index 645b14fa7..ce298b4b6 100644
--- a/src/hooks/useAsync.tsx
+++ b/src/hooks/useAsync.tsx
@@ -37,6 +37,7 @@ export const useAsync = <F extends (...args: any[]) => any, E = Error, T = Await
 ) => {
   const [status, setStatus] = React.useState<useAsyncStatus>('idle');
   const [value, setValue] = React.useState<T | null>(null);
+  const [args, setArgs] = React.useState<Parameters<F> | null>(null);
   const [error, setError] = React.useState<E | null>(null);
   const latestPromiseRef = React.useRef<Promise<T> | null>();
   const mountedRef = React.useRef<boolean>(false);
@@ -53,6 +54,7 @@ export const useAsync = <F extends (...args: any[]) => any, E = Error, T = Await
   // useCallback ensures the below useEffect is not called
   // on every render, but only if asyncFunction changes.
   const execute = React.useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-shadow
     (...args: Parameters<typeof asyncFunction>) => {
       setStatus('pending');
       // Do not unset the value, as we mostly want to retain the last value to avoid flickering, i.e. for "silent" updates.
@@ -62,6 +64,7 @@ export const useAsync = <F extends (...args: any[]) => any, E = Error, T = Await
         .then((response: T) => {
           if (mountedRef.current && currentPromise === latestPromiseRef.current) {
             setValue(response);
+            setArgs(args);
             setStatus('success');
           }
           return response;
@@ -69,6 +72,7 @@ export const useAsync = <F extends (...args: any[]) => any, E = Error, T = Await
         .catch((e: E) => {
           if (mountedRef.current && currentPromise === latestPromiseRef.current) {
             setValue(null);
+            setArgs(args);
             setError(e);
             setStatus('error');
           }
@@ -93,5 +97,5 @@ export const useAsync = <F extends (...args: any[]) => any, E = Error, T = Await
     }
   }, [execute, immediate]);
 
-  return { execute, status, value, error };
+  return { execute, status, value, error, args };
 };
diff --git a/src/jstat.d.ts b/src/jstat.d.ts
new file mode 100644
index 000000000..f7227816f
--- /dev/null
+++ b/src/jstat.d.ts
@@ -0,0 +1,9 @@
+/**
+ * No @types/jstat exist yet, this is a temporary workaround.
+ */
+declare module 'jstat' {
+  export function corrcoeff(a: number[], b: number[]): number;
+  export function spearmancoeff(a: number[], b: number[]): number;
+  export function tukeyhsd(a: number[][]): number;
+  export function ftest(a: number, b: number, c: number): number;
+}
diff --git a/src/vis/EagerVis.tsx b/src/vis/EagerVis.tsx
index 9d9704a06..23008d758 100644
--- a/src/vis/EagerVis.tsx
+++ b/src/vis/EagerVis.tsx
@@ -41,12 +41,12 @@ import { SankeyVisSidebar } from './sankey/SankeyVisSidebar';
 import { ISankeyConfig } from './sankey/interfaces';
 import { sankeyMergeDefaultConfig } from './sankey/utils';
 import { scatterMergeDefaultConfig } from './scatter';
-import { ScatterVis } from './scatter/ScatterVis';
 import { ScatterVisSidebar } from './scatter/ScatterVisSidebar';
 import { IScatterConfig } from './scatter/interfaces';
 import { ViolinVis, violinBoxMergeDefaultConfig } from './violin';
 import { ViolinVisSidebar } from './violin/ViolinVisSidebar';
 import { IViolinConfig } from './violin/interfaces';
+import { ScatterVis } from './scatter/ScatterVis';
 
 const DEFAULT_SHAPES = ['circle', 'square', 'triangle-up', 'star'];
 
@@ -280,28 +280,6 @@ export function EagerVis({
     return currMap;
   }, [selected]);
 
-  const scales: Scales = React.useMemo(
-    () => ({
-      color: d3v7
-        .scaleOrdinal()
-        .range(
-          colors || [
-            getCssValue('visyn-c1'),
-            getCssValue('visyn-c2'),
-            getCssValue('visyn-c3'),
-            getCssValue('visyn-c4'),
-            getCssValue('visyn-c5'),
-            getCssValue('visyn-c6'),
-            getCssValue('visyn-c7'),
-            getCssValue('visyn-c8'),
-            getCssValue('visyn-c9'),
-            getCssValue('visyn-c10'),
-          ],
-        ),
-    }),
-    [colors],
-  );
-
   const commonProps = {
     showSidebar,
     setShowSidebar,
@@ -363,7 +341,6 @@ export function EagerVis({
               selectedMap={selectedMap}
               selectedList={selected}
               columns={columns}
-              scales={scales}
               showSidebar={showSidebar}
               showCloseButton={showCloseButton}
               closeButtonCallback={closeCallback}
diff --git a/src/vis/general/InvalidCols.tsx b/src/vis/general/InvalidCols.tsx
index 356a6c11d..41b185c2a 100644
--- a/src/vis/general/InvalidCols.tsx
+++ b/src/vis/general/InvalidCols.tsx
@@ -1,11 +1,11 @@
-import { Alert, Center, Stack, rem } from '@mantine/core';
+import { Alert, Center, Stack } from '@mantine/core';
 import * as React from 'react';
 
-export function InvalidCols({ headerMessage, bodyMessage }: { headerMessage: string; bodyMessage: string }) {
+export function InvalidCols({ headerMessage, bodyMessage, style }: { headerMessage: string; bodyMessage: string; style?: React.CSSProperties }) {
   return (
-    <Stack style={{ height: '100%' }}>
-      <Center style={{ height: '100%', width: '100%' }}>
-        <Alert title={headerMessage} color="yellow" miw={rem(420)}>
+    <Stack h="100%" style={style}>
+      <Center h="100%">
+        <Alert title={headerMessage} color="yellow">
           {bodyMessage}
         </Alert>
       </Center>
diff --git a/src/vis/general/layoutUtils.ts b/src/vis/general/layoutUtils.ts
index 687cbf386..010ff913c 100644
--- a/src/vis/general/layoutUtils.ts
+++ b/src/vis/general/layoutUtils.ts
@@ -167,6 +167,7 @@ export async function resolveSingleColumn(column: VisColumn | null) {
   if (!column) {
     return null;
   }
+
   return {
     ...column,
     resolvedValues: await column.values(),
diff --git a/src/vis/general/utils.ts b/src/vis/general/utils.ts
index e62480c93..424ad10f5 100644
--- a/src/vis/general/utils.ts
+++ b/src/vis/general/utils.ts
@@ -13,11 +13,11 @@ export function getLabelOrUnknown(label: string | number | null | undefined, unk
     notation: 'compact',
     compactDisplay: 'short',
   });
-  return [null, 'null', undefined, 'undefined', ''].includes(label as string)
+  return label === null || label === 'null' || label === undefined || label === 'undefined' || label === ''
     ? unknownLabel
-    : Number.isNaN(Number(label))
-      ? (label as string)
-      : formatter.format(label as number);
+    : Number(label) && !Number.isInteger(label) // if it is a number, but not an integer, apply NumberFormat
+      ? formatter.format(label as number)
+      : label.toString();
 }
 
 /**
diff --git a/src/vis/interfaces.ts b/src/vis/interfaces.ts
index e405cb187..d9065c2f1 100644
--- a/src/vis/interfaces.ts
+++ b/src/vis/interfaces.ts
@@ -165,7 +165,6 @@ export interface ICommonVisProps<T> {
   selectedList?: string[];
   showCloseButton?: boolean;
   closeButtonCallback?: () => void;
-  scales?: Scales;
   enableSidebar?: boolean;
   showSidebar?: boolean;
   showSidebarDefault?: boolean;
diff --git a/src/vis/scatter/FastTextMeasure.ts b/src/vis/scatter/FastTextMeasure.ts
new file mode 100644
index 000000000..c293313e9
--- /dev/null
+++ b/src/vis/scatter/FastTextMeasure.ts
@@ -0,0 +1,69 @@
+/**
+ * Class that can measure text for a given font very efficiently (about ~1000 times faster than canvas measuretext).
+ * It uses a precomputed table of character widths for a given font and size.
+ *
+ * Also supports utility functions like ellipsis.
+ */
+export class FastTextMeasure {
+  table = new Float32Array(127);
+
+  meanWidth = 0;
+
+  constructor(private font: string) {
+    this.computeTable();
+  }
+
+  // Computes the whole size table
+  computeTable() {
+    const textWidthCanvas = document.createElement('canvas');
+    const textWidthContext = textWidthCanvas.getContext('2d');
+
+    if (!textWidthContext) {
+      throw new Error('Could not get 2d context');
+    }
+
+    textWidthContext.font = this.font;
+
+    for (let i = 1; i < 127; i++) {
+      this.table[i] = textWidthContext.measureText(String.fromCharCode(i)).width;
+      this.meanWidth += this.table[i]!;
+    }
+
+    this.meanWidth /= 127;
+  }
+
+  // Measures the width of a given text
+  fastMeasureText(text: string) {
+    let width = 0;
+
+    for (let i = 0; i < text.length; i++) {
+      const ascii = text.charCodeAt(i);
+      if (ascii < 127) {
+        width += this.table[ascii]!;
+      } else {
+        width += this.meanWidth;
+      }
+    }
+
+    return width;
+  }
+
+  // Cuts off text and adds ellipsis if it exceeds the given width
+  textEllipsis(text: string, maxWidth: number) {
+    let width = this.fastMeasureText(text);
+
+    if (width <= maxWidth) {
+      return text;
+    }
+
+    const ellipsisWidth = this.fastMeasureText('...');
+    let ellipsisCount = 0;
+
+    while (width + ellipsisWidth > maxWidth) {
+      ellipsisCount++;
+      width -= this.table[text.charCodeAt(text.length - ellipsisCount)]!;
+    }
+
+    return `${text.slice(0, text.length - ellipsisCount)}...`;
+  }
+}
diff --git a/src/vis/scatter/Regression.tsx b/src/vis/scatter/Regression.tsx
index e8b03d7c5..3d33ac337 100644
--- a/src/vis/scatter/Regression.tsx
+++ b/src/vis/scatter/Regression.tsx
@@ -26,6 +26,7 @@ export function RegressionLineOptions({ callback, currentSelected, showColorPick
         <Select
           data-testid="RegressionLineSelect"
           searchable
+          clearable
           label={
             <HelpHoverCard
               title={
@@ -100,8 +101,8 @@ export function RegressionLineOptions({ callback, currentSelected, showColorPick
  * @return {number} - The r^2 value, or NaN if one cannot be calculated.
  */
 function determinationCoefficient(data: RegressionData, results: RegressionData) {
-  const predictions = [];
-  const observations = [];
+  const predictions: number[][] = [];
+  const observations: number[][] = [];
 
   data.forEach((d, i) => {
     if (d[1] !== null) {
@@ -236,7 +237,7 @@ const methods = {
       stats: {
         r2: round(r2, options.precision),
         n: len,
-        pValue: Number.isNaN(pValue) ? null : pValue,
+        pValue: Number.isNaN(pValue) ? undefined : pValue,
       },
       equation: intercept === 0 ? `y = ${gradient}x` : `y = ${gradient}x + ${intercept}`,
       svgPath: `M ${min} ${predict(min)[1]} L ${max} ${predict(max)[1]}`,
@@ -315,7 +316,7 @@ const methods = {
       .join(' ');
 
     const r2 = determinationCoefficient(data, points);
-    const pValue = null; // did not define p-value for exponential regression
+    const pValue: number = null; // did not define p-value for exponential regression
 
     return {
       stats: {
@@ -335,27 +336,26 @@ const regressionMethodsMapping = {
 };
 
 export const fitRegressionLine = (
-  data: Partial<Plotly.PlotData>,
+  data: { x: number[]; y: number[] },
   method: ERegressionLineType,
+  xref: string,
+  yref: string,
   options: IRegressionFitOptions = DEFAULT_CURVE_FIT_OPTIONS,
 ): IRegressionResult => {
   // Filter out null or undefined values (equivalent to pd.dropna())
-  const filteredPairs = (data.x as number[]).map((value, index) => ({ x: value, y: data.y[index] })).filter((pair) => pair.x != null && pair.y != null);
-  const x = filteredPairs.map((pair) => pair.x);
-  const y = filteredPairs.map((pair) => pair.y);
-
-  const pearsonRho = round(corrcoeff(x, y), options.precision);
-  const spearmanRho = round(spearmancoeff(x, y), options.precision);
-  const regressionResult = regressionMethodsMapping[method]
-    ? methods[regressionMethodsMapping[method]](
-        x.map((val, i) => [val, y[i]]),
-        options,
-      )
-    : null;
+  const pearsonRho = round(corrcoeff(data.x, data.y), options.precision);
+  const spearmanRho = round(spearmancoeff(data.x, data.y), options.precision);
+  const fnc = method === ERegressionLineType.LINEAR ? methods.linear : methods.polynomial;
+
+  const regressionResult = fnc(
+    data.x.map((val, i) => [val, data.y[i]!]),
+    options,
+  );
+
   return {
     ...regressionResult,
     stats: { ...regressionResult.stats, pearsonRho, spearmanRho },
-    xref: data.xaxis,
-    yref: data.yaxis,
+    xref,
+    yref,
   };
 };
diff --git a/src/vis/scatter/ScatterVis.tsx b/src/vis/scatter/ScatterVis.tsx
index 2faca8f47..98ae24d56 100644
--- a/src/vis/scatter/ScatterVis.tsx
+++ b/src/vis/scatter/ScatterVis.tsx
@@ -1,69 +1,66 @@
-import { Center, Group, Stack, Switch, Tooltip } from '@mantine/core';
-import { useShallowEffect, useUncontrolled } from '@mantine/hooks';
-import * as d3 from 'd3v7';
-import uniqueId from 'lodash/uniqueId';
+/* eslint-disable react-compiler/react-compiler */
+import { useElementSize, useResizeObserver, useWindowEvent } from '@mantine/hooks';
+import { Center, Group, Stack, Switch, Tooltip, ScrollArea } from '@mantine/core';
 import * as React from 'react';
-import { useEffect, useMemo, useState } from 'react';
+import cloneDeep from 'lodash/cloneDeep';
+import uniq from 'lodash/uniq';
+import * as d3v7 from 'd3v7';
+import { css } from '@emotion/css';
 import { useAsync } from '../../hooks';
 import { PlotlyComponent, PlotlyTypes } from '../../plotly';
 import { DownloadPlotButton } from '../general/DownloadPlotButton';
-import { InvalidCols } from '../general/InvalidCols';
-import { VIS_TRACES_COLOR } from '../general/constants';
-import { beautifyLayout } from '../general/layoutUtils';
-import { EScatterSelectSettings, ICommonVisProps } from '../interfaces';
+import { VIS_NEUTRAL_COLOR } from '../general/constants';
+import { EColumnTypes, ENumericalColorScaleType, EScatterSelectSettings, ICommonVisProps } from '../interfaces';
 import { BrushOptionButtons } from '../sidebar/BrushOptionButtons';
+import { ERegressionLineType, IInternalScatterConfig, IRegressionResult } from './interfaces';
+import { defaultRegressionLineStyle, fetchColumnData, regressionToAnnotation } from './utils';
+import { getLabelOrUnknown } from '../general/utils';
+import { truncateText } from '../general/layoutUtils';
 import { fitRegressionLine } from './Regression';
-import { ELabelingOptions, ERegressionLineType, IInternalScatterConfig, IRegressionResult } from './interfaces';
-import { createScatterTraces, defaultRegressionLineStyle } from './utils';
+import { useDataPreparation } from './useDataPreparation';
+import { InvalidCols } from '../general/InvalidCols';
+import { i18n } from '../../i18n/I18nextManager';
+import { LegendItem } from '../general/LegendItem';
+import { useLayout } from './useLayout';
+import { useData } from './useData';
+import { categoricalColors, getCssValue } from '../../utils';
 
-const formatPValue = (pValue: number) => {
-  if (pValue === null) {
-    return '';
-  }
-  if (pValue < 0.001) {
-    return `<i>(P<.001)</i>`;
-  }
-  return `<i>(P=${pValue.toFixed(3).toString().replace(/^0+/, '')})</i>`;
-};
+function Legend({ categories, colorMap, onClick }: { categories: string[]; colorMap: (v: number | string) => string; onClick: (string) => void }) {
+  return (
+    <ScrollArea
+      data-testid="PlotLegend"
+      style={{ height: '100%' }}
+      scrollbars="y"
+      className={css`
+        .mantine-ScrollArea-viewport > div {
+          display: flex !important;
+          flex-direction: column !important;
+        }
+      `}
+    >
+      <Stack gap={0}>
+        {categories.map((c) => {
+          return <LegendItem key={c} color={colorMap(c)} label={c} onClick={() => onClick(c)} filtered={false} />;
+        })}
+      </Stack>
+    </ScrollArea>
+  );
+}
 
-const annotationsForRegressionStats = (results: IRegressionResult[], precision: number) => {
-  const annotations: Partial<PlotlyTypes.Annotations>[] = [];
-
-  for (const r of results) {
-    const statsFormatted = [
-      `n: ${r.stats.n}`,
-      `R²: ${r.stats.r2 < 0.001 ? '<0.001' : r.stats.r2} ${formatPValue(r.stats.pValue)}`,
-      `Pearson: ${r.stats.pearsonRho?.toFixed(precision)}`,
-      `Spearman: ${r.stats.spearmanRho?.toFixed(precision)}`,
-    ];
-
-    annotations.push({
-      x: 0.0,
-      y: 1.0,
-      xref: `${r.xref} domain` as PlotlyTypes.XAxisName,
-      yref: `${r.yref} domain` as PlotlyTypes.YAxisName,
-      text: statsFormatted.map((row) => `${row}`).join('<br>'),
-      showarrow: false,
-      font: {
-        family: 'Roboto, sans-serif',
-        size: results.length > 1 ? 12 : 13.4,
-        color: '#99A1A9',
-      },
-      align: 'left',
-      xanchor: 'left',
-      yanchor: 'top',
-      bgcolor: 'rgba(255, 255, 255, 0.8)',
-      xshift: 10,
-      yshift: -10,
-    });
-  }
-  return annotations;
+// d3v7.force
+
+const lineStyleToPlotlyShapeLine = (lineStyle: { colors: string[]; colorSelected: number; width: number; dash: PlotlyTypes.Dash }) => {
+  return {
+    color: lineStyle.colors[lineStyle.colorSelected],
+    width: lineStyle.width,
+    dash: lineStyle.dash,
+  };
 };
 
 export function ScatterVis({
   config,
   columns,
-  shapes = ['circle', 'square', 'triangle-up', 'star'],
+  shapes: uniqueSymbols = ['circle', 'square', 'triangle-up', 'star'],
   stats,
   statsCallback = () => null,
   selectionCallback = () => null,
@@ -72,359 +69,500 @@ export function ScatterVis({
   setConfig,
   dimensions,
   showDragModeOptions,
-  scales,
   scrollZoom,
   uniquePlotId,
   showDownloadScreenshot,
 }: ICommonVisProps<IInternalScatterConfig>) {
-  const id = React.useMemo(() => uniquePlotId || uniqueId('ScatterVis'), [uniquePlotId]);
-  const [showLegend, setShowLegend] = useUncontrolled({
-    defaultValue: true,
-    value: config.showLegend,
-  });
-  const [layout, setLayout] = useState<Partial<PlotlyTypes.Layout>>(null);
-  const [isShiftPressed, setIsShiftPressed] = useState(false);
-  const [isSelecting, setIsSelecting] = useState(false);
-
-  // TODO: This is a little bit hacky, Also notification should be shown to the user
-  // Limit numerical columns to 2 if facets are enabled
-  useEffect(() => {
-    if (config.facets && config.numColumnsSelected.length > 2) {
-      setConfig({ ...config, numColumnsSelected: config.numColumnsSelected.slice(0, 2) });
-    }
-  }, [config, setConfig]);
+  const id = `ScatterVis_${React.useId()}`;
 
-  useEffect(() => {
-    const plotDiv = document.getElementById(`${id}`);
-    if (plotDiv) {
-      import('plotly.js-dist-min').then((Plotly) => {
-        Plotly.Plots.resize(plotDiv);
-      });
+  const [shiftPressed, setShiftPressed] = React.useState(false);
+  const [showLegend, setShowLegend] = React.useState(false);
+
+  // const [ref, { width, height }] = useResizeObserver();
+  const { ref, width, height } = useElementSize();
+
+  useWindowEvent('keydown', (event) => {
+    if (event.shiftKey) {
+      setShiftPressed(true);
     }
-  }, [id, dimensions]);
+  });
 
-  useEffect(() => {
-    setLayout(null);
-  }, [config.numColumnsSelected.length]);
+  useWindowEvent('keyup', (event) => {
+    if (!event.shiftKey) {
+      setShiftPressed(false);
+    }
+  });
 
-  const {
-    value: traces,
-    status: traceStatus,
-    error: traceError,
-  } = useAsync(createScatterTraces, [
+  // Base data to work on
+  const { value, status, args, error } = useAsync(fetchColumnData, [
     columns,
     config.numColumnsSelected,
     config.labelColumns,
-    config.facets,
-    config.shape,
+    config.subplots,
     config.color,
-    config.alphaSliderVal,
-    config.sizeSliderVal,
-    config.numColorScaleType,
-    scales,
-    shapes,
-    config.showLabels,
-    config.showLabelLimit,
-    selectedMap,
+    config.shape,
+    config.facets,
   ]);
 
-  const lineStyleToPlotlyShapeLine = (lineStyle: { colors: string[]; colorSelected: number; width: number; dash: PlotlyTypes.Dash }) => {
-    return {
-      color: lineStyle.colors[lineStyle.colorSelected],
-      width: lineStyle.width,
-      dash: lineStyle.dash,
-    };
-  };
+  // Subtract header
+  // const width = Math.max(dimensions.width, 0);
+  // const height = Math.max(dimensions.height - 40, 0);
 
-  // Regression lines for all subplots
-  const regression: { shapes: Partial<PlotlyTypes.Shape>[]; results: IRegressionResult[] } = useMemo(() => {
-    if (traces?.plots) {
-      statsCallback(null);
-      if (config.regressionLineOptions?.type && config.regressionLineOptions.type !== ERegressionLineType.NONE) {
-        const regressionShapes: Partial<PlotlyTypes.Shape>[] = [];
-        const regressionResults: IRegressionResult[] = [];
-        for (const plot of traces.plots) {
-          if (plot.data.type === 'scattergl') {
-            const curveFit = fitRegressionLine(plot.data, config.regressionLineOptions.type, config.regressionLineOptions.fitOptions);
-            if (!curveFit.svgPath.includes('NaN')) {
-              regressionShapes.push({
-                type: 'path',
-                path: curveFit.svgPath,
-                line: lineStyleToPlotlyShapeLine({ ...defaultRegressionLineStyle, ...config.regressionLineOptions.lineStyle }),
-                xref: curveFit.xref as PlotlyTypes.XAxisName,
-                yref: curveFit.yref as PlotlyTypes.YAxisName,
-              });
-            }
-            regressionResults.push(curveFit);
-          }
-        }
+  // Ref to previous arguments for useAsync
+  const previousArgs = React.useRef<typeof args>(args);
+
+  // Plotlys internal layout state
+  const internalLayoutRef = React.useRef<Partial<PlotlyTypes.Layout>>({});
+
+  // If the useAsync arguments change, clear the internal layout state.
+  // Why not just use the config to compare things?
+  // Because the useAsync takes one render cycle to update the value, and inbetween that, plotly has already updated the internalLayoutRef again with the old one.
+  if (args?.[1] !== previousArgs.current?.[1] || args?.[5] !== previousArgs.current?.[5]) {
+    internalLayoutRef.current = {};
+    previousArgs.current = args;
+  }
 
-        // If we only have one subplot set the stats directly and not on hover
-        if (regressionResults.length === 1) {
-          statsCallback(regressionResults[0].stats);
+  const { subplots, scatter, splom, facet, shapeScale } = useDataPreparation({
+    value,
+    status,
+    uniqueSymbols,
+    numColorScaleType: config.numColorScaleType,
+  });
+
+  const regressions = React.useMemo<{
+    results: IRegressionResult[];
+    shapes: Partial<PlotlyTypes.Shape>[];
+    annotations: Partial<PlotlyTypes.Annotations>[];
+  }>(() => {
+    if (status !== 'success' || !value || !config.regressionLineOptions?.type || config.regressionLineOptions.type === ERegressionLineType.NONE) {
+      return { shapes: [], annotations: [], results: [] };
+    }
+
+    if (subplots) {
+      const shapes: Partial<PlotlyTypes.Shape>[] = [];
+      const annotations: Partial<PlotlyTypes.Annotations>[] = [];
+      const results: IRegressionResult[] = [];
+
+      subplots.xyPairs.forEach((pair) => {
+        const curveFit = fitRegressionLine(
+          { x: pair.validIndices.map((i) => pair.x[i]) as number[], y: pair.validIndices.map((i) => pair.y[i]) as number[] },
+          config.regressionLineOptions.type,
+          pair.xref,
+          pair.yref,
+          config.regressionLineOptions.fitOptions,
+        );
+
+        if (!curveFit.svgPath.includes('NaN')) {
+          shapes.push({
+            type: 'path',
+            path: curveFit.svgPath,
+            line: lineStyleToPlotlyShapeLine({ ...defaultRegressionLineStyle, ...config.regressionLineOptions.lineStyle }),
+            xref: pair.xref,
+            yref: pair.yref,
+          });
+
+          results.push(curveFit);
         }
-        return { shapes: regressionShapes, results: regressionResults };
-      }
+      });
+
+      return { shapes, results, annotations };
     }
-    return { shapes: [], results: [] };
-  }, [traces?.plots, config, statsCallback]);
-
-  // Plot annotations
-  const annotations: Partial<PlotlyTypes.Annotations>[] = useMemo(() => {
-    const combinedAnnotations = [];
-    if (traces && traces.plots) {
-      if (config.facets) {
-        traces.plots.map((p) =>
-          combinedAnnotations.push({
-            x: 0.5,
-            y: 1,
-            yshift: 5,
-            xref: `${p.data.xaxis} domain` as PlotlyTypes.XAxisName,
-            yref: `${p.data.yaxis} domain` as PlotlyTypes.YAxisName,
-            xanchor: 'center',
-            yanchor: 'bottom',
-            text: p.title,
-            showarrow: false,
-            font: {
-              size: 16,
-              color: VIS_TRACES_COLOR,
+
+    if (scatter) {
+      const curveFit = fitRegressionLine(
+        {
+          x: scatter.plotlyData.validIndices.map((i) => scatter.plotlyData.x[i]) as number[],
+          y: scatter.plotlyData.validIndices.map((i) => scatter.plotlyData.y[i]) as number[],
+        },
+        config.regressionLineOptions.type,
+        'x',
+        'y',
+        config.regressionLineOptions.fitOptions,
+      );
+
+      if (!curveFit.svgPath.includes('NaN')) {
+        return {
+          shapes: [
+            {
+              type: 'path',
+              path: curveFit.svgPath,
+              line: lineStyleToPlotlyShapeLine({ ...defaultRegressionLineStyle, ...config.regressionLineOptions.lineStyle }),
+              xref: 'x',
+              yref: 'y',
             },
-          }),
-        );
+          ],
+          results: [curveFit],
+          annotations: [regressionToAnnotation(curveFit, 3, 'x', 'y')],
+        };
       }
+    }
 
-      if (config.regressionLineOptions?.showStats) {
-        combinedAnnotations.push(...annotationsForRegressionStats(regression.results, config.regressionLineOptions.fitOptions?.precision || 3));
-      }
+    if (facet) {
+      const shapes: Partial<PlotlyTypes.Shape>[] = [];
+      const annotations: Partial<PlotlyTypes.Annotations>[] = [];
+      const results: IRegressionResult[] = [];
+
+      facet.resultData.forEach((group) => {
+        const curveFit = fitRegressionLine(
+          { x: group.data.validIndices.map((i) => group.data.x[i]) as number[], y: group.data.validIndices.map((i) => group.data.y[i]) as number[] },
+          config.regressionLineOptions.type,
+          group.xref,
+          group.yref,
+          config.regressionLineOptions.fitOptions,
+        );
+
+        if (!curveFit.svgPath.includes('NaN')) {
+          shapes.push({
+            type: 'path',
+            path: curveFit.svgPath,
+            line: lineStyleToPlotlyShapeLine({ ...defaultRegressionLineStyle, ...config.regressionLineOptions.lineStyle }),
+            xref: group.xref,
+            yref: group.yref,
+          });
+
+          results.push(curveFit);
+        }
+      });
+
+      return { shapes, results, annotations };
     }
 
-    return combinedAnnotations;
-  }, [config.facets, config.regressionLineOptions, regression.results, traces]);
+    if (splom) {
+      // SPLOM case, fit a curve through each pair
+      const results: IRegressionResult[] = [];
+      const plotlyShapes: Partial<PlotlyTypes.Shape>[] = [];
+      // eslint-disable-next-line guard-for-in
+      splom.xyPairs.forEach((pair, i) => {
+        const curveFit = fitRegressionLine(
+          { x: pair.data.x.filter((x) => x), y: pair.data.y.filter((y) => y) },
+          config.regressionLineOptions.type,
+          pair.xref,
+          pair.yref,
+          config.regressionLineOptions.fitOptions,
+        );
+
+        if (!curveFit.svgPath.includes('NaN')) {
+          plotlyShapes.push({
+            type: 'path',
+            path: curveFit.svgPath,
+            line: lineStyleToPlotlyShapeLine({ ...defaultRegressionLineStyle, ...config.regressionLineOptions.lineStyle }),
+            xref: pair.xref,
+            yref: pair.yref,
+          });
 
-  React.useEffect(() => {
-    if (!traces) {
-      return;
+          results.push(curveFit);
+        }
+      });
+
+      return { shapes: plotlyShapes, results, annotations: [] };
     }
 
-    const innerLayout: Partial<PlotlyTypes.Layout> = {
-      hovermode: 'closest',
-      showlegend: showLegend,
-      legend: {
-        // @ts-ignore
-        itemclick: false,
-        itemdoubleclick: false,
+    return { shapes: [], results: [], annotations: [] };
+  }, [
+    status,
+    value,
+    config.regressionLineOptions.type,
+    config.regressionLineOptions.fitOptions,
+    config.regressionLineOptions.lineStyle,
+    subplots,
+    scatter,
+    facet,
+    splom,
+  ]);
 
-        font: {
-          // same as default label font size in the sidebar
-          size: 13.4,
-        },
-      },
-      font: {
-        family: 'Roboto, sans-serif',
-        size: 13.4,
-      },
-      margin: {
-        t: showDragModeOptions ? (config.facets ? 40 : 25) : config.facets ? 65 : 50,
-        r: 25,
-        l: 50,
-        b: 50,
-      },
-      shapes: [],
-      grid: { rows: traces.rows, columns: traces.cols, xgap: 0.15, ygap: config.facets ? 0.2 : 0.15, pattern: 'independent' },
-      dragmode: config.dragMode,
-    };
-
-    setLayout((previous) => ({ ...previous, ...beautifyLayout(traces, innerLayout, previous, null, false) }));
-  }, [traces, config.dragMode, showLegend, showDragModeOptions, config.facets]);
-
-  const plotsWithSelectedPoints = useMemo(() => {
-    if (traces) {
-      const allPlots = traces.plots;
-      allPlots
-        .filter((trace) => trace.data.type === 'scattergl')
-        .forEach((p) => {
-          const temp = [];
-
-          if (selectedList.length > 0) {
-            selectedList.forEach((selectedId) => {
-              temp.push(p.data.ids.indexOf(selectedId));
-            });
-          } else if (config.color && selectedList.length === 0) {
-            temp.push(...Array.from({ length: p.data.ids.length }, (_, i) => i));
-          }
+  const layout = useLayout({
+    scatter,
+    facet,
+    splom,
+    subplots,
+    regressions,
+    config,
+    width,
+    height,
+    internalLayoutRef,
+  });
 
-          p.data.selectedpoints = temp;
-          // @ts-ignore
-          if (p.data?.selected?.textfont) {
-            if (selectedList.length === 0 && config.showLabels === ELabelingOptions.SELECTED) {
-              // @ts-ignore
-              p.data.selected.textfont.color = `rgba(102, 102, 102, 0)`;
-            } else if (selectedList.length === 0 && config.showLabels === ELabelingOptions.ALWAYS) {
-              // @ts-ignore
-              p.data.selected.textfont.color = `rgba(102, 102, 102, ${config.alphaSliderVal})`;
-            } else {
-              // @ts-ignore
-              p.data.selected.textfont.color = `rgba(102, 102, 102, 1)`;
-            }
-          }
+  const legendData = React.useMemo(() => {
+    if (!value) {
+      return undefined;
+    }
 
-          if (selectedList.length === 0 && config.color) {
-            // @ts-ignore
-            p.data.selected.marker.opacity = config.alphaSliderVal;
+    /* const legendPlots: PlotlyTypes.Data[] = [];
+
+    if (value.shapeColumn) {
+      legendPlots.push({
+        x: [null],
+        y: [null],
+        type: 'scatter',
+        mode: 'markers',
+        showlegend: true,
+        legendgroup: 'shape',
+        hoverinfo: 'all',
+
+        hoverlabel: {
+          namelength: 10,
+          bgcolor: 'black',
+          align: 'left',
+          bordercolor: 'black',
+        },
+        // @ts-ignore
+        legendgrouptitle: {
+          text: truncateText(value.shapeColumn.info.name, true, 20),
+        },
+        marker: {
+          line: {
+            width: 0,
+          },
+          symbol: value.shapeColumn ? value.shapeColumn.resolvedValues.map((v) => shapeScale(v.val as string)) : 'circle',
+          color: VIS_NEUTRAL_COLOR,
+        },
+        transforms: [
+          {
+            type: 'groupby',
+            groups: value.shapeColumn.resolvedValues.map((v) => getLabelOrUnknown(v.val)),
+            styles: [
+              ...[...new Set<string>(value.shapeColumn.resolvedValues.map((v) => getLabelOrUnknown(v.val)))].map((c) => {
+                return { target: c, value: { name: c } };
+              }),
+            ],
+          },
+        ],
+      });
+    }
+*/
+    if (value.colorColumn && value.colorColumn.type === EColumnTypes.CATEGORICAL) {
+      // Get distinct values
+      const colorValues = uniq(value.colorColumn.resolvedValues.map((v) => v.val ?? 'Unknown') as string[]);
+      const valuesWithoutUnknown = colorValues.filter((v) => v !== 'Unknown');
+      const mapping: Record<string, string> = {};
+
+      // Just return the domain when we got a domain from outside
+      if (value.colorColumn.color) {
+        colorValues.forEach((v) => {
+          const mapped = value.colorColumn.color?.[v];
+          if (mapped) {
+            mapping[v] = mapped;
           } else {
-            // @ts-ignore
-            p.data.selected.marker.opacity = 1;
+            mapping[v] = VIS_NEUTRAL_COLOR;
           }
         });
+      } else {
+        // Create d3 color scale
+        valuesWithoutUnknown.forEach((v, i) => {
+          mapping[v] = categoricalColors[i % categoricalColors.length]!;
+        });
+        mapping.Unknown = VIS_NEUTRAL_COLOR;
+      }
 
-      return allPlots;
-    }
+      // Sort the colorMap by the order of the domain
+      const categories = Object.keys(mapping);
+      categories.sort((a, b) => {
+        // Unknown should always be last, else alphabetically
+        if (a === 'Unknown') {
+          return 1;
+        }
 
-    return [];
-  }, [traces, selectedList, config.color, config.showLabels, config.alphaSliderVal]);
+        if (b === 'Unknown') {
+          return -1;
+        }
 
-  const plotlyData = useMemo(() => {
-    let data = [];
-    if (plotsWithSelectedPoints) {
-      data = [...plotsWithSelectedPoints.map((p) => p.data)];
-    }
-    if (traces) {
-      data = [...data, ...traces.legendPlots.map((p) => p.data)];
+        return a.localeCompare(b);
+      });
+
+      // Otherwise infer the domain from the resolved values
+      return {
+        color: {
+          categories,
+          mapping,
+          mappingFunction: (v: string | number) => mapping[v] || VIS_NEUTRAL_COLOR,
+        },
+      };
     }
+    // Sequential color scale
+    if (value.colorColumn && value.colorColumn.type === EColumnTypes.NUMERICAL) {
+      const numericalColorScale = d3v7
+        .scaleLinear<string, number>()
+        .domain([value.colorDomain[0], (value.colorDomain[0] + value.colorDomain[1]) / 2, value.colorDomain[1]])
+        .range(
+          config?.numColorScaleType === ENumericalColorScaleType.SEQUENTIAL
+            ? ([getCssValue('visyn-s1-blue'), getCssValue('visyn-s5-blue'), getCssValue('visyn-s9-blue')] as string[])
+            : ([getCssValue('visyn-c1'), '#d3d3d3', getCssValue('visyn-c2')] as string[]),
+        );
 
-    return data.map((d) => {
-      const textIndices = !config.showLabelLimit ? (d.selectedpoints ?? []) : (d.selectedpoints ?? []).slice(0, config.showLabelLimit);
-      const text = config.showLabels === ELabelingOptions.ALWAYS ? d.text : isSelecting ? '' : (d.text ?? []).map((t, i) => (textIndices.includes(i) ? t : ''));
+      return {
+        color: {
+          categories: [],
+          mappingFunction: ((v: string | number) => {
+            if (v === undefined || v === 'undefined' || v === null || v === 'null' || v === '') {
+              return VIS_NEUTRAL_COLOR;
+            }
 
-      return { ...d, text };
-    });
-  }, [config.showLabelLimit, config.showLabels, isSelecting, plotsWithSelectedPoints, traces]);
+            return numericalColorScale(v as number);
+          }) as (v: string | number) => string,
+        },
+      };
+    }
 
-  useShallowEffect(() => {
-    setConfig({ ...config, selectedPointsCount: selectedList.length });
-  }, [selectedList, setConfig]);
+    return undefined;
+  }, [config?.numColorScaleType, value]);
+
+  const data = useData({
+    status,
+    value,
+    scatter,
+    config,
+    facet,
+    splom,
+    selectedList,
+    subplots,
+    shapeScale,
+    mappingFunction: legendData?.color.mappingFunction,
+  });
 
   return (
-    <Stack gap={0} style={{ height: '100%', width: '100%' }} pos="relative">
+    <div
+      className={css`
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: grid;
+        grid-template-areas:
+          'toolbar corner'
+          'plot legend';
+        grid-template-rows: auto 1fr;
+        grid-template-columns: 1fr fit-content(200px);
+        grid-row-gap: 0.5rem;
+      `}
+      id={id}
+    >
       {showDragModeOptions || showDownloadScreenshot ? (
         <Center>
           <Group>
             {showDragModeOptions ? (
               <BrushOptionButtons callback={(dragMode: EScatterSelectSettings) => setConfig({ ...config, dragMode })} dragMode={config.dragMode} />
             ) : null}
-            {showDownloadScreenshot && plotsWithSelectedPoints.length > 0 ? <DownloadPlotButton uniquePlotId={id} config={config} /> : null}
+            {showDownloadScreenshot && layout ? <DownloadPlotButton uniquePlotId={id} config={config} /> : null}
           </Group>
         </Center>
       ) : null}
-      {traceStatus === 'success' && plotsWithSelectedPoints.length > 0 ? (
-        <>
-          {config.showLegend === undefined ? (
-            <Tooltip label="Toggle legend" refProp="rootRef">
-              <Switch
-                styles={{ label: { paddingLeft: '5px' } }}
-                size="xs"
-                disabled={traces.legendPlots.length === 0}
-                style={{ position: 'absolute', right: 42, top: 18, zIndex: 99 }}
-                defaultChecked
-                label="Legend"
-                onChange={() => setShowLegend(!showLegend)}
-                checked={showLegend}
-              />
-            </Tooltip>
-          ) : null}
+
+      {status === 'success' && layout && config?.showLegend === undefined ? (
+        <div style={{ gridArea: 'corner', display: 'flex', justifyContent: 'flex-end', alignItems: 'center', height: 40 }}>
+          <Tooltip label="Toggle legend" refProp="rootRef">
+            <Switch
+              styles={{ label: { paddingLeft: '5px' } }}
+              size="xs"
+              disabled={legendData === undefined}
+              style={{ position: 'absolute', right: 52, top: 18, zIndex: 99 }}
+              defaultChecked
+              label="Legend"
+              onChange={() => {
+                setShowLegend(!showLegend);
+                // TODO: resize
+              }}
+              checked={showLegend}
+              data-testid="ToggleLegend"
+            />
+          </Tooltip>
+        </div>
+      ) : null}
+
+      <div ref={ref} style={{ gridArea: 'plot', overflow: 'hidden' }}>
+        {status === 'success' && layout ? (
           <PlotlyComponent
             data-testid="ScatterPlotTestId"
             key={id}
             divId={id}
-            data={plotlyData}
-            layout={{
-              ...layout,
-              shapes: [...(layout?.shapes || []), ...regression.shapes],
-              annotations,
+            data={data}
+            layout={layout}
+            useResizeHandler
+            style={{
+              width,
+              height,
             }}
-            onHover={(event) => {
-              // If we have subplots we set the stats for the current subplot on hover
-              // It is up to the application to decide how to display the stats
-              if (config.regressionLineOptions?.type && config.regressionLineOptions.type !== ERegressionLineType.NONE && regression.results.length > 1) {
-                let result: IRegressionResult = null;
-                if (regression.results.length > 0) {
-                  const xAxis = event.points[0].yaxis.anchor;
-                  const yAxis = event.points[0].xaxis.anchor;
-                  result = regression.results.find((r) => r.xref === xAxis && r.yref === yAxis) || null;
-                }
-                statsCallback(result?.stats);
-              }
+            onUpdate={(figure) => {
+              internalLayoutRef.current = cloneDeep(figure.layout);
             }}
-            onUnhover={() => {
-              // If we have subplots we clear the current stats when the mouse leaves the plot
-              if (config.regressionLineOptions?.type && config.regressionLineOptions.type !== ERegressionLineType.NONE && regression.results.length > 1) {
-                statsCallback(null);
-              }
+            onDeselect={() => {
+              selectionCallback([]);
             }}
-            config={{ responsive: true, displayModeBar: false, scrollZoom }}
-            useResizeHandler
-            style={{ width: '100%', height: '100%' }}
-            onClick={(event) => {
-              // @ts-ignore
-              if (event.points[0]?.binNumber !== undefined) {
-                // @ts-ignore
-                const selInidices = event.points?.map((d) => d?.pointIndices).flat(1);
-                const indices = event.points[0]?.data?.customdata?.filter((_, i) => selInidices.includes(i)) as string[];
-                selectionCallback(indices);
-              } else {
-                const clickedId = (event.points[0] as any).id;
-                if (selectedMap[clickedId]) {
-                  selectionCallback(selectedList.filter((s) => s !== clickedId));
-                } else {
-                  selectionCallback([...selectedList, clickedId]);
+            // @ts-ignore
+            onBeforeHover={(evnt) => {
+              // Finds the hovered subplot and calls the statscallback with the stats of the regression line
+              if ('target' in evnt) {
+                const target = evnt.target as HTMLElement;
+                const subplot = target.getAttribute('data-subplot');
+
+                if (subplot) {
+                  const idx = subplot.indexOf('y');
+                  const xref = subplot.slice(0, idx);
+                  const yref = subplot.slice(idx);
+
+                  const regressionResult = regressions.results.find((r) => r.xref === xref && r.yref === yref);
+
+                  if (regressionResult) {
+                    statsCallback(regressionResult.stats);
+                  }
                 }
               }
             }}
-            onLegendClick={() => false}
-            onDoubleClick={() => {
-              selectionCallback([]);
-            }}
-            onInitialized={() => {
-              d3.select(id).selectAll('.legend').selectAll('.traces').style('opacity', 1);
-            }}
-            onUpdate={() => {
-              d3.select(id).selectAll('.legend').selectAll('.traces').style('opacity', 1);
-              window.addEventListener('keydown', (event) => {
-                if (event.key === 'Shift') {
-                  setIsShiftPressed(true);
+            onSelected={(event) => {
+              if (event && event.points.length > 0 && event.points[0]) {
+                const mergeIntoSelection = (ids: string[]) => {
+                  if (shiftPressed) {
+                    selectionCallback(Array.from(new Set([...selectedList, ...ids])));
+                  } else {
+                    selectionCallback(ids);
+                  }
+                };
+
+                if (subplots) {
+                  const ids = event.points.map((point) => subplots.ids[point.pointIndex]) as string[];
+                  mergeIntoSelection(ids);
                 }
-              });
-              window.addEventListener('keyup', (event) => {
-                if (event.key === 'Shift') {
-                  setIsShiftPressed(false);
+
+                if (scatter) {
+                  const ids = event.points.map((point) => scatter.ids[point.pointIndex]) as string[];
+                  mergeIntoSelection(ids);
                 }
-              });
-            }}
-            onSelecting={() => {
-              setIsSelecting(true);
-            }}
-            onSelected={(sel) => {
-              if (sel) {
-                let indices = [];
-                // @ts-ignore
-                if (sel.points[0]?.binNumber !== undefined) {
-                  // @ts-ignore
-                  const selInidices = sel.points?.map((d) => d?.pointIndices).flat(1);
-                  indices = sel.points[0]?.data?.customdata?.filter((_, i) => selInidices.includes(i)) as string[];
-                } else {
-                  indices = sel.points?.map((d) => (d as any).id);
+
+                if (splom) {
+                  const ids = event.points.map((point) => splom.ids[point.pointIndex]) as string[];
+                  mergeIntoSelection(ids);
+                }
+
+                if (facet) {
+                  // Get xref and yref of selecting plot
+                  const { xaxis, yaxis } = event.points[0].data;
+
+                  // Find group
+                  const group = facet.resultData.find((g) => g.xref === xaxis && g.yref === yaxis);
+
+                  if (group) {
+                    const ids = event.points.map((point) => group.data.ids[point.pointIndex]) as string[];
+                    mergeIntoSelection(ids);
+                  }
                 }
-                const selected = Array.from(new Set(isShiftPressed ? [...selectedList, ...indices] : indices));
-                selectionCallback(selected);
-                setIsSelecting(false);
-                setConfig({ ...config, selectedPointsCount: selected.length });
               }
             }}
+            config={{ scrollZoom, displayModeBar: false }}
           />
-        </>
-      ) : traceStatus !== 'pending' && traceStatus !== 'idle' ? (
-        <InvalidCols headerMessage={traces?.errorMessageHeader} bodyMessage={traceError?.message || traces?.errorMessage} />
+        ) : status !== 'idle' && status !== 'pending' ? (
+          <InvalidCols
+            style={{
+              gridArea: 'plot',
+            }}
+            headerMessage={i18n.t('visyn:vis.errorHeader')}
+            bodyMessage={error?.message || i18n.t('visyn:vis.scatterError')}
+          />
+        ) : null}
+      </div>
+
+      {status === 'success' && layout && legendData?.color.mapping && showLegend ? (
+        <div style={{ gridArea: 'legend', overflow: 'hidden' }}>
+          <Legend categories={legendData.color.categories} colorMap={legendData.color.mappingFunction} onClick={() => {}} />
+        </div>
       ) : null}
-    </Stack>
+    </div>
   );
 }
diff --git a/src/vis/scatter/index.ts b/src/vis/scatter/index.ts
index 3b43eb36e..04bca77e0 100644
--- a/src/vis/scatter/index.ts
+++ b/src/vis/scatter/index.ts
@@ -1,2 +1 @@
-export * from './ScatterVis';
 export * from './utils';
diff --git a/src/vis/scatter/interfaces.ts b/src/vis/scatter/interfaces.ts
index c3613ab0b..03d976285 100644
--- a/src/vis/scatter/interfaces.ts
+++ b/src/vis/scatter/interfaces.ts
@@ -2,7 +2,12 @@ import { BaseVisConfig, ColumnInfo, ENumericalColorScaleType, EScatterSelectSett
 
 export interface IScatterConfig extends BaseVisConfig {
   type: ESupportedPlotlyVis.SCATTER;
+  // Numerical columns selected for x and y axis. If 2 are selected, a normal scatter plot is shown. If more than 2 are selected, a SPLOM is shown.
   numColumnsSelected: ColumnInfo[];
+  // This attribute splits the data into multiple scatter plots based on the selected column.
+  facets: ColumnInfo | null;
+  // This attribute can be used to directly control which subplots should be shown.
+  subplots: { xColumn: ColumnInfo; yColumn: ColumnInfo; title: string }[] | undefined;
   color: ColumnInfo | null;
   numColorScaleType: ENumericalColorScaleType;
   shape: ColumnInfo | null;
@@ -11,7 +16,6 @@ export interface IScatterConfig extends BaseVisConfig {
   sizeSliderVal: number;
   showLabels: ELabelingOptions;
   showLabelLimit?: number;
-  facets: ColumnInfo | null;
   regressionLineOptions?: IRegressionLineOptions;
   showLegend?: boolean;
   labelColumns?: ColumnInfo[];
diff --git a/src/vis/scatter/useData.tsx b/src/vis/scatter/useData.tsx
new file mode 100644
index 000000000..2b0d44a3a
--- /dev/null
+++ b/src/vis/scatter/useData.tsx
@@ -0,0 +1,237 @@
+import * as React from 'react';
+import isEmpty from 'lodash/isEmpty';
+import d3v7 from 'd3v7';
+import { PlotlyTypes } from '../../plotly';
+import { VIS_NEUTRAL_COLOR } from '../general/constants';
+import { EColumnTypes } from '../interfaces';
+import { ELabelingOptions, IInternalScatterConfig } from './interfaces';
+import { FetchColumnDataResult } from './utils';
+import { getLabelOrUnknown } from '../general/utils';
+import { columnNameWithDescription, truncateText } from '../general/layoutUtils';
+import { useDataPreparation } from './useDataPreparation';
+import { selectionColorDark } from '../../utils/colors';
+
+export function baseData(alpha: number, hasColor: boolean): Partial<PlotlyTypes.Data> {
+  return {
+    selected: {
+      textfont: {
+        color: VIS_NEUTRAL_COLOR,
+      },
+      marker: {
+        opacity: 1,
+        ...(!hasColor ? { color: selectionColorDark } : {}),
+      },
+    },
+    unselected: {
+      textfont: {
+        color: VIS_NEUTRAL_COLOR,
+      },
+      marker: {
+        color: VIS_NEUTRAL_COLOR,
+        opacity: Math.min(alpha, 0.2),
+      },
+    },
+  };
+}
+
+export const textPositionOptions = ['top center', 'bottom center'];
+
+export const BASE_DATA: Partial<PlotlyTypes.Data> = {
+  showlegend: false,
+  hoverinfo: 'x+y+text',
+};
+
+export function useData({
+  status,
+  value,
+  scatter,
+  config,
+  facet,
+  splom,
+  subplots,
+  selectedList,
+  shapeScale,
+  mappingFunction,
+}: {
+  status: string;
+  value: FetchColumnDataResult | undefined;
+  scatter?: ReturnType<typeof useDataPreparation>['scatter'];
+  config: IInternalScatterConfig;
+  facet?: ReturnType<typeof useDataPreparation>['facet'];
+  splom?: ReturnType<typeof useDataPreparation>['splom'];
+  subplots?: ReturnType<typeof useDataPreparation>['subplots'];
+  selectedList: string[];
+  shapeScale: (val: string) => string;
+  mappingFunction?: (val: string | number) => string;
+}) {
+  return React.useMemo<PlotlyTypes.Data[]>(() => {
+    if (status !== 'success' || !value) {
+      return [];
+    }
+
+    if (subplots) {
+      const plots = subplots.xyPairs.map((pair) => {
+        return {
+          ...BASE_DATA,
+          type: 'scattergl',
+          x: pair.x,
+          y: pair.y,
+          xaxis: pair.xref,
+          yaxis: pair.yref,
+          textposition: subplots.text.map((_, i) => textPositionOptions[i % textPositionOptions.length]),
+          ...(isEmpty(selectedList) ? {} : { selectedpoints: selectedList.map((idx) => subplots.idToIndex.get(idx)) }),
+          mode: config.showLabels === ELabelingOptions.NEVER ? 'markers' : 'text+markers',
+          ...(config.showLabels === ELabelingOptions.NEVER
+            ? {}
+            : config.showLabels === ELabelingOptions.ALWAYS
+              ? {
+                  text: subplots.text.map((t) => truncateText(value.idToLabelMapper(t), true, 10)),
+                }
+              : {
+                  text: subplots.text.map((t, i) => (selectedList.includes(subplots.ids[i] ?? '') ? truncateText(value.idToLabelMapper(t), true, 10) : '')),
+                }),
+          hovertext: subplots.ids.map((p_id, index) =>
+            `${value.idToLabelMapper(p_id)}
+            ${(value.resolvedLabelColumnsWithMappedValues ?? []).map((l) => `<br />${columnNameWithDescription(l.info)}: ${getLabelOrUnknown(l.mappedValues.get(p_id))}`)}
+            ${value.colorColumn ? `<br />${columnNameWithDescription(value.colorColumn.info)}: ${getLabelOrUnknown(value.colorColumn.resolvedValues[index].val)}` : ''}
+            ${value.shapeColumn && value.shapeColumn.info.id !== value.colorColumn?.info.id ? `<br />${columnNameWithDescription(value.shapeColumn.info)}: ${getLabelOrUnknown(value.shapeColumn.resolvedValues[index].val)}` : ''}`.trim(),
+          ),
+          marker: {
+            color: value.colorColumn && mappingFunction ? value.colorColumn.resolvedValues.map((v) => mappingFunction(v.val)) : VIS_NEUTRAL_COLOR,
+            symbol: value.shapeColumn ? value.shapeColumn.resolvedValues.map((v) => shapeScale(v.val as string)) : 'circle',
+            opacity: config.alphaSliderVal,
+          },
+          ...baseData(config.alphaSliderVal, !!value.colorColumn),
+        } as PlotlyTypes.Data;
+      });
+
+      return plots;
+    }
+
+    if (scatter && config && value && value.validColumns[0]) {
+      const traces = [
+        {
+          ...BASE_DATA,
+          type: 'scattergl',
+          x: scatter.plotlyData.x,
+          y: scatter.plotlyData.y,
+          // text: scatter.plotlyData.text,
+          textposition: scatter.plotlyData.text.map((_, i) => textPositionOptions[i % textPositionOptions.length]),
+          ...(isEmpty(selectedList) ? {} : { selectedpoints: selectedList.map((idx) => scatter.idToIndex.get(idx)) }),
+          mode: config.showLabels === ELabelingOptions.NEVER ? 'markers' : 'text+markers',
+          ...(config.showLabels === ELabelingOptions.NEVER
+            ? {}
+            : config.showLabels === ELabelingOptions.ALWAYS
+              ? {
+                  text: scatter.plotlyData.text.map((t) => truncateText(value.idToLabelMapper(t), true, 10)),
+                  // textposition: 'top center',
+                }
+              : {
+                  text: scatter.plotlyData.text.map((t, i) =>
+                    selectedList.includes(scatter.ids[i] ?? '') ? truncateText(value.idToLabelMapper(t), true, 10) : '',
+                  ),
+                  // textposition: 'top center',
+                }),
+          hovertext: value.validColumns[0].resolvedValues.map((v, i) =>
+            `${value.idToLabelMapper(v.id)}
+  ${(value.resolvedLabelColumns ?? []).map((l) => `<br />${columnNameWithDescription(l.info)}: ${getLabelOrUnknown(l.resolvedValues[i].val)}`)}
+  ${value.colorColumn ? `<br />${columnNameWithDescription(value.colorColumn.info)}: ${getLabelOrUnknown(value.colorColumn.resolvedValues[i].val)}` : ''}
+  ${value.shapeColumn && value.shapeColumn.info.id !== value.colorColumn?.info.id ? `<br />${columnNameWithDescription(value.shapeColumn.info)}: ${getLabelOrUnknown(value.shapeColumn.resolvedValues[i].val)}` : ''}`.trim(),
+          ),
+          marker: {
+            textfont: {
+              color: VIS_NEUTRAL_COLOR,
+            },
+            color: value.colorColumn && mappingFunction ? value.colorColumn.resolvedValues.map((v) => mappingFunction(v.val)) : VIS_NEUTRAL_COLOR,
+            symbol: value.shapeColumn ? value.shapeColumn.resolvedValues.map((v) => shapeScale(v.val as string)) : 'circle',
+            opacity: config.alphaSliderVal,
+          },
+          ...baseData(config.alphaSliderVal, !!value.colorColumn),
+        } as PlotlyTypes.Data,
+      ];
+
+      return traces;
+    }
+
+    if (facet && config && value && value.validColumns[0] && value.validColumns[1]) {
+      const plots = facet.resultData.map((group) => {
+        return {
+          ...BASE_DATA,
+          type: 'scattergl',
+          x: group.data.x,
+          y: group.data.y,
+          xaxis: group.xref,
+          yaxis: group.yref,
+          mode: config.showLabels === ELabelingOptions.NEVER ? 'markers' : 'text+markers',
+          textposition: group.data.text.map((_, i) => textPositionOptions[i % textPositionOptions.length]),
+          ...(config.showLabels === ELabelingOptions.NEVER
+            ? {}
+            : config.showLabels === ELabelingOptions.ALWAYS
+              ? {
+                  text: group.data.text.map((t) => truncateText(value.idToLabelMapper(t), true, 10)),
+                  // textposition: 'top center',
+                }
+              : {
+                  text: group.data.text.map((t, i) => (selectedList.includes(group.data.ids[i]!) ? truncateText(value.idToLabelMapper(t), true, 10) : '')),
+                  // textposition: 'top center',
+                }),
+          name: getLabelOrUnknown(group.data.facet),
+          ...(isEmpty(selectedList) ? {} : { selectedpoints: selectedList.map((idx) => group.idToIndex.get(idx)).filter((v) => v !== undefined) }),
+          hovertext: group.data.ids.map((p_id, index) =>
+            `${value.idToLabelMapper(p_id)}
+            ${(value.resolvedLabelColumnsWithMappedValues ?? []).map((l) => `<br />${columnNameWithDescription(l.info)}: ${getLabelOrUnknown(l.mappedValues.get(p_id))}`)}
+            ${value.colorColumn ? `<br />${columnNameWithDescription(value.colorColumn.info)}: ${getLabelOrUnknown(group.data.color[index])}` : ''}
+            ${value.shapeColumn && value.shapeColumn.info.id !== value.colorColumn?.info.id ? `<br />${columnNameWithDescription(value.shapeColumn.info)}: ${getLabelOrUnknown(group.data.shape[index])}` : ''}`.trim(),
+          ),
+          marker: {
+            color: value.colorColumn && mappingFunction ? group.data.color.map((v) => mappingFunction(v!)) : VIS_NEUTRAL_COLOR,
+            symbol: value.shapeColumn ? group.data.shape.map((shape) => shapeScale(shape as string)) : 'circle',
+            opacity: config.alphaSliderVal,
+          },
+          ...baseData(config.alphaSliderVal, !!value.colorColumn),
+        } as PlotlyTypes.Data;
+      });
+
+      return plots;
+    }
+
+    if (splom) {
+      // SPLOM case
+      const plotlyDimensions = value.validColumns.map((col) => ({
+        label: col.info.name,
+        values: col.resolvedValues.map((v) => v.val),
+      }));
+
+      const traces = [
+        {
+          ...BASE_DATA,
+          type: 'splom',
+          // @ts-ignore
+          diagonal: {
+            visible: false,
+          },
+          showupperhalf: false,
+          // @ts-ignore
+          dimensions: plotlyDimensions,
+          hovertext: value.validColumns[0].resolvedValues.map((v, i) =>
+            `${value.idToLabelMapper(v.id)}
+  ${(value.resolvedLabelColumns ?? []).map((l) => `<br />${columnNameWithDescription(l.info)}: ${getLabelOrUnknown(l.resolvedValues[i].val)}`)}
+  ${value.colorColumn ? `<br />${columnNameWithDescription(value.colorColumn.info)}: ${getLabelOrUnknown(value.colorColumn.resolvedValues[i].val)}` : ''}
+  ${value.shapeColumn && value.shapeColumn.info.id !== value.colorColumn?.info.id ? `<br />${columnNameWithDescription(value.shapeColumn.info)}: ${getLabelOrUnknown(value.shapeColumn.resolvedValues[i].val)}` : ''}`.trim(),
+          ),
+          ...(isEmpty(selectedList) ? {} : { selectedpoints: selectedList.map((idx) => splom.idToIndex.get(idx)) }),
+          marker: {
+            color: value.colorColumn && mappingFunction ? value.colorColumn.resolvedValues.map((v) => mappingFunction(v.val)) : VIS_NEUTRAL_COLOR,
+            symbol: value.shapeColumn ? value.shapeColumn.resolvedValues.map((v) => shapeScale(v.val as string)) : 'circle',
+            opacity: config.alphaSliderVal,
+          },
+          ...baseData(config.alphaSliderVal, !!value.colorColumn),
+        } as PlotlyTypes.Data,
+      ];
+
+      return traces;
+    }
+
+    return [];
+  }, [status, value, subplots, scatter, config, facet, splom, selectedList, shapeScale, mappingFunction]);
+}
diff --git a/src/vis/scatter/useDataPreparation.ts b/src/vis/scatter/useDataPreparation.ts
new file mode 100644
index 000000000..33c6eb918
--- /dev/null
+++ b/src/vis/scatter/useDataPreparation.ts
@@ -0,0 +1,267 @@
+import * as React from 'react';
+import * as d3v7 from 'd3v7';
+import sortBy from 'lodash/sortBy';
+import groupBy from 'lodash/groupBy';
+import isFinite from 'lodash/isFinite';
+import { FetchColumnDataResult } from './utils';
+import { columnNameWithDescription } from '../general/layoutUtils';
+import { PlotlyTypes } from '../../plotly';
+import { getCssValue } from '../../utils/getCssValue';
+import { EColumnTypes, ENumericalColorScaleType } from '../interfaces';
+
+function getStretchedDomains(x: number[], y: number[]) {
+  let xDomain = d3v7.extent(x);
+  let yDomain = d3v7.extent(y);
+
+  if (xDomain[0] !== undefined && xDomain[1] !== undefined && yDomain[0] !== undefined && yDomain[1] !== undefined) {
+    const xStretch = xDomain[1] - xDomain[0];
+    const yStretch = yDomain[1] - yDomain[0];
+
+    xDomain = [xDomain[0] - xStretch * 0.1, xDomain[1] + xStretch * 0.1];
+    yDomain = [yDomain[0] - yStretch * 0.1, yDomain[1] + yStretch * 0.1];
+  }
+
+  return { xDomain, yDomain };
+}
+
+export function useDataPreparation({
+  status,
+  value,
+  uniqueSymbols,
+  numColorScaleType,
+}: {
+  status: string;
+  value: FetchColumnDataResult;
+  uniqueSymbols: string[];
+  numColorScaleType: ENumericalColorScaleType;
+}) {
+  const subplots = React.useMemo(() => {
+    if (!(status === 'success' && value.subplots && value.subplots.length > 0 && value.subplots[0])) {
+      return undefined;
+    }
+
+    const ids = value.subplots[0].xColumn.resolvedValues.map((v) => v.id);
+    const idToIndex = new Map<string, number>();
+    ids.forEach((v, i) => {
+      idToIndex.set(v, i);
+    });
+
+    const xyPairs = value.subplots.map((subplot, index) => {
+      const x = subplot.xColumn.resolvedValues.map((v) => v.val as number);
+      const y = subplot.yColumn.resolvedValues.map((v) => v.val as number);
+
+      const validIndices = x.map((_, i) => (isFinite(x[i]) && isFinite(y[i]) ? i : null)).filter((i) => i !== null) as number[];
+
+      const { xDomain, yDomain } = getStretchedDomains(x, y);
+
+      return {
+        x,
+        y,
+        xDomain,
+        yDomain,
+        xTitle: columnNameWithDescription(subplot.xColumn.info),
+        yTitle: columnNameWithDescription(subplot.yColumn.info),
+        validIndices,
+        title: subplot.title,
+        xref: `x${index > 0 ? index + 1 : ''}` as PlotlyTypes.XAxisName,
+        yref: `y${index > 0 ? index + 1 : ''}` as PlotlyTypes.YAxisName,
+      };
+    });
+
+    return { xyPairs, ids, text: ids, idToIndex };
+  }, [status, value]);
+
+  // Case when we have just a scatterplot
+  const scatter = React.useMemo(() => {
+    if (!(status === 'success' && value && value.validColumns.length === 2 && value.validColumns[0] && value.validColumns[1] && !value.facetColumn)) {
+      return undefined;
+    }
+
+    // Get shared range for all plots
+    const { xDomain, yDomain } = getStretchedDomains(
+      value.validColumns[0].resolvedValues.map((v) => v.val as number),
+      value.validColumns[1].resolvedValues.map((v) => v.val as number),
+    );
+
+    const ids = value.validColumns[0].resolvedValues.map((v) => v.id);
+
+    const idToIndex = new Map<string, number>();
+    ids.forEach((v, i) => {
+      idToIndex.set(v, i);
+    });
+
+    const x = value.validColumns[0].resolvedValues.map((v) => v.val as number);
+    const y = value.validColumns[1].resolvedValues.map((v) => v.val as number);
+
+    return {
+      plotlyData: {
+        validIndices: x.map((_, i) => (isFinite(x[i]) && isFinite(y[i]) ? i : null)).filter((i) => i !== null) as number[],
+        x,
+        y,
+        text: value.validColumns[0].resolvedValues.map((v) => v.id),
+      },
+      ids,
+      xDomain,
+      yDomain,
+      xLabel: columnNameWithDescription(value.validColumns[0].info),
+      yLabel: columnNameWithDescription(value.validColumns[1].info),
+      idToIndex,
+    };
+  }, [status, value]);
+
+  // Case when we have a scatterplot matrix
+  const splom = React.useMemo(() => {
+    if (!(status === 'success' && value && value.validColumns.length > 2 && value.validColumns[0] && value.validColumns[1])) {
+      return undefined;
+    }
+
+    const plotlyDimensions = value.validColumns.map((col) => ({
+      label: col.info.name,
+      values: col.resolvedValues.map((v) => v.val),
+    }));
+
+    // Split up data to xy plot pairs (for regression and subplots)
+    const xyPairs: { data: { x: number[]; y: number[]; validIndices: number[] }; xref: PlotlyTypes.XAxisName; yref: PlotlyTypes.YAxisName }[] = [];
+
+    for (let r = 0; r < value.validColumns.length; r++) {
+      for (let c = 0; c < value.validColumns.length; c++) {
+        // Only create lower triangular matrix
+        if (r <= c) {
+          continue;
+        }
+
+        const x = value.validColumns[c].resolvedValues.map((v) => v.val as number);
+        const y = value.validColumns[r].resolvedValues.map((v) => v.val as number);
+
+        xyPairs.push({
+          data: {
+            validIndices: x.map((_, i) => (isFinite(x[i]) && isFinite(y[i]) ? i : null)).filter((i) => i !== null) as number[],
+            x,
+            y,
+          },
+          xref: `x${c > 0 ? c + 1 : ''}` as PlotlyTypes.XAxisName,
+          yref: `y${r > 0 ? r + 1 : ''}` as PlotlyTypes.YAxisName,
+        });
+      }
+    }
+
+    const ids = value.validColumns[0].resolvedValues.map((v) => v.id);
+    const idToIndex = new Map<string, number>();
+    ids.forEach((v, i) => {
+      idToIndex.set(v, i);
+    });
+
+    return {
+      dimensions: plotlyDimensions,
+      idToIndex,
+      xyPairs,
+      ids,
+      text: value.validColumns[0].resolvedValues.map((v) => v.id),
+    };
+  }, [status, value]);
+
+  // Case when we have faceting
+  const facet = React.useMemo(() => {
+    if (!(status === 'success' && value && value.facetColumn && value.validColumns.length === 2 && value.validColumns[0] && value.validColumns[1])) {
+      return undefined;
+    }
+
+    const plotlyData = value.validColumns[0].resolvedValues.map((v, i) => ({
+      x: v.val,
+      y: value.validColumns[1].resolvedValues[i].val,
+      ids: v.id?.toString(),
+      facet: value.facetColumn.resolvedValues[i].val?.toString(),
+      color: value.colorColumn ? value.colorColumn.resolvedValues[i].val : undefined,
+      shape: value.shapeColumn ? value.shapeColumn.resolvedValues[i].val : undefined,
+    }));
+
+    const sortOrder =
+      (value.facetColumn.domain as string[]) ||
+      [...new Set(value.facetColumn.resolvedValues.map((v) => v.val as string))].sort((a, b) => a?.localeCompare(b, undefined, { sensitivity: 'base' }));
+
+    const groupedData = sortBy(groupBy(plotlyData, 'facet'), (group) => {
+      const facetValue = group[0].facet;
+      const index = sortOrder.indexOf(facetValue);
+      return index !== -1 ? index : Infinity;
+    });
+
+    let xDomain: [number, number] | [undefined, undefined] = [0, 1];
+    let yDomain: [number, number] | [undefined, undefined] = [0, 1];
+
+    // Get shared range for all plots
+    xDomain = d3v7.extent(value.validColumns[0].resolvedValues.map((v) => v.val as number));
+    yDomain = d3v7.extent(value.validColumns[1].resolvedValues.map((v) => v.val as number));
+
+    if (xDomain[0] !== undefined && xDomain[1] !== undefined && yDomain[0] !== undefined && yDomain[1] !== undefined) {
+      const xStretch = xDomain[1] - xDomain[0];
+      const yStretch = yDomain[1] - yDomain[0];
+      console.log(xStretch, yStretch);
+
+      xDomain = [xDomain[0] - xStretch * 0.5, xDomain[1] + xStretch * 0.5];
+      yDomain = [yDomain[0] - yStretch * 0.5, yDomain[1] + yStretch * 0.5];
+    }
+
+    const resultData = groupedData.map((grouped, index) => {
+      const idToIndex = new Map<string, number>();
+      grouped.forEach((v, vi) => {
+        idToIndex.set(v.ids, vi);
+      });
+
+      const x = grouped.map((v) => v.x as number);
+      const y = grouped.map((v) => v.y as number);
+
+      return {
+        data: {
+          validIndices: x.map((_, i) => (isFinite(x[i]) && isFinite(y[i]) ? i : null)).filter((i) => i !== null) as number[],
+          x,
+          y,
+          text: grouped.map((v) => v.ids),
+          facet: grouped[0].facet,
+          ids: grouped.map((v) => v.ids),
+          color: grouped.map((v) => v.color),
+          shape: grouped.map((v) => v.shape),
+        },
+        idToIndex,
+        xref: `x${index > 0 ? index + 1 : ''}` as PlotlyTypes.XAxisName,
+        yref: `y${index > 0 ? index + 1 : ''}` as PlotlyTypes.YAxisName,
+      };
+    });
+
+    return {
+      resultData,
+      xTitle: columnNameWithDescription(value.validColumns[0].info),
+      yTitle: columnNameWithDescription(value.validColumns[1].info),
+      xDomain,
+      yDomain,
+      ids: value.validColumns[0].resolvedValues.map((v) => v.id),
+    };
+  }, [status, value]);
+
+  const scales = React.useMemo(() => {
+    if (!value) {
+      return {
+        color: undefined,
+        shape: undefined,
+      };
+    }
+
+    const shapeScale = value.shapeColumn
+      ? d3v7
+          .scaleOrdinal<string>()
+          .domain(value.shapeColumn.resolvedValues.map((v) => v.val as string))
+          .range(uniqueSymbols)
+      : null;
+
+    return {
+      shape: shapeScale,
+    };
+  }, [uniqueSymbols, value]);
+
+  return {
+    splom,
+    scatter,
+    facet,
+    subplots,
+    shapeScale: scales.shape,
+  };
+}
diff --git a/src/vis/scatter/useLayout.tsx b/src/vis/scatter/useLayout.tsx
new file mode 100644
index 000000000..0102f2ad8
--- /dev/null
+++ b/src/vis/scatter/useLayout.tsx
@@ -0,0 +1,330 @@
+import * as React from 'react';
+import clamp from 'lodash/clamp';
+import { PlotlyTypes } from '../../plotly';
+import { VIS_NEUTRAL_COLOR, VIS_TRACES_COLOR } from '../general/constants';
+import { IInternalScatterConfig } from './interfaces';
+import { getLabelOrUnknown } from '../general/utils';
+import { useDataPreparation } from './useDataPreparation';
+import { FastTextMeasure } from './FastTextMeasure';
+
+const textMeasure = new FastTextMeasure('12px Open Sans');
+
+export const AXIS_TICK_STYLES: Partial<PlotlyTypes.Layout['xaxis']> = {
+  tickfont: {
+    color: VIS_NEUTRAL_COLOR,
+  },
+  title: {
+    font: {
+      size: 12,
+      color: VIS_NEUTRAL_COLOR,
+    },
+  },
+  zeroline: false,
+};
+
+export const BASE_LAYOUT: Partial<PlotlyTypes.Layout> = {
+  hovermode: 'closest',
+  hoverlabel: {
+    align: 'left',
+  },
+  margin: { l: 50, r: 20, b: 50, t: 20, pad: 4 },
+};
+
+function gaps(width: number, height: number, nSubplots: number) {
+  let nColumns = clamp(Math.floor(width / 400), 2, 4);
+  if (nColumns > nSubplots) {
+    nColumns = nSubplots;
+  }
+  // round up to the number of rows required, otherwise, we get chart overlap
+  const nRows = Math.ceil(nSubplots / nColumns);
+
+  // "Hack" to calculate the correct yGap by translating absolute to relative plotly units
+  const requiredYGap = nRows * 50;
+  const yGap = requiredYGap / height;
+
+  const requiredXGap = nColumns * 50;
+  const xGap = requiredXGap / width;
+
+  return {
+    nColumns,
+    nRows,
+    xGap,
+    yGap,
+    xTitleSize: width / nColumns - 25,
+    yTitleSize: height / nRows - 25,
+  };
+}
+
+export function useLayout({
+  scatter,
+  facet,
+  splom,
+  subplots,
+  regressions,
+  config,
+  width,
+  height,
+  internalLayoutRef,
+}: {
+  scatter?: ReturnType<typeof useDataPreparation>['scatter'];
+  facet?: ReturnType<typeof useDataPreparation>['facet'];
+  splom?: ReturnType<typeof useDataPreparation>['splom'];
+  subplots?: ReturnType<typeof useDataPreparation>['subplots'];
+  regressions: { shapes: Partial<PlotlyTypes.Shape>[]; annotations: Partial<PlotlyTypes.Annotations>[] };
+  config: IInternalScatterConfig;
+  width: number;
+  height: number;
+  internalLayoutRef: React.MutableRefObject<Partial<PlotlyTypes.Layout>>;
+}) {
+  return React.useMemo<Partial<PlotlyTypes.Layout> | undefined>(() => {
+    if (subplots) {
+      const axes: Record<string, Partial<PlotlyTypes.LayoutAxis>> = {};
+      const titleAnnotations: Partial<PlotlyTypes.Annotations>[] = [];
+
+      const { nColumns, nRows, xGap, yGap, xTitleSize, yTitleSize } = gaps(width, height, subplots.xyPairs.length);
+
+      subplots.xyPairs.forEach((pair, plotCounter) => {
+        axes[`xaxis${plotCounter > 0 ? plotCounter + 1 : ''}`] = {
+          ...AXIS_TICK_STYLES,
+          range: pair.xDomain,
+          // Spread the previous layout to keep things like zoom
+          ...(internalLayoutRef.current?.[`xaxis${plotCounter > 0 ? plotCounter + 1 : ''}` as 'xaxis'] || {}),
+          title: {
+            text: textMeasure.textEllipsis(pair.xTitle, xTitleSize),
+            standoff: 0,
+            font: {
+              size: 12,
+              color: VIS_NEUTRAL_COLOR,
+            },
+          },
+        };
+        axes[`yaxis${plotCounter > 0 ? plotCounter + 1 : ''}`] = {
+          ...AXIS_TICK_STYLES,
+          range: pair.yDomain,
+          // Spread the previous layout to keep things like zoom
+          ...(internalLayoutRef.current?.[`yaxis${plotCounter > 0 ? plotCounter + 1 : ''}` as 'yaxis'] || {}),
+          title: {
+            font: {
+              size: 12,
+              color: VIS_NEUTRAL_COLOR,
+            },
+            text: textMeasure.textEllipsis(pair.yTitle, yTitleSize),
+          },
+        };
+
+        titleAnnotations.push({
+          x: 0.5,
+          y: 1,
+          yshift: -12,
+          xref: `x${plotCounter > 0 ? plotCounter + 1 : ''} domain` as PlotlyTypes.XAxisName,
+          yref: `y${plotCounter > 0 ? plotCounter + 1 : ''} domain` as PlotlyTypes.YAxisName,
+          xanchor: 'center',
+          yanchor: 'bottom',
+          text: pair.title,
+          showarrow: false,
+          bgcolor: '#ffffff',
+          font: {
+            size: 12,
+            color: VIS_TRACES_COLOR,
+          },
+        });
+      });
+
+      // if we only find one facet (e.g., the categorical column only contains one value), we don't facet
+      const finalLayout: Partial<PlotlyTypes.Layout> =
+        subplots.xyPairs.length > 1
+          ? {
+              ...BASE_LAYOUT,
+              ...(internalLayoutRef.current || {}),
+              grid: { rows: nRows, columns: nColumns, xgap: xGap, ygap: yGap, pattern: 'independent' },
+              ...axes,
+              annotations: [...titleAnnotations, ...regressions.annotations],
+              shapes: regressions.shapes,
+              dragmode: config!.dragMode,
+              width,
+              height,
+            }
+          : {
+              ...BASE_LAYOUT,
+              xaxis: {
+                ...AXIS_TICK_STYLES,
+                ...internalLayoutRef.current?.xaxis,
+                title: subplots.xyPairs[0]!.xTitle,
+              },
+              yaxis: {
+                ...AXIS_TICK_STYLES,
+                ...internalLayoutRef.current?.yaxis,
+                title: subplots.xyPairs[0]!.yTitle,
+              },
+              shapes: regressions.shapes,
+              annotations: [...regressions.annotations],
+              dragmode: config.dragMode,
+              width,
+              height,
+            };
+
+      return finalLayout;
+    }
+
+    if (scatter) {
+      const finalLayout: Partial<PlotlyTypes.Layout> = {
+        ...BASE_LAYOUT,
+        xaxis: {
+          ...AXIS_TICK_STYLES,
+          range: scatter.xDomain,
+          ...internalLayoutRef.current?.xaxis,
+          title: {
+            font: {
+              size: 12,
+              color: VIS_NEUTRAL_COLOR,
+            },
+            text: scatter.xLabel,
+          },
+        },
+        yaxis: {
+          ...AXIS_TICK_STYLES,
+          range: scatter.yDomain,
+          ...internalLayoutRef.current?.yaxis,
+          title: {
+            font: {
+              size: 12,
+              color: VIS_NEUTRAL_COLOR,
+            },
+            text: scatter.yLabel,
+          },
+        },
+        shapes: regressions.shapes,
+        annotations: [...regressions.annotations],
+        dragmode: config.dragMode,
+        width,
+        height,
+      };
+
+      return finalLayout;
+    }
+
+    if (facet) {
+      const axes: Record<string, Partial<PlotlyTypes.LayoutAxis>> = {};
+      const titleAnnotations: Partial<PlotlyTypes.Annotations>[] = [];
+
+      const { nColumns, nRows, xGap, yGap, xTitleSize, yTitleSize } = gaps(width, height, facet.resultData.length);
+
+      facet.resultData.forEach((group, plotCounter) => {
+        axes[`xaxis${plotCounter > 0 ? plotCounter + 1 : ''}`] = {
+          ...AXIS_TICK_STYLES,
+          range: facet.xDomain,
+          // Spread the previous layout to keep things like zoom
+          ...(internalLayoutRef.current?.[`xaxis${plotCounter > 0 ? plotCounter + 1 : ''}` as 'xaxis'] || {}),
+          ...(plotCounter > 0 ? { matches: 'x' } : {}),
+          // @ts-ignore
+          anchor: `y${plotCounter > 0 ? plotCounter + 1 : ''}`,
+          title: {
+            font: {
+              size: 12,
+              color: VIS_NEUTRAL_COLOR,
+            },
+            standoff: 0,
+            text: textMeasure.textEllipsis(facet.xTitle, xTitleSize),
+          },
+        };
+        axes[`yaxis${plotCounter > 0 ? plotCounter + 1 : ''}`] = {
+          ...AXIS_TICK_STYLES,
+          range: facet.yDomain,
+          // Spread the previous layout to keep things like zoom
+          ...(internalLayoutRef.current?.[`yaxis${plotCounter > 0 ? plotCounter + 1 : ''}` as 'yaxis'] || {}),
+          ...(plotCounter > 0 ? { matches: 'y' } : {}),
+          // @ts-ignore
+          anchor: `x${plotCounter > 0 ? plotCounter + 1 : ''}`,
+          title: {
+            font: {
+              size: 12,
+              color: VIS_NEUTRAL_COLOR,
+            },
+            text: textMeasure.textEllipsis(facet.yTitle, yTitleSize),
+          },
+        };
+
+        titleAnnotations.push({
+          x: 0.5,
+          y: 1,
+          yshift: -12,
+          xref: `x${plotCounter > 0 ? plotCounter + 1 : ''} domain` as PlotlyTypes.XAxisName,
+          yref: `y${plotCounter > 0 ? plotCounter + 1 : ''} domain` as PlotlyTypes.YAxisName,
+          xanchor: 'center',
+          yanchor: 'bottom',
+          text: getLabelOrUnknown(group.data.facet),
+          showarrow: false,
+          bgcolor: '#ffffff',
+          font: {
+            size: 12,
+            color: VIS_TRACES_COLOR,
+          },
+        });
+      });
+
+      // if we only find one facet (e.g., the categorical column only contains one value), we don't facet
+      const finalLayout: Partial<PlotlyTypes.Layout> =
+        facet?.resultData.length > 1
+          ? {
+              ...BASE_LAYOUT,
+              ...(internalLayoutRef.current || {}),
+              grid: { rows: nRows, columns: nColumns, xgap: xGap, ygap: yGap, pattern: 'independent' },
+              ...axes,
+              annotations: [...titleAnnotations, ...regressions.annotations],
+              shapes: regressions.shapes,
+              dragmode: config!.dragMode,
+              width,
+              height,
+            }
+          : {
+              ...BASE_LAYOUT,
+              xaxis: {
+                ...AXIS_TICK_STYLES,
+                range: facet.xDomain,
+                ...internalLayoutRef.current?.xaxis,
+              },
+              yaxis: {
+                ...AXIS_TICK_STYLES,
+                range: facet.yDomain,
+                ...internalLayoutRef.current?.yaxis,
+              },
+              shapes: regressions.shapes,
+              annotations: [...regressions.annotations],
+              dragmode: config.dragMode,
+              width,
+              height,
+            };
+
+      return finalLayout;
+    }
+
+    if (splom) {
+      // SPLOM case
+      const axes: Record<string, PlotlyTypes.LayoutAxis> = {};
+
+      const axis = () =>
+        ({
+          ...AXIS_TICK_STYLES,
+        }) as PlotlyTypes.LayoutAxis;
+
+      for (let i = 0; i < splom.dimensions.length; i++) {
+        axes[`xaxis${i > 0 ? i + 1 : ''}`] = axis();
+        axes[`yaxis${i > 0 ? i + 1 : ''}`] = axis();
+      }
+
+      const finalLayout: Partial<PlotlyTypes.Layout> = {
+        ...BASE_LAYOUT,
+        ...axes,
+        ...(internalLayoutRef.current || {}),
+        shapes: regressions.shapes,
+        dragmode: config.dragMode,
+        width,
+        height,
+      };
+
+      return finalLayout;
+    }
+
+    return undefined;
+  }, [subplots, scatter, facet, splom, internalLayoutRef, regressions.annotations, regressions.shapes, config, width, height]);
+}
diff --git a/src/vis/scatter/utils.ts b/src/vis/scatter/utils.ts
index ca24efbc1..96641fed7 100644
--- a/src/vis/scatter/utils.ts
+++ b/src/vis/scatter/utils.ts
@@ -1,44 +1,21 @@
 import * as d3v7 from 'd3v7';
-import flatMap from 'lodash/flatMap';
-import groupBy from 'lodash/groupBy';
 import merge from 'lodash/merge';
-import sortBy from 'lodash/sortBy';
-import { i18n } from '../../i18n';
-import { getCssValue, selectionColorDark } from '../../utils';
-import { VIS_LABEL_COLOR, VIS_NEUTRAL_COLOR } from '../general/constants';
-import { columnNameWithDescription, createIdToLabelMapper, resolveColumnValues, resolveSingleColumn, truncateText } from '../general/layoutUtils';
-import { getLabelOrUnknown } from '../general/utils';
+import { VIS_NEUTRAL_COLOR } from '../general/constants';
 import {
   ColumnInfo,
   EColumnTypes,
   ENumericalColorScaleType,
   EScatterSelectSettings,
   ESupportedPlotlyVis,
-  PlotlyData,
-  PlotlyInfo,
-  Scales,
   VisCategoricalValue,
   VisColumn,
   VisNumericalColumn,
   VisNumericalValue,
 } from '../interfaces';
+import { ELabelingOptions, ERegressionLineType, IRegressionResult, IScatterConfig } from './interfaces';
+import { PlotlyTypes } from '../../plotly';
+import { createIdToLabelMapper, resolveColumnValues, resolveSingleColumn } from '../general/layoutUtils';
 import { getCol } from '../sidebar';
-import { ELabelingOptions, ERegressionLineType, IScatterConfig } from './interfaces';
-
-function calculateDomain(domain: [number | undefined, number | undefined], vals: number[]): [number, number] {
-  if (!domain) {
-    return null;
-  }
-  if (domain[0] !== undefined && domain[1] !== undefined) {
-    return [domain[0], domain[1]];
-  }
-
-  const [min, max] = d3v7.extent(vals as number[]);
-
-  const calcDomain: [number, number] = [domain[0] ? domain[0] : min, domain[1] ? domain[1] : max + max / 20];
-
-  return calcDomain;
-}
 
 export const defaultRegressionLineStyle = {
   colors: [VIS_NEUTRAL_COLOR, '#C91A25', '#3561fd'],
@@ -57,6 +34,7 @@ export const defaultConfig: IScatterConfig = {
   dragMode: EScatterSelectSettings.RECTANGLE,
   alphaSliderVal: 0.5,
   sizeSliderVal: 8,
+  subplots: undefined,
   showLabels: ELabelingOptions.NEVER,
   showLabelLimit: 50,
   regressionLineOptions: {
@@ -86,56 +64,68 @@ export function scatterMergeDefaultConfig(columns: VisColumn[], config: IScatter
   return merged;
 }
 
-export function moveSelectedToFront(
-  col: (VisCategoricalValue | VisNumericalValue)[],
-  selectedMap: { [key: string]: boolean },
-): (VisCategoricalValue | VisNumericalValue)[] {
-  const selectedVals = col.filter((v) => selectedMap[v.id]);
-  const remainingVals = col.filter((v) => !selectedMap[v.id]);
-
-  const sortedCol = [...remainingVals, ...selectedVals];
-
-  return sortedCol;
-}
+export type ResolvedVisColumn = VisColumn & { resolvedValues: (VisNumericalValue | VisCategoricalValue)[] };
+
+export type FetchColumnDataResult = {
+  validColumns: ResolvedVisColumn[];
+  shapeColumn: ResolvedVisColumn;
+  colorColumn: ResolvedVisColumn;
+  facetColumn: ResolvedVisColumn;
+  colorDomain: [number, number];
+  idToLabelMapper: (id: string) => string;
+  resolvedLabelColumns: ResolvedVisColumn[];
+  resolvedLabelColumnsWithMappedValues: (ResolvedVisColumn & { mappedValues: Map<any, any> })[];
+  subplots?: { xColumn: ResolvedVisColumn; yColumn: ResolvedVisColumn; title: string }[];
+};
 
-export async function createScatterTraces(
+/**
+ * Data model hook for scatter plot
+ */
+export async function fetchColumnData(
   columns: VisColumn[],
-  numColumnsSelected: ColumnInfo[],
+  numericalColumnsSelected: ColumnInfo[],
   labelColumns: ColumnInfo[],
-  facet: ColumnInfo,
-  shape: ColumnInfo,
+  subplots: { xColumn: ColumnInfo; yColumn: ColumnInfo; title: string }[],
   color: ColumnInfo,
-  alphaSliderVal: number,
-  sizeSliderVal: number,
-  colorScaleType: ENumericalColorScaleType,
-  scales: Scales,
-  shapes: string[] | null,
-  showLabels: ELabelingOptions,
-  showLabelLimit?: number,
-  selectedMap: { [key: string]: boolean } = {},
-): Promise<PlotlyInfo> {
-  let plotCounter = 1;
+  shape: ColumnInfo,
+  facet: ColumnInfo,
+): Promise<FetchColumnDataResult> {
+  const numCols: VisNumericalColumn[] = numericalColumnsSelected.map((c) => columns.find((col) => col.info.id === c.id) as VisNumericalColumn);
+  const validColumns = await resolveColumnValues(numCols);
 
-  const emptyVal = {
-    plots: [],
-    legendPlots: [],
-    rows: 0,
-    cols: 0,
-    errorMessage: i18n.t('visyn:vis.scatterError'),
-    errorMessageHeader: i18n.t('visyn:vis.errorHeader'),
+  const shapeColumn = await resolveSingleColumn(getCol(columns, shape));
+  const colorColumn = await resolveSingleColumn(getCol(columns, color));
+  const facetColumn = await resolveSingleColumn(getCol(columns, facet));
 
-    formList: ['color', 'shape', 'bubble', 'opacity'],
-  };
+  const resolvedLabelColumns = await Promise.all((labelColumns ?? []).map((l) => resolveSingleColumn(getCol(columns, l))));
+
+  let min = 0;
+  let max = 0;
 
-  if (!numColumnsSelected) {
-    return emptyVal;
+  if (colorColumn) {
+    min = d3v7.min(colorColumn.resolvedValues.map((v) => +v.val).filter((v) => v !== null));
+    max = d3v7.max(colorColumn.resolvedValues.map((v) => +v.val).filter((v) => v !== null));
   }
 
-  const plots: PlotlyData[] = [];
-  const legendPlots: PlotlyData[] = [];
+  // Resolve subplots columns all at once to types of [{ resolvedX, resolvedY, title }]
+  const resolvedSubplots = subplots
+    ? await Promise.all(
+        subplots
+          .map(async (subplot) => {
+            const xColumn: ResolvedVisColumn | null = await resolveSingleColumn(getCol(columns, subplot.xColumn));
+            const yColumn: ResolvedVisColumn | null = await resolveSingleColumn(getCol(columns, subplot.yColumn));
 
-  const numCols: VisNumericalColumn[] = numColumnsSelected.map((c) => columns.find((col) => col.info.id === c.id) as VisNumericalColumn);
-  const resolvedLabelColumns = await Promise.all((labelColumns ?? []).map((l) => resolveSingleColumn(getCol(columns, l))));
+            if (!xColumn || !yColumn) {
+              return null;
+            }
+
+            return { xColumn, yColumn, title: subplot.title };
+          })
+          .filter((s) => s !== null) as unknown as { xColumn: ResolvedVisColumn; yColumn: ResolvedVisColumn; title: string }[],
+      )
+    : undefined;
+
+  const idToLabelMapper = await createIdToLabelMapper(columns);
   const resolvedLabelColumnsWithMappedValues = resolvedLabelColumns.map((c) => {
     const mappedValues = new Map();
     c.resolvedValues.forEach((v) => {
@@ -143,393 +133,55 @@ export async function createScatterTraces(
     });
     return { ...c, mappedValues };
   });
-  const validCols = await resolveColumnValues(numCols);
-  const shapeCol = await resolveSingleColumn(getCol(columns, shape));
-  const colorCol = await resolveSingleColumn(getCol(columns, color));
-  const facetCol = await resolveSingleColumn(getCol(columns, facet));
-
-  // cant currently do 1d scatterplots
-  if (validCols.length === 1) {
-    return emptyVal;
-  }
-
-  const idToLabelMapper = await createIdToLabelMapper(columns);
-
-  const textPositionOptions = ['top center', 'bottom center'];
-  const shapeScale = shape
-    ? d3v7
-        .scaleOrdinal<string>()
-        .domain([...new Set(shapeCol.resolvedValues.map((v) => v.val))] as string[])
-        .range(shapes)
-    : null;
-
-  let min = 0;
-  let max = 0;
 
-  if (color) {
-    min = d3v7.min(colorCol.resolvedValues.map((v) => +v.val).filter((v) => v !== null));
-    max = d3v7.max(colorCol.resolvedValues.map((v) => +v.val).filter((v) => v !== null));
-  }
-
-  const textPositions = ['top center', 'bottom center'];
-  const numericalColorScale = color
-    ? d3v7
-        .scaleLinear<string, number>()
-        .domain([max, (max + min) / 2, min])
-        .range(
-          colorScaleType === ENumericalColorScaleType.SEQUENTIAL
-            ? [getCssValue('visyn-s9-blue'), getCssValue('visyn-s5-blue'), getCssValue('visyn-s1-blue')]
-            : [getCssValue('visyn-c1'), '#d3d3d3', getCssValue('visyn-c2')],
-        )
-    : null;
-
-  // These are shared data properties between the traces
-  const sharedData: Partial<PlotlyData> & { [key: string]: unknown } = {
-    showlegend: false,
-    type: 'scattergl',
-    mode: showLabels === ELabelingOptions.NEVER ? 'markers' : 'text+markers',
-    hoverinfo: 'text',
-    hoverlabel: {
-      bgcolor: 'black',
-    },
-    selected: {
-      marker: {
-        line: {
-          width: 0,
-        },
-        opacity: 1,
-        size: sizeSliderVal,
-      },
-      textfont: {
-        color: showLabels === ELabelingOptions.NEVER ? 'transparent' : VIS_LABEL_COLOR,
-      },
-    },
-    unselected: {
-      marker: {
-        line: {
-          width: 0,
-        },
-        color: VIS_NEUTRAL_COLOR,
-        opacity: alphaSliderVal,
-        size: sizeSliderVal,
-      },
-      textfont: {
-        color: showLabels === ELabelingOptions.ALWAYS ? `rgba(179, 179, 179, ${alphaSliderVal})` : `rgba(179, 179, 179, 0)`,
-      },
-    },
+  return {
+    validColumns,
+    shapeColumn,
+    colorColumn,
+    facetColumn,
+    colorDomain: [min, max],
+    idToLabelMapper,
+    resolvedLabelColumns,
+    resolvedLabelColumnsWithMappedValues,
+    subplots: resolvedSubplots,
   };
+}
 
-  // Case: Facetting by category
-  if (validCols.length === 2 && facetCol) {
-    const xLabel = columnNameWithDescription(validCols[0].info);
-    const yLabel = columnNameWithDescription(validCols[1].info);
-
-    const data = validCols[0].resolvedValues.map((v, i) => ({
-      x: v.val,
-      y: validCols[1].resolvedValues[i].val,
-      ids: v.id?.toString(),
-      facet: facetCol.resolvedValues[i].val?.toString(),
-      color: colorCol ? colorCol.resolvedValues[i].val : undefined,
-      shape: shapeCol ? shapeCol.resolvedValues[i].val : undefined,
-    }));
-
-    // Sort facets by the order of the domain of the facet column or alphabetically if no domain is set
-    const sortOrder =
-      (facetCol.domain as string[]) ||
-      [...new Set(facetCol.resolvedValues.map((v) => v.val as string))].sort((a, b) => a?.localeCompare(b, undefined, { sensitivity: 'base' }));
-    const groupedData = sortBy(groupBy(data, 'facet'), (group) => {
-      const facetValue = group[0].facet;
-      const index = sortOrder.indexOf(facetValue);
-      return index !== -1 ? index : Infinity;
-    });
-
-    flatMap(groupedData, (group, key) => {
-      const calcXDomain = calculateDomain(
-        (validCols[0] as VisNumericalColumn).domain,
-        group.map((d) => d.x as number),
-      );
-      const calcYDomain = calculateDomain(
-        (validCols[1] as VisNumericalColumn).domain,
-        group.map((d) => d.y as number),
-      );
-
-      plots.push({
-        data: {
-          x: group.map((d) => d.x as number),
-          y: group.map((d) => d.y as number),
-          ids: group.map((d) => d.ids),
-          xaxis: plotCounter === 1 ? 'x' : `x${plotCounter}`,
-          yaxis: plotCounter === 1 ? 'y' : `y${plotCounter}`,
-          hovertext: group.map((d) =>
-            `${idToLabelMapper(d.ids)}
-            <br />${xLabel}: ${d.x}
-            <br />${yLabel}: ${d.y}
-            ${(resolvedLabelColumnsWithMappedValues ?? []).map((l) => `<br />${columnNameWithDescription(l.info)}: ${getLabelOrUnknown(l.mappedValues.get(d.ids))}`)}
-            ${colorCol ? `<br />${columnNameWithDescription(colorCol.info)}: ${getLabelOrUnknown(d.color)}` : ''}
-            ${shapeCol && shapeCol.info.id !== colorCol?.info.id ? `<br />${columnNameWithDescription(shapeCol.info)}: ${getLabelOrUnknown(d.shape)}` : ''}`.trim(),
-          ),
-          text: group.map((d) => idToLabelMapper(d.ids)),
-          // @ts-ignore
-          textposition: group.map((d, i) => textPositionOptions[i % textPositionOptions.length]),
-          marker: {
-            symbol: shapeCol ? group.map((d) => shapeScale(d.shape as string)) : 'circle',
-            color: colorCol
-              ? group.map((d) =>
-                  colorCol.type === EColumnTypes.NUMERICAL
-                    ? numericalColorScale(d.color as number)
-                    : colorCol.color
-                      ? colorCol.color[d.color]
-                      : scales.color(d.color),
-                )
-              : selectionColorDark,
-          },
-          ...sharedData,
-        },
-        xLabel,
-        yLabel,
-        xDomain: calcXDomain,
-        yDomain: calcYDomain,
-        title: getLabelOrUnknown(group[0].facet),
-      });
-      plotCounter += 1;
-    });
-  }
-
-  // Case: Exactly two numerical columns
-  if (validCols.length === 2 && !facetCol) {
-    const xDataVals = validCols[0].resolvedValues.map((v) => v.val) as number[];
-    const yDataVals = validCols[1].resolvedValues.map((v) => v.val) as number[];
-    const xLabel = columnNameWithDescription(validCols[0].info);
-    const yLabel = columnNameWithDescription(validCols[1].info);
-
-    const calcXDomain = calculateDomain((validCols[0] as VisNumericalColumn).domain, xDataVals);
-    const calcYDomain = calculateDomain((validCols[1] as VisNumericalColumn).domain, yDataVals);
-
-    plots.push({
-      data: {
-        x: xDataVals,
-        y: yDataVals,
-        ids: validCols[0].resolvedValues.map((v) => v.id?.toString()),
-        xaxis: plotCounter === 1 ? 'x' : `x${plotCounter}`,
-        yaxis: plotCounter === 1 ? 'y' : `y${plotCounter}`,
-        hovertext: validCols[0].resolvedValues.map((v, i) =>
-          `${idToLabelMapper(v.id)}
-<br />${xLabel}: ${v.val}
-<br />${yLabel}: ${yDataVals[i]}
-${(resolvedLabelColumns ?? []).map((l) => `<br />${columnNameWithDescription(l.info)}: ${getLabelOrUnknown(l.resolvedValues[i].val)}`)}
-${colorCol ? `<br />${columnNameWithDescription(colorCol.info)}: ${getLabelOrUnknown(colorCol.resolvedValues[i].val)}` : ''}
-${shapeCol && shapeCol.info.id !== colorCol?.info.id ? `<br />${columnNameWithDescription(shapeCol.info)}: ${getLabelOrUnknown(shapeCol.resolvedValues[i].val)}` : ''}`.trim(),
-        ),
-        text: validCols[0].resolvedValues.map((v) => idToLabelMapper(v.id)),
-        // @ts-ignore
-        textposition: validCols[0].resolvedValues.map((v, i) => textPositionOptions[i % textPositionOptions.length]),
-        marker: {
-          symbol: shapeCol ? shapeCol.resolvedValues.map((v) => shapeScale(v.val as string)) : 'circle',
-
-          color: colorCol
-            ? colorCol.resolvedValues.map((v) =>
-                colorCol.type === EColumnTypes.NUMERICAL ? numericalColorScale(v.val as number) : colorCol.color ? colorCol.color[v.val] : scales.color(v.val),
-              )
-            : selectionColorDark,
-        },
-        ...sharedData,
-      },
-      xLabel,
-      yLabel,
-      xDomain: calcXDomain,
-      yDomain: calcYDomain,
-    });
-  }
-
-  // Case: Multiple numerical columns and no categorical facetting
-  if (validCols.length > 2 && !facetCol) {
-    validCols.forEach((yCurr, yIdx) => {
-      validCols.forEach((xCurr) => {
-        // if on the diagonal, make a histogram.
-        if (xCurr.info.id === yCurr.info.id) {
-          const ids = xCurr.resolvedValues.map((v) => v.id?.toString());
-          plots.push({
-            data: {
-              x: xCurr.resolvedValues.map((v) => v.val),
-              customdata: ids, // had to use customdata instead of ids because otherwise binning would not work
-              xaxis: plotCounter === 1 ? 'x' : `x${plotCounter}`,
-              yaxis: plotCounter === 1 ? 'y' : `y${plotCounter}`,
-              type: 'histogram',
-              hoverlabel: {
-                namelength: 5,
-              },
-              showlegend: false,
-              marker: {
-                color: VIS_NEUTRAL_COLOR,
-              },
-              // @ts-ignore
-              selected: {
-                marker: {
-                  opacity: 1,
-                  color: selectionColorDark,
-                },
-              },
-              unselected: {
-                marker: {
-                  opacity: alphaSliderVal,
-                },
-              },
-              selectedpoints: ids.reduce((acc, id, i) => (selectedMap[id] ? acc.concat(i) : acc), [] as number[]),
-            },
-            xLabel: plotCounter > validCols.length * (validCols.length - 1) ? columnNameWithDescription(xCurr.info) : null,
-            yLabel: plotCounter === 1 + validCols.length * yIdx ? columnNameWithDescription(yCurr.info) : null,
-          });
-          // otherwise, make a scatterplot
-        } else {
-          const xDataVals = xCurr.resolvedValues.map((v) => v.val);
-          const yDataVals = yCurr.resolvedValues.map((v) => v.val);
-
-          const xLabel = columnNameWithDescription(xCurr.info);
-          const yLabel = columnNameWithDescription(yCurr.info);
-
-          const calcXDomain = calculateDomain((xCurr as VisNumericalColumn).domain, xDataVals as number[]);
-          const calcYDomain = calculateDomain((yCurr as VisNumericalColumn).domain, yDataVals as number[]);
-
-          plots.push({
-            data: {
-              x: xDataVals,
-              y: yDataVals,
-              ids: xCurr.resolvedValues.map((v) => v.id?.toString()),
-              xaxis: plotCounter === 1 ? 'x' : `x${plotCounter}`,
-              yaxis: plotCounter === 1 ? 'y' : `y${plotCounter}`,
-              hovertext: xCurr.resolvedValues.map((v, i) =>
-                `${v.id}
-<br />${xLabel}: ${v.val}
-<br />${yLabel}: ${yCurr.resolvedValues[i].val}
-${(resolvedLabelColumns ?? []).map((l) => `<br />${columnNameWithDescription(l.info)}: ${getLabelOrUnknown(l.resolvedValues[i].val)}`)}
-${colorCol ? `<br />${columnNameWithDescription(colorCol.info)}: ${getLabelOrUnknown(colorCol.resolvedValues[i].val)}` : ''}
-${shapeCol && shapeCol.info.id !== colorCol?.info.id ? `<br />${columnNameWithDescription(shapeCol.info)}: ${getLabelOrUnknown(shapeCol.resolvedValues[i].val)}` : ''}`.trim(),
-              ),
-              text: validCols[0].resolvedValues.map((v) => idToLabelMapper(v.id)),
-              // @ts-ignore
-              textposition: validCols[0].resolvedValues.map((v, i) => (i % textPositions.length === 0 ? 'top center' : 'bottom center')),
-              marker: {
-                color: colorCol
-                  ? colorCol.resolvedValues.map((v) =>
-                      colorCol.type === EColumnTypes.NUMERICAL
-                        ? numericalColorScale(v.val as number)
-                        : colorCol.color
-                          ? colorCol.color[v.val]
-                          : scales.color(v.val),
-                    )
-                  : selectionColorDark,
-              },
-              ...sharedData,
-            },
-            xLabel: plotCounter > validCols.length * (validCols.length - 1) ? xLabel : null,
-            yLabel: plotCounter === 1 + validCols.length * yIdx ? yLabel : null,
-            xDomain: calcXDomain,
-            yDomain: calcYDomain,
-          });
-        }
-
-        plotCounter += 1;
-      });
-    });
-  }
-
-  // if we have a column for the color, and its a categorical column, add a legendPlot that creates a legend.
-  if (colorCol && colorCol.type === EColumnTypes.CATEGORICAL && validCols.length > 0) {
-    legendPlots.push({
-      data: {
-        x: [null],
-        y: [null],
-        type: 'scattergl',
-        mode: 'markers',
-        legendgroup: 'color',
-        hoverinfo: 'skip',
-
-        // @ts-ignore
-        legendgrouptitle: {
-          text: truncateText(colorCol.info.name, true, 20),
-        },
-        marker: {
-          line: {
-            width: 0,
-          },
-          symbol: 'circle',
-          size: sizeSliderVal,
-          color: colorCol ? colorCol.resolvedValues.map((v) => (colorCol.color ? colorCol.color[v.val] : scales.color(v.val))) : VIS_NEUTRAL_COLOR,
-          opacity: 1,
-        },
-        transforms: [
-          {
-            type: 'groupby',
-            groups: colorCol.resolvedValues.map((v) => getLabelOrUnknown(v.val)),
-            styles: [
-              ...[...new Set<string>(colorCol.resolvedValues.map((v) => getLabelOrUnknown(v.val)))].map((c) => {
-                return { target: c, value: { name: c } };
-              }),
-            ],
-          },
-        ],
-      },
-      xLabel: null,
-      yLabel: null,
-    });
-  }
-
-  // if we have a column for the shape, add a legendPlot that creates a legend.
-  if (shapeCol) {
-    legendPlots.push({
-      data: {
-        x: [null],
-        y: [null],
-        type: 'scattergl',
-        mode: 'markers',
-        showlegend: true,
-        legendgroup: 'shape',
-        hoverinfo: 'all',
-
-        hoverlabel: {
-          namelength: 10,
-          bgcolor: 'black',
-          align: 'left',
-          bordercolor: 'black',
-        },
-        // @ts-ignore
-        legendgrouptitle: {
-          text: truncateText(shapeCol.info.name, true, 20),
-        },
-        marker: {
-          line: {
-            width: 0,
-          },
-          opacity: alphaSliderVal,
-          size: sizeSliderVal,
-          symbol: shapeCol ? shapeCol.resolvedValues.map((v) => shapeScale(v.val as string)) : 'circle',
-          color: VIS_NEUTRAL_COLOR,
-        },
-        transforms: [
-          {
-            type: 'groupby',
-            groups: shapeCol.resolvedValues.map((v) => getLabelOrUnknown(v.val)),
-            styles: [
-              ...[...new Set<string>(shapeCol.resolvedValues.map((v) => getLabelOrUnknown(v.val)))].map((c) => {
-                return { target: c, value: { name: c } };
-              }),
-            ],
-          },
-        ],
-      },
-      xLabel: null,
-      yLabel: null,
-    });
-  }
+export function regressionToAnnotation(r: IRegressionResult, precision: number, xref: string, yref: string): Partial<PlotlyTypes.Annotations> {
+  const formatPValue = (pValue: number) => {
+    if (pValue === null) {
+      return '';
+    }
+    if (pValue < 0.001) {
+      return `<i>(P<.001)</i>`;
+    }
+    return `<i>(P=${pValue.toFixed(3).toString().replace(/^0+/, '')})</i>`;
+  };
 
-  const defaultColNum = Math.min(Math.ceil(Math.sqrt(plots.length)), 5);
+  const statsFormatted = [
+    `n: ${r.stats.n}`,
+    `R²: ${r.stats.r2 < 0.001 ? '<0.001' : r.stats.r2} ${formatPValue(r.stats.pValue)}`,
+    `Pearson: ${r.stats.pearsonRho?.toFixed(precision)}`,
+    `Spearman: ${r.stats.spearmanRho?.toFixed(precision)}`,
+  ];
 
   return {
-    plots,
-    legendPlots,
-    rows: facetCol ? Math.ceil(plots.length / defaultColNum) : Math.sqrt(plots.length),
-    cols: facetCol ? defaultColNum : Math.sqrt(plots.length),
-    errorMessage: i18n.t('visyn:vis.scatterError'),
-    errorMessageHeader: i18n.t('visyn:vis.errorHeader'),
+    x: 0.0,
+    y: 1.0,
+    xref: `${xref} domain` as PlotlyTypes.XAxisName,
+    yref: `${yref} domain` as PlotlyTypes.YAxisName,
+    text: statsFormatted.map((row) => `${row}`).join('<br>'),
+    showarrow: false,
+    font: {
+      family: 'Roboto, sans-serif',
+      size: 13.4,
+      color: '#99A1A9',
+    },
+    align: 'left',
+    xanchor: 'left',
+    yanchor: 'top',
+    bgcolor: 'rgba(255, 255, 255, 0.8)',
+    xshift: 5,
+    yshift: -5,
   };
 }
diff --git a/src/vis/sidebar/NumericalColorButtons.tsx b/src/vis/sidebar/NumericalColorButtons.tsx
index 038fb25ce..3a85d9ca0 100644
--- a/src/vis/sidebar/NumericalColorButtons.tsx
+++ b/src/vis/sidebar/NumericalColorButtons.tsx
@@ -8,7 +8,7 @@ interface NumericalColorButtonsProps {
 }
 
 export function NumericalColorButtons({ callback, currentSelected }: NumericalColorButtonsProps) {
-  const sequentialColors = ['#002245', '#214066', '#3e618a', '#5c84af', '#83a8c9', '#a9cfe4', '#cff6ff'];
+  const sequentialColors = ['#cff6ff', '#a9cfe4', '#83a8c9', '#5c84af', '#3e618a', '#214066', '#002245'];
   const divergentColors = ['#337ab7', '#7496c1', '#a5b4ca', '#d3d3d3', '#e5b19d', '#ec8e6a', '#ec6836'];
 
   return (
diff --git a/src/vis/sidebar/SingleSelect.tsx b/src/vis/sidebar/SingleSelect.tsx
index 8d42868ab..9829aa680 100644
--- a/src/vis/sidebar/SingleSelect.tsx
+++ b/src/vis/sidebar/SingleSelect.tsx
@@ -80,19 +80,15 @@ export function SingleSelect({
         <Tooltip label={disabledTooltip} disabled={!disabled} withArrow>
           <InputBase
             data-testid={`SingleSelect${label}`}
-            className={css`
-              button.mantine-Input-input.mantine-InputBase-input {
-                height: 44px; // increase the height of the input to make some space for the description
-              }
-            `}
+            type="button"
             component="button"
+            multiline
             label={
               <Text size="sm" fw={500} c={disabled ? 'dimmed' : 'black'}>
                 {label}
               </Text>
             }
             disabled={disabled}
-            type="button"
             pointer
             onClick={() => combobox.toggleDropdown()}
             rightSectionPointerEvents={currentSelected === null ? 'none' : 'all'}
diff --git a/src/vis/stories/Vis/Scatter/ScatterIris.stories.tsx b/src/vis/stories/Vis/Scatter/ScatterIris.stories.tsx
index 886b72172..113b50dcc 100644
--- a/src/vis/stories/Vis/Scatter/ScatterIris.stories.tsx
+++ b/src/vis/stories/Vis/Scatter/ScatterIris.stories.tsx
@@ -49,6 +49,8 @@ Basic.args = {
       },
     ],
     color: null,
+    facets: null,
+    sizeSliderVal: 8,
     numColorScaleType: ENumericalColorScaleType.SEQUENTIAL,
     shape: null,
     dragMode: EScatterSelectSettings.RECTANGLE,
@@ -57,7 +59,109 @@ Basic.args = {
     regressionLineOptions: {
       type: ERegressionLineType.NONE,
     },
-  } as BaseVisConfig,
+  } as IScatterConfig,
+
+  filterCallback: (option) => {
+    console.log({ option });
+  },
+};
+
+export const ControlledSubplots: typeof Template = Template.bind({}) as typeof Template;
+ControlledSubplots.args = {
+  externalConfig: {
+    type: ESupportedPlotlyVis.SCATTER,
+    color: null,
+    subplots: [
+      {
+        xColumn: {
+          description: '',
+          id: 'petalLength',
+          name: 'Petal Length',
+        },
+        yColumn: {
+          description: '',
+          id: 'petalWidth',
+          name: 'Petal Width',
+        },
+        title: 'Nicer Title',
+      },
+      {
+        yColumn: {
+          description: '',
+          id: 'petalLength',
+          name: 'Petal Length',
+        },
+        xColumn: {
+          description: '',
+          id: 'petalWidth',
+          name: 'Petal Width',
+        },
+        title: 'Petal Length vs Petal Width',
+      },
+      {
+        yColumn: {
+          description: '',
+          id: 'petalLength',
+          name: 'Petal Length',
+        },
+        xColumn: {
+          description: '',
+          id: 'petalWidth',
+          name: 'Petal Width',
+        },
+        title: 'Petal Length vs Petal Width',
+      },
+      {
+        yColumn: {
+          description: '',
+          id: 'petalLength',
+          name: 'Petal Length',
+        },
+        xColumn: {
+          description: '',
+          id: 'petalWidth',
+          name: 'Petal Width',
+        },
+        title: 'Petal Length vs Petal Width',
+      },
+      {
+        yColumn: {
+          description: '',
+          id: 'petalLength',
+          name: 'Petal Length',
+        },
+        xColumn: {
+          description: '',
+          id: 'petalWidth',
+          name: 'Petal Width',
+        },
+        title: 'Petal Length vs Petal Width',
+      },
+      {
+        xColumn: {
+          description: '',
+          id: 'petalLength',
+          name: 'Petal Length',
+        },
+        yColumn: {
+          description: '',
+          id: 'petalWidth',
+          name: 'Petal Width',
+        },
+        title: 'Petal Length vs Petal Width',
+      },
+    ],
+    facets: null,
+    sizeSliderVal: 8,
+    numColorScaleType: ENumericalColorScaleType.SEQUENTIAL,
+    shape: null,
+    dragMode: EScatterSelectSettings.RECTANGLE,
+    alphaSliderVal: 1,
+    showLabels: ELabelingOptions.NEVER,
+    regressionLineOptions: {
+      type: ERegressionLineType.NONE,
+    },
+  } as IScatterConfig,
 
   filterCallback: (option) => {
     console.log({ option });
diff --git a/src/vis/violin/ViolinVis.tsx b/src/vis/violin/ViolinVis.tsx
index 87996b32a..b9094d69e 100644
--- a/src/vis/violin/ViolinVis.tsx
+++ b/src/vis/violin/ViolinVis.tsx
@@ -15,7 +15,6 @@ import { IBoxplotConfig } from '../boxplot';
 export function ViolinVis({
   config,
   columns,
-  scales,
   dimensions,
   selectedList,
   selectedMap,
diff --git a/src/vis/vishooks/hooks/VisHooks.stories.tsx b/src/vis/vishooks/hooks/VisHooks.stories.tsx
index 964d59c1d..f4c06ef02 100644
--- a/src/vis/vishooks/hooks/VisHooks.stories.tsx
+++ b/src/vis/vishooks/hooks/VisHooks.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import { Center, Stack, Paper } from '@mantine/core';
-import { lassoToSvgPath, useLasso } from './useLasso';
+import { useLasso } from './useLasso';
 import { SVGLasso } from '../components/SVGLasso';
 import { useBrush } from './useBrush';
 import { SVGBrush } from '../components';