diff --git a/demo/GoslingComponent.tsx b/demo/GoslingComponent.tsx
index 429e41e56..a3a931355 100644
--- a/demo/GoslingComponent.tsx
+++ b/demo/GoslingComponent.tsx
@@ -26,7 +26,7 @@ export function GoslingComponent({ spec, width, height, urlToFetchOptions }: Gos
         if (!pixiManager) {
             const canvasWidth = 1000,
                 canvasHeight = 1000; // These initial sizes don't matter because the size will be updated
-            const pixiManager = new PixiManager(canvasWidth, canvasHeight, plotElement, () => {});
+            const pixiManager = new PixiManager(canvasWidth, canvasHeight, plotElement, () => { });
             renderGosling(spec, plotElement, pixiManager, urlToFetchOptions);
             setPixiManager(pixiManager);
         } else {
@@ -37,6 +37,8 @@ export function GoslingComponent({ spec, width, height, urlToFetchOptions }: Gos
 
     return <div id="plot" style={{ height: '100%' }}></div>;
 }
+
+const baseTheme = getTheme('light');
 /**
  * This is the main function. It takes a Gosling spec and renders it using the PixiManager
  */
@@ -47,7 +49,12 @@ function renderGosling(
     urlToFetchOptions?: UrlToFetchOptions
 ) {
     // 1. Compile the spec
-    const compileResult = compile(gs, [], getTheme('light'), { containerSize: { width: 0, height: 0 } });
+    const compileResult = compile(
+        gs,
+        [],
+        { ...baseTheme, axis: { ...baseTheme.axis, labelExcludeChrPrefix: true, labelMargin: 1 } },
+        { containerSize: { width: 0, height: 0 } }
+    );
     const { trackInfos, gs: processedSpec, theme } = compileResult;
     console.warn('Spec', processedSpec);
     // 2. Extract all of the linking information from the spec
@@ -93,7 +100,7 @@ function renderGosling(
 /** Debounces the resize observer */
 function debounce(f: (arg0: unknown) => unknown, delay: number) {
     let timer = 0;
-    return function (...args: [arg0: unknown]) {
+    return function(...args: [arg0: unknown]) {
         clearTimeout(timer);
         timer = setTimeout(() => f.apply(this, args), delay);
     };
diff --git a/demo/renderer/dataFetcher.ts b/demo/renderer/dataFetcher.ts
index d9235c0e3..218646a01 100644
--- a/demo/renderer/dataFetcher.ts
+++ b/demo/renderer/dataFetcher.ts
@@ -15,6 +15,9 @@ import type { UrlToFetchOptions } from 'src/compiler/compile';
 export function getDataFetcher(spec: ProcessedTrack, urlToFetchOptions?: UrlToFetchOptions) {
     if (!('data' in spec)) {
         console.warn('No data in the track spec', spec);
+        // A data object can be missing in 3D tracks. In this case, just pass an empty data.
+        // The 3d track can still use the 3D genome model for visual encoding.
+        return new JsonDataFetcher({ type: 'json', values: [], assembly: spec.assembly });
     }
 
     const urlFetchOptions = ('url' in spec.data && urlToFetchOptions?.[spec.data.url]) || {};
diff --git a/demo/renderer/main.ts b/demo/renderer/main.ts
index eddba36b2..c2fec6fb7 100644
--- a/demo/renderer/main.ts
+++ b/demo/renderer/main.ts
@@ -13,6 +13,8 @@ import { HeatmapTrack } from '@gosling-lang/heatmap';
 import type { PixiManager } from '@pixi-manager';
 import { DummyTrack } from '@gosling-lang/dummy-track';
 import type { UrlToFetchOptions } from 'src/compiler/compile';
+import { createSpatialTrack } from '../../src/tracks/spatial-track/spatial-track';
+import type { CsvDataFetcherClass } from 'src/data-fetchers/csv/csv-data-fetcher';
 
 /**
  * Takes a list of track definitions and linkedEncodings and renders them
@@ -109,6 +111,21 @@ export function renderTrackDefs(
         if (type === TrackType.Dummy) {
             new DummyTrack(options, pixiManager.makeContainer(boundingBox).overlayDiv);
         }
+        // Add a new track type for Chromospace
+        if (type === TrackType.Spatial) {
+            // Even though Chromospace doesn't use PixiJS, we can use the PixiManager to create a div container that the canvas can be placed into.
+            // In the final version, we would probably want Chromospace to use an existing canvas element (to limit the creation of new elements).
+            // But for now this gets the job done.
+            const container = pixiManager.makeContainer(boundingBox).overlayDiv;
+            console.log('!@$!#%@#');
+            console.log(options.spec);
+            if (options.spec.data) {
+                // Ensure to pull all data needed
+                options.spec.data.sampleLength = 30000;
+            }
+            const datafetcher = getDataFetcher(options.spec, urlToFetchOptions);
+            createSpatialTrack(options, datafetcher as CsvDataFetcherClass, container);
+        }
     });
 }
 
diff --git a/demo/track-def/axis.ts b/demo/track-def/axis.ts
index 120090704..f45caea75 100644
--- a/demo/track-def/axis.ts
+++ b/demo/track-def/axis.ts
@@ -104,7 +104,7 @@ function getAxisTrackLinearOptions(
         startAngle: 0,
         endAngle: 0,
         layout: 'linear',
-        assembly: 'hg38',
+        assembly: track.assembly ?? 'hg38',
         stroke: 'transparent', // text outline
         color: theme.axis.labelColor,
         labelMargin: theme.axis.labelMargin,
@@ -165,7 +165,7 @@ function getAxisTrackCircularOptions(
         height: boundingBox.height,
         startAngle,
         endAngle,
-        assembly: 'hg38',
+        assembly: track.assembly,
         stroke: 'transparent', // text outline
         color: theme.axis.labelColor,
         labelMargin: theme.axis.labelMargin,
diff --git a/demo/track-def/main.ts b/demo/track-def/main.ts
index 90a76f8aa..193e538e3 100644
--- a/demo/track-def/main.ts
+++ b/demo/track-def/main.ts
@@ -6,6 +6,7 @@ import { type BrushLinearTrackOptions } from '@gosling-lang/brush-linear';
 import type { TrackInfo } from '../../src/compiler/bounding-box';
 import type { CompleteThemeDeep } from '../../src/core/utils/theme';
 import type { GoslingTrackOptions } from '../../src/tracks/gosling-track/gosling-track';
+import type { SpatialTrackOptions } from 'src/tracks/spatial-track/spatial-track';
 
 import { proccessTextHeader } from './text';
 import { processHeatmapTrack, isHeatmapTrack } from './heatmap';
@@ -25,9 +26,11 @@ export enum TrackType {
     Axis,
     BrushLinear,
     BrushCircular,
-    Heatmap
+    Heatmap,
+    Spatial
 }
 
+
 /**
  * Associate options to each track type
  */
@@ -39,6 +42,7 @@ interface TrackOptionsMap {
     [TrackType.BrushLinear]: BrushLinearTrackOptions;
     [TrackType.BrushCircular]: BrushCircularTrackOptions;
     [TrackType.Heatmap]: HeatmapTrackOptions;
+    [TrackType.Spatial]: SpatialTrackOptions; //~ TODO: add actual options
 }
 
 /**
@@ -83,6 +87,21 @@ export function createTrackDefs(trackInfos: TrackInfo[], theme: Required<Complet
             // We have a dummy track
             const dummyTrackDefs = processDummyTrack(track, boundingBox);
             trackDefs.push(...dummyTrackDefs);
+        } else if ('layout' in track && track.layout === 'spatial') {
+            // We have a 3D track
+            console.warn('got 3D track', track);
+            const trackDef: TrackDef<SpatialTrackOptions> = {
+                type: TrackType.Spatial,
+                trackId: track.id,
+                boundingBox,
+                options: {
+                    spec: track,
+                    color: track.color ? track.color.value : undefined,
+                    test: track.test,
+                    data3D: track.data3D,
+                }
+            };
+            trackDefs.push(trackDef);
         } else {
             // We have a gosling track
             const goslingAxisDefs = processGoslingTrack(track, boundingBox, theme);
diff --git a/demo/track-def/types.ts b/demo/track-def/types.ts
index 740d99a33..b24c8c611 100644
--- a/demo/track-def/types.ts
+++ b/demo/track-def/types.ts
@@ -13,7 +13,7 @@ import type { DataDeep, Assembly, DummyTrackStyle, Mark, X, Y } from '@gosling-l
  */
 
 /** A Track after it has been compiled */
-export type ProcessedTrack = ProcessedLinearTrack | ProcessedCircularTrack | ProcessedDummyTrack;
+export type ProcessedTrack = ProcessedLinearTrack | ProcessedCircularTrack | ProcessedDummyTrack | ProcessedSpatialTrack;
 /** All tracks potentially have these properties */
 export interface ProcessedTrackBase {
     id: string;
@@ -49,6 +49,12 @@ export type ProcessedCircularTrack = ProcessedTrackBase & {
     innerRadius: number;
 };
 
+export type ProcessedSpatialTrack = ProcessedTrackBase & {
+    layout: 'spatial';
+    test: string;
+    data3D: string;
+};
+
 export type ProcessedDummyTrack = ProcessedTrackBase & {
     type?: string;
     style?: DummyTrackStyle;
diff --git a/docs/spatial-layout.md b/docs/spatial-layout.md
new file mode 100644
index 000000000..e1a1881f4
--- /dev/null
+++ b/docs/spatial-layout.md
@@ -0,0 +1,234 @@
+# 3D chromatin structures in Gosling
+
+The purpose of this file is to document the changes in the specification and
+gosling.js to support visualizing 3D structures of chromatin. It should be
+merged in the main documentation at some point.
+
+Minimal specification using 3D data:
+
+```javascript
+const spec = {
+   views: [{
+      layout: "spatial",
+      tracks: [
+         {
+            data: {
+               url: "https://...",
+            },
+         },
+      ],
+   }]
+}
+```
+
+## Features
+
+### Specifying visual channels
+```javascript
+{
+   /* ... */
+   views: [{
+      layout: "spatial",
+      tracks: [
+         {
+            data: {
+               url: "https://...",
+            },
+            color: {
+               value: "#ff00ff"
+            },
+            scale: {
+               value: 0.01
+            }
+         },
+      ],
+   }]
+}
+```
+
+### Composing multiple tracks within a spatial view
+
+To create more complex visualizations, we can compose several tracks within a
+single view. Then each track can have different visual encodings, filtering,
+etc., that will be composed (overlaid) within a single view
+
+```javascript
+{
+   /* ... */
+   views: [{
+      layout: "spatial",
+      tracks: [
+         { // track 1
+            data: {
+               url: "https://...",
+            },
+            color: {
+               value: "#ff00ff"
+            },
+            scale: {
+               value: 0.01
+            }
+         },
+         { // track 2
+            data: {
+               url: "https://...", // TODO: could this be too much repetition (if it's the same dataset)?
+            },
+            color: {
+               value: "#333333"
+            },
+            scale: {
+               value: 0.001
+            }
+         },
+      ],
+   }]
+}
+```
+
+### Filtering
+
+In composing several tracks, it might be helpful to filter certain tracks,
+either by genomic coordinates, or based on the data. The question is how much
+power should this expression have: can be whole SQL.
+
+```javascript
+{
+   /* ... */
+   views: [{
+      layout: "spatial",
+      tracks: [
+         { // track 1
+            data: {
+               url: "https://...",
+            },
+            color: {
+               value: "#ff00ff"
+            },
+            scale: {
+               value: 0.01
+            }
+            filter: "chr1", //~ select only part to show
+            //filter: "chr1:10000-20000", //~ select only part to show
+         },
+         { // track 2
+            data: {
+               url: "https://...", // TODO: could this be too much repetition (if it's the same dataset)?
+            },
+            color: {
+               value: "#333333"
+            },
+            scale: {
+               value: 0.001
+            }
+         },
+      ],
+   }]
+}
+```
+
+### Minimal example without any defaults
+
+```javascript
+const spec = {
+   views: [{
+      layout: "spatial", //~ basically, this should switch it into chromospace rendering
+      tracks: [
+         {
+            data: {
+               url: "https://.../model.arrow",
+            },
+            x: {
+               field: "x", //~ this should look into the .arrow file
+               type: ???, // will need to lift the requirement for x to only be 'genomic'
+            },
+            y: {
+               field: "y",
+               type: ???,
+            },
+            z: {
+               field: "z",
+               type: ???,
+            },
+            color: {
+               field: "chr",
+               type: ???,
+            },
+         },
+      ],
+   }]
+}
+```
+Constant color:
+
+```javascript
+const spec = {
+   views: [{
+      layout: "spatial", //~ basically, this should switch it into chromospace rendering
+      tracks: [
+         {
+            data: {
+               url: "https://.../model.arrow",
+            },
+            x: {
+               field: "x", //~ this should look into the .arrow file
+               type: ???, // will need to lift the requirement for x to only be 'genomic'
+            },
+            y: {
+               field: "y",
+               type: ???,
+            },
+            z: {
+               field: "z",
+               type: ???,
+            },
+            color: {
+               value: "red",
+            },
+         },
+      ],
+   }]
+}
+```
+
+Designing with the goal of augmenting existing gosling specs
+
+```javascript
+{
+  "title": "Visual Linking",
+  "subtitle": "Change the position and range of brushes to update the detail view on the bottom",
+  "arrangement": "vertical",
+  "centerRadius": 0.4,
+  "views": [
+    {
+      "layout": "linear",
+      "xDomain": {"chromosome": "chr1", "interval": [160000000, 200000000]},
+      "linkingId": "detail",
+      "tracks": [
+        {
+          "data": {
+            "url": "https://server.gosling-lang.org/api/v1/tileset_info/?d=cistrome-multivec",
+            "type": "multivec",
+            "row": "sample",
+            "column": "position",
+            "value": "peak",
+            "categories": ["sample 1", "sample 2", "sample 3", "sample 4"]
+          },
+          "mark": "bar",
+          // "spatial": {
+          //   data: "https;",
+          //   x: "x",
+          //   y: "y",
+          //   z: "z",
+          // }
+          "x": {"field": "position", "type": "genomic", "axis": "top"},
+          "y": {"field": "peak", "type": "quantitative"},
+          "row": {"field": "sample", "type": "nominal"},
+          "color": {"field": "sample", "type": "nominal"},
+          "width": 690,
+          "height": 200
+        }
+      ]
+    }
+  ]
+}
+```
diff --git a/editor/Editor.tsx b/editor/Editor.tsx
index 8a73ffe6b..d632e8a28 100644
--- a/editor/Editor.tsx
+++ b/editor/Editor.tsx
@@ -588,10 +588,10 @@ function Editor(props: RouteComponentProps) {
             typeof goslingSpec?.responsiveSize === 'undefined'
                 ? false
                 : typeof goslingSpec?.responsiveSize === 'boolean'
-                  ? goslingSpec?.responsiveSize === true
-                  : typeof goslingSpec?.responsiveSize === 'object'
-                    ? goslingSpec?.responsiveSize.width === true || goslingSpec?.responsiveSize.height === true
-                    : false;
+                    ? goslingSpec?.responsiveSize === true
+                    : typeof goslingSpec?.responsiveSize === 'object'
+                        ? goslingSpec?.responsiveSize.width === true || goslingSpec?.responsiveSize.height === true
+                        : false;
         if (newIsResponsive !== isResponsive && newIsResponsive) {
             setScreenSize(undefined); // reset the screen
             setVisibleScreenSize(undefined);
@@ -738,25 +738,25 @@ function Editor(props: RouteComponentProps) {
         <>
             <div
                 className={`demo-navbar ${theme === 'dark' ? 'dark' : ''}`}
-                // To test APIs, uncomment the following code.
-                // onClick={() => {
-                //     if (!gosRef.current) return;
-                // // ! Be aware that the first view is for the title/subtitle track. So navigation API does not work.
-                // const id = gosRef.current.api.getViewIds()?.[1]; //'view-1';
-                // if(id) {
-                //     gosRef.current.api.zoomToExtent(id);
-                // }
-                //
-                // // Static visualization rendered in canvas
-                // const { canvas } = gosRef.current.api.getCanvas({
-                //     resolution: 1,
-                //     transparentBackground: true,
-                // });
-                // const testDiv = document.getElementById('preview-container');
-                // if(canvas && testDiv) {
-                //     testDiv.appendChild(canvas);
-                // }
-                // }}
+            // To test APIs, uncomment the following code.
+            // onClick={() => {
+            //     if (!gosRef.current) return;
+            // // ! Be aware that the first view is for the title/subtitle track. So navigation API does not work.
+            // const id = gosRef.current.api.getViewIds()?.[1]; //'view-1';
+            // if(id) {
+            //     gosRef.current.api.zoomToExtent(id);
+            // }
+            //
+            // // Static visualization rendered in canvas
+            // const { canvas } = gosRef.current.api.getCanvas({
+            //     resolution: 1,
+            //     transparentBackground: true,
+            // });
+            // const testDiv = document.getElementById('preview-container');
+            // if(canvas && testDiv) {
+            //     testDiv.appendChild(canvas);
+            // }
+            // }}
             >
                 <button
                     style={{ cursor: 'pointer', lineHeight: '40px' }}
@@ -1244,8 +1244,8 @@ function Editor(props: RouteComponentProps) {
                                             {'REFRESH DATA'}
                                         </button>
                                         {previewData.current.length > selectedPreviewData &&
-                                        previewData.current[selectedPreviewData] &&
-                                        previewData.current[selectedPreviewData].data.length > 0 ? (
+                                            previewData.current[selectedPreviewData] &&
+                                            previewData.current[selectedPreviewData].data.length > 0 ? (
                                             <>
                                                 <div className="editor-data-preview-tab">
                                                     {previewData.current.map((d: PreviewData, i: number) => (
@@ -1306,9 +1306,8 @@ function Editor(props: RouteComponentProps) {
                 </Allotment>
                 {/* Description Panel */}
                 <div
-                    className={`description ${hideDescription ? '' : 'description-shadow '}${
-                        isDescResizing ? '' : 'description-transition'
-                    } ${theme === 'dark' ? 'dark' : ''}`}
+                    className={`description ${hideDescription ? '' : 'description-shadow '}${isDescResizing ? '' : 'description-transition'
+                        } ${theme === 'dark' ? 'dark' : ''}`}
                     style={{ width: !description || hideDescription ? 0 : descPanelWidth }}
                 >
                     <div
diff --git a/editor/example/index.ts b/editor/example/index.ts
index aa7a6778d..a313f3c19 100644
--- a/editor/example/index.ts
+++ b/editor/example/index.ts
@@ -29,6 +29,7 @@ import JS_SPEC_ISLANDVIEWER from './spec/islandviewer.ts?raw';
 import { spec as JSON_SPEC_ISLANDVIEWER } from './spec/islandviewer';
 
 export type ExampleGroup =
+    | 'Spatial Layout'
     | 'Visual Encoding'
     | 'Mouse Events'
     | 'Semantic Zooming'
@@ -44,51 +45,55 @@ export const ExampleGroups: {
     name: ExampleGroup;
     description: string;
 }[] = [
-    {
-        name: 'Visual Encoding',
-        description:
-            'Common visualizations, such as bar charts, heatmaps, and line charts, and glyph-based visualizations, such as gene annotations and ideograms.'
-    },
-    {
-        name: 'Mouse Events',
-        description: 'Flexible use of interactions using mouse events, such as mouse hover, range select, and tooltips.'
-    },
-    {
-        name: 'Semantic Zooming',
-        description:
-            'Dynamic visualizations that change visual representations based on the predefined scales, i.e., zoom levels.'
-    },
-    {
-        name: 'Responsive Visualization',
-        description:
-            'Dynamic visualizations that change visual representations and the structure of multiple views based on the screen resolutions.'
-    },
-    {
-        name: 'Coordinated Multiple Views',
-        description:
-            'Coordinated interactions between multiple visualizations, such as zooming, panning, brushing, and linking.'
-    },
-    {
-        name: 'Applications',
-        description: 'Analytics visualizations (re)implemented using Gosling.'
-    },
-    {
-        name: 'Track Templates',
-        description: 'Built-in track templates that allow creating common tracks, like ideograms and gene annotations.'
-    },
-    {
-        name: 'Experimental',
-        description: 'Examples that include experimental features, such as performance improvements.'
-    },
-    {
-        name: 'Doc',
-        description: 'Examples used in the official documentation.'
-    },
-    {
-        name: 'Unassigned',
-        description: 'Examples that are not assigned to a group.'
-    }
-];
+        {
+            name: 'Spatial Layout',
+            description: 'Visualizations using 3D genome models'
+        },
+        {
+            name: 'Visual Encoding',
+            description:
+                'Common visualizations, such as bar charts, heatmaps, and line charts, and glyph-based visualizations, such as gene annotations and ideograms.'
+        },
+        {
+            name: 'Mouse Events',
+            description: 'Flexible use of interactions using mouse events, such as mouse hover, range select, and tooltips.'
+        },
+        {
+            name: 'Semantic Zooming',
+            description:
+                'Dynamic visualizations that change visual representations based on the predefined scales, i.e., zoom levels.'
+        },
+        {
+            name: 'Responsive Visualization',
+            description:
+                'Dynamic visualizations that change visual representations and the structure of multiple views based on the screen resolutions.'
+        },
+        {
+            name: 'Coordinated Multiple Views',
+            description:
+                'Coordinated interactions between multiple visualizations, such as zooming, panning, brushing, and linking.'
+        },
+        {
+            name: 'Applications',
+            description: 'Analytics visualizations (re)implemented using Gosling.'
+        },
+        {
+            name: 'Track Templates',
+            description: 'Built-in track templates that allow creating common tracks, like ideograms and gene annotations.'
+        },
+        {
+            name: 'Experimental',
+            description: 'Examples that include experimental features, such as performance improvements.'
+        },
+        {
+            name: 'Doc',
+            description: 'Examples used in the official documentation.'
+        },
+        {
+            name: 'Unassigned',
+            description: 'Examples that are not assigned to a group.'
+        }
+    ];
 
 export interface Example {
     group: ExampleGroup;
@@ -423,6 +428,43 @@ export const editorExampleObj: {
         spec: JsonExampleSpecs.EX_SPEC_PERF_ALIGNMENT,
         image: THUMBNAILS.PERF_ALIGNMENT
     },
+    SPATIAL_LAYOUT_MIN: {
+        group: 'Spatial Layout',
+        name: 'Minimal Example',
+        spec: JsonExampleSpecs.EX_SPEC_SPATIAL_MINIMAL,
+        image: THUMBNAILS.SPATIAL_MINIMAL
+    },
+    SPATIAL_LAYOUT_COLORS: {
+        group: 'Spatial Layout',
+        name: 'Coloring Strategies',
+        spec: JsonExampleSpecs.EX_SPEC_SPATIAL_COLOR,
+        image: THUMBNAILS.SPATIAL_COLOR,
+    },
+    SPATIAL_LAYOUT_DENSITY: {
+        group: 'Spatial Layout',
+        name: 'Density',
+        spec: JsonExampleSpecs.EX_SPEC_SPATIAL_DENSITY,
+        image: THUMBNAILS.SPATIAL_DENSITY,
+    },
+    SPATIAL_LAYOUT_SUPERIMP: {
+        group: 'Spatial Layout',
+        name: 'Multiple tracks',
+        spec: JsonExampleSpecs.EX_SPEC_SPATIAL_MULTIPLE_TRACKS,
+        image: THUMBNAILS.SPATIAL_MULTIPLE_TRACKS
+    },
+    SPATIAL_LAYOUT_TAN_COMP: {
+        group: 'Spatial Layout',
+        name: 'Human Cell Model (Tan et al., Science 2018): Comparison',
+        spec: JsonExampleSpecs.EX_SPEC_SPATIAL_TAN_COMP,
+        image: THUMBNAILS.SPATIAL_TAN,
+    },
+    SPATIAL_LAYOUT_3D_YEAST_MODEL: {
+        group: 'Spatial Layout',
+        name: '3D Yeast Model (Nature 2010)',
+        spec: JsonExampleSpecs.EX_SPEC_3D_YEAST_MODEL,
+        image: THUMBNAILS.SPATIAL_YEAST,
+        forceShow: true
+    },
     CORCES_ET_AL: {
         group: 'Coordinated Multiple Views',
         name: 'Corces et al. 2020',
diff --git a/editor/example/json-spec/3d-yeast-model.ts b/editor/example/json-spec/3d-yeast-model.ts
new file mode 100644
index 000000000..1ba340e8a
--- /dev/null
+++ b/editor/example/json-spec/3d-yeast-model.ts
@@ -0,0 +1,127 @@
+import type { Layout, SingleTrack } from '@gosling-lang/gosling-schema';
+import type { GoslingSpec } from 'gosling.js';
+
+// Reference:
+// - Paper: https://wiki.yeastgenome.org/images/f/f0/Ng_2019_PMID_31612944.pdf
+// - File Repo: https://www.ncbi.nlm.nih.gov/geo/query/acc.cgi?acc=GSM5241662
+const url = 'https://gosling-lang.s3.us-east-1.amazonaws.com/data/3d/GSM5241662_y1483_plus.bw';
+
+// The width and height of each track
+const trackWidth = 401;
+
+// Color hex codes for categories
+const colors = [
+    '#d60000',
+    '#018700',
+    '#b500ff',
+    '#05acc6',
+    '#97ff00',
+    '#ffa52f',
+    '#ff8ec8',
+    '#79525e',
+    '#00fdcf',
+    '#afa5ff',
+    '#93ac83',
+    '#9a6900',
+    '#366962',
+    '#d3008c',
+    '#fdf490',
+    '#c86e66',
+    '#9ee2ff',
+    '#00c846'
+];
+
+const spatialLayoutDef: Layout = {
+    type: 'spatial',
+    model: {
+        type: 'csv',
+        url: 'https://gosling-lang.s3.us-east-1.amazonaws.com/data/3d/yeast.csv',
+        xyz: ['x', 'y', 'z'],
+        chromosome: 'chr',
+        position: 'coord'
+    }
+};
+
+const base: SingleTrack = {
+    data: {
+        type: 'bigwig',
+        url
+    },
+    mark: 'rect',
+    locus: { field: 'position' },
+    color: { field: 'value', type: 'quantitative' },
+    width: trackWidth,
+    height: 50
+};
+
+const chrTrack: SingleTrack = {
+    data: {
+        type: 'json',
+        values: [
+            { chr: 'chrI', start: 0, end: 230218 },
+            { chr: 'chrII', start: 230218, end: 1043402 },
+            { chr: 'chrIII', start: 1043402, end: 1360022 },
+            { chr: 'chrIV', start: 1360022, end: 2891955 },
+            { chr: 'chrV', start: 2891955, end: 3468829 },
+            { chr: 'chrVI', start: 3468829, end: 3738990 },
+            { chr: 'chrVII', start: 3738990, end: 4829930 },
+            { chr: 'chrVIII', start: 4829930, end: 5392573 },
+            { chr: 'chrIX', start: 5392573, end: 5832461 },
+            { chr: 'chrX', start: 5832461, end: 6578212 },
+            { chr: 'chrXI', start: 6578212, end: 7245028 },
+            { chr: 'chrXII', start: 7245028, end: 8323205 },
+            { chr: 'chrXIII', start: 8323205, end: 9247636 },
+            { chr: 'chrXIV', start: 9247636, end: 10031969 },
+            { chr: 'chrXV', start: 10031969, end: 11123260 },
+            { chr: 'chrXVI', start: 11123260, end: 12071326 }
+        ]
+    },
+    mark: 'rect',
+    x: { field: 'start', type: 'genomic' },
+    xe: { field: 'end', type: 'genomic' },
+    color: {
+        field: 'chr',
+        type: 'nominal',
+        range: colors
+    },
+    width: trackWidth,
+    height: 10
+};
+
+export const EX_SPEC_3D_YEAST_MODEL: GoslingSpec = {
+    title: '3D Yeast Model (Nature 2010)',
+    assembly: 'sacCer3',
+    arrangement: 'horizontal',
+    layout: { ...spatialLayoutDef },
+    views: [
+        {
+            tracks: [{ ...base, mark: "sphere", height: trackWidth }]
+        },
+        {
+            tracks: [
+                {
+                    ...base,
+                    mark: "sphere",
+                    data: undefined,
+                    color: { field: 'chr', type: 'nominal', range: colors },
+                    height: trackWidth
+                }
+            ]
+        },
+        {
+            arrangement: 'vertical',
+            views: [
+                {
+                    layout: 'linear',
+                    tracks: [{ ...chrTrack }, { title: 'Linear Layout', ...base }]
+                },
+                {
+                    layout: 'circular',
+                    centerRadius: 0.5,
+                    spacing: 1,
+                    tracks: [{ ...chrTrack }, { title: 'Cicular Layout', ...base }]
+                }
+            ]
+        }
+    ]
+};
diff --git a/editor/example/json-spec/index.ts b/editor/example/json-spec/index.ts
index 30ff5bcba..dd5cc7513 100644
--- a/editor/example/json-spec/index.ts
+++ b/editor/example/json-spec/index.ts
@@ -26,6 +26,11 @@ import { EX_SPEC_TEMPLATE } from './track-template';
 import { EX_SPEC_MOUSE_EVENT } from './mouse-event';
 import { EX_SPEC_PERF_ALIGNMENT } from './perf-alignment';
 import { EX_SPEC_DEBUG } from './debug';
+import {
+    EX_SPEC_SPATIAL_MINIMAL, EX_SPEC_SPATIAL_MULTIPLE_TRACKS, EX_SPEC_SPATIAL_COLOR, EX_SPEC_SPATIAL_DENSITY,
+    EX_SPEC_SPATIAL_TAN_COMP
+} from './spatial-layout';
+import { EX_SPEC_3D_YEAST_MODEL } from './3d-yeast-model';
 
 export const JsonExampleSpecs = {
     EX_SPEC_LAYOUT_AND_ARRANGEMENT_1,
@@ -59,5 +64,11 @@ export const JsonExampleSpecs = {
     EX_SPEC_PILEUP,
     EX_SPEC_TEMPLATE,
     EX_SPEC_MOUSE_EVENT,
-    EX_SPEC_DEBUG
+    EX_SPEC_DEBUG,
+    EX_SPEC_SPATIAL_MINIMAL,
+    EX_SPEC_SPATIAL_MULTIPLE_TRACKS,
+    EX_SPEC_3D_YEAST_MODEL,
+    EX_SPEC_SPATIAL_COLOR,
+    EX_SPEC_SPATIAL_DENSITY,
+    EX_SPEC_SPATIAL_TAN_COMP,
 };
diff --git a/editor/example/json-spec/spatial-layout.ts b/editor/example/json-spec/spatial-layout.ts
new file mode 100644
index 000000000..8d51417bc
--- /dev/null
+++ b/editor/example/json-spec/spatial-layout.ts
@@ -0,0 +1,386 @@
+import type { GoslingSpec } from '@gosling-lang/gosling-schema';
+
+export const EX_SPEC_SPATIAL_MINIMAL: GoslingSpec = {
+    title: 'Spatial Layout (Minimal, CSV)',
+    subtitle: 'Super basic example of spatial layout',
+    views: [
+        {
+            layout: {
+                type: 'spatial',
+                model: {
+                    type: 'csv',
+                    url: 'https://raw.githubusercontent.com/dvdkouril/chromospace-sample-data/refs/heads/main/gosling-3d/stevens-2017/full-model.csv',
+                    xyz: ['x', 'y', 'z'],
+                    chromosome: 'chr',
+                    position: 'coord'
+                }
+            },
+            tracks: [
+                {
+                    width: 500,
+                    height: 500
+                }
+            ]
+        },
+    ]
+};
+
+export const EX_SPEC_SPATIAL_COLOR: GoslingSpec = {
+    title: 'Coloring strategies',
+    subtitle: 'Showcase of different ways to use the color channel.',
+    arrangement: "horizontal",
+    views: [
+        {
+            layout: {
+                type: 'spatial',
+                model: {
+                    type: 'csv',
+                    url: 'https://raw.githubusercontent.com/dvdkouril/chromospace-sample-data/main/gosling-3d/yeast_model.csv',
+                    xyz: ['x', 'y', 'z'],
+                    chromosome: 'chr',
+                    position: 'coord'
+                }
+            },
+            tracks: [
+                {
+                    color: {
+                        value: "lightgreen",
+                    },
+                    width: 500,
+                    height: 500
+                }
+            ]
+        },
+        {
+            layout: {
+                type: 'spatial',
+                model: {
+                    type: 'csv',
+                    url: 'https://raw.githubusercontent.com/dvdkouril/chromospace-sample-data/main/gosling-3d/yeast_model.csv',
+                    xyz: ['x', 'y', 'z'],
+                    chromosome: 'chr',
+                    position: 'coord'
+                }
+            },
+            tracks: [
+                {
+                    color: {
+                        field: "chr",
+                        type: "nominal",
+                    },
+                    width: 500,
+                    height: 500
+                }
+            ]
+        },
+        {
+            layout: {
+                type: 'spatial',
+                model: {
+                    type: 'csv',
+                    url: 'https://raw.githubusercontent.com/dvdkouril/chromospace-sample-data/main/gosling-3d/yeast_model.csv',
+                    xyz: ['x', 'y', 'z'],
+                    chromosome: 'chr',
+                    position: 'coord'
+                }
+            },
+            tracks: [
+                {
+                    color: {
+                        field: "coord",
+                        type: "quantitative",
+                    },
+                    width: 500,
+                    height: 500
+                }
+            ]
+        }
+    ]
+};
+
+export const EX_SPEC_SPATIAL_DENSITY: GoslingSpec = {
+    title: 'Density',
+    subtitle: '',
+    arrangement: "horizontal",
+    views: [
+        {
+            layout: {
+                type: 'spatial',
+                model: {
+                    type: 'csv',
+                    url: 'https://raw.githubusercontent.com/dvdkouril/chromospace-sample-data/refs/heads/main/gosling-3d/stevens-2017/densities/Stevens-2017_GSM2219498_Cell_2_model_7_with-densities_r05.csv',
+                    xyz: ['x', 'y', 'z'],
+                    chromosome: 'chr',
+                    position: 'coord'
+                }
+            },
+            tracks: [
+                {
+                    color: {
+                        field: "densityVals",
+                        type: "quantitative",
+                    },
+                    width: 500,
+                    height: 500
+                }
+            ]
+        },
+        {
+            layout: {
+                type: 'spatial',
+                model: {
+                    type: 'csv',
+                    url: 'https://raw.githubusercontent.com/dvdkouril/chromospace-sample-data/refs/heads/main/gosling-3d/stevens-2017/densities/Stevens-2017_GSM2219498_Cell_2_model_7_with-densities_r05.csv',
+                    xyz: ['x', 'y', 'z'],
+                    chromosome: 'chr',
+                    position: 'coord'
+                }
+            },
+            tracks: [
+                {
+                    color: {
+                        field: "densityVals",
+                        type: "quantitative",
+                    },
+                    size: {
+                        field: "densityVals",
+                        type: "quantitative",
+                        range: [0.03, 0.002],
+                    },
+                    width: 500,
+                    height: 500
+                }
+            ]
+        },
+    ]
+};
+
+export const EX_SPEC_SPATIAL_MULTIPLE_TRACKS: GoslingSpec = {
+    title: 'Spatial Layout: multiple tracks in one view',
+    views: [
+        {
+            layout: {
+                type: 'spatial',
+                model: {
+                    type: 'csv',
+                    url: 'https://raw.githubusercontent.com/dvdkouril/chromospace-sample-data/refs/heads/main/gosling-3d/stevens-2017/full-model.csv',
+                    xyz: ['x', 'y', 'z'],
+                    chromosome: 'chr',
+                    position: 'coord'
+                }
+            },
+            width: 500,
+            height: 500,
+            alignment: "overlay",
+            tracks: [
+                {
+                    color: {
+                        value: 'gainsboro'
+                    },
+                    size: {
+                        value: 0.005,
+                    },
+                    mark: 'sphere',
+                },
+                {
+                    color: {
+                        value: 'darkslateblue'
+                    },
+                    size: {
+                        value: 0.02,
+                    },
+                    mark: 'box',
+                    dataTransform: [{
+                        type: "filter",
+                        field: "chr",
+                        oneOf: ["chr b"],
+                    }],
+                },
+                {
+                    color: {
+                        value: 'darkseagreen'
+                    },
+                    size: {
+                        value: 0.02,
+                    },
+                    mark: 'octahedron',
+                    dataTransform: [{
+                        type: "filter",
+                        field: "chr",
+                        oneOf: ["chr a"],
+                    }],
+                }
+            ]
+        }
+    ]
+};
+
+
+export const EX_SPEC_SPATIAL_TAN_COMP: GoslingSpec = {
+    title: 'Tan 2018 (Science) comparison',
+    arrangement: "horizontal",
+    views: [
+        {
+            layout: {
+                type: 'spatial',
+                model: {
+                    type: 'csv',
+                    url: 'https://raw.githubusercontent.com/dvdkouril/chromospace-sample-data/refs/heads/main/gosling-3d/tan-2018/Tan-2018_GSM3271347_gm12878_01.csv',
+                    xyz: ['x', 'y', 'z'],
+                    chromosome: 'chr',
+                    position: 'coord'
+                }
+            },
+            width: 500,
+            height: 500,
+            alignment: "overlay",
+            tracks: [
+                {
+                    color: {
+                        value: 'gainsboro'
+                    },
+                    size: {
+                        value: 0.005,
+                    },
+                    mark: 'sphere',
+                },
+                {
+                    color: {
+                        field: 'coord',
+                        type: 'quantitative',
+                        domain: [900000, 249200000],
+                        range: "spectral",
+                    },
+                    size: {
+                        value: 0.02,
+                    },
+                    mark: 'box',
+                    dataTransform: [{
+                        type: "filter",
+                        field: "chr",
+                        oneOf: ["1(pat)"],
+                    }],
+                },
+
+            ]
+        },
+        {
+            layout: {
+                type: 'spatial',
+                model: {
+                    type: 'csv',
+                    url: 'https://raw.githubusercontent.com/dvdkouril/chromospace-sample-data/refs/heads/main/gosling-3d/tan-2018/Tan-2018_GSM3271348_gm12878_02.csv',
+                    xyz: ['x', 'y', 'z'],
+                    chromosome: 'chr',
+                    position: 'coord'
+                }
+            },
+            width: 500,
+            height: 500,
+            alignment: "overlay",
+            tracks: [
+                {
+                    color: {
+                        value: 'gainsboro'
+                    },
+                    size: {
+                        value: 0.005,
+                    },
+                    mark: 'sphere',
+                },
+                {
+                    color: {
+                        field: 'coord',
+                        type: 'quantitative',
+                        domain: [900000, 249300000],
+                        range: "spectral",
+                    },
+                    size: {
+                        value: 0.02,
+                    },
+                    mark: 'box',
+                    dataTransform: [{
+                        type: "filter",
+                        field: "chr",
+                        oneOf: ["1(pat)"],
+                    }],
+                },
+
+            ]
+        }
+    ]
+};
+
+export const EX_SPEC_SPATIAL_SUPERIMPOSITION: GoslingSpec = {
+    title: 'Spatial Layout: superimposition',
+    views: [
+        {
+            layout: 'spatial',
+            tracks: [
+                {
+                    data: {
+                        type: 'csv',
+                        url: 'https://raw.githubusercontent.com/dvdkouril/chromospace-sample-data/main/gosling-3d/yeast_model.csv',
+                    },
+                    spatial: {
+                        x: "x",
+                        y: "y",
+                        z: "z",
+                        chr: "chr",
+                        coord: "coord",
+                    },
+                    color: {
+                        value: "#ff0000",
+                    },
+                    size: {
+                        value: 0.01,
+                    },
+                    width: 500,
+                    height: 500
+                },
+                {
+                    data: {
+                        type: 'csv',
+                        url: 'https://raw.githubusercontent.com/dvdkouril/chromospace-sample-data/refs/heads/main/gosling-3d/stevens-2017/single_chromosome.csv',
+                    },
+                    spatial: {
+                        x: "x",
+                        y: "y",
+                        z: "z",
+                        chr: "chr",
+                        coord: "coord",
+                    },
+                    color: {
+                        value: "#00ff00",
+                    },
+                    size: {
+                        value: 0.01,
+                    },
+                    width: 500,
+                    height: 500
+                },
+                {
+                    data: {
+                        type: 'csv',
+                        url: 'https://raw.githubusercontent.com/dvdkouril/chromospace-sample-data/refs/heads/main/gosling-3d/stevens-2017/single_chromosome.csv',
+                    },
+                    spatial: {
+                        x: "x",
+                        y: "y",
+                        z: "z",
+                        chr: "chr",
+                        coord: "coord",
+                    },
+                    color: {
+                        value: "#0000ff",
+                    },
+                    size: {
+                        value: 0.01,
+                    },
+                    width: 500,
+                    height: 500
+                }
+            ]
+        }
+    ],
+};
diff --git a/editor/example/thumbnails.ts b/editor/example/thumbnails.ts
index 05d499d35..a4ae7da71 100644
--- a/editor/example/thumbnails.ts
+++ b/editor/example/thumbnails.ts
@@ -30,6 +30,12 @@ import TEMPLATE from './thumbnails/TEMPLATE.png';
 import VISUAL_ENCODING from './thumbnails/VISUAL_ENCODING.png';
 import VISUAL_ENCODING_CIRCULAR from './thumbnails/VISUAL_ENCODING_CIRCULAR.png';
 import ISLANDVIEWER from './thumbnails/ISLANDVIEWER.png';
+import SPATIAL_MINIMAL from './thumbnails/SPATIAL_MINIMAL.png';
+import SPATIAL_YEAST from './thumbnails/SPATIAL_YEAST.png';
+import SPATIAL_COLOR from './thumbnails/SPATIAL_COLOR.png';
+import SPATIAL_DENSITY from './thumbnails/SPATIAL_DENSITY.png';
+import SPATIAL_MULTIPLE_TRACKS from './thumbnails/SPATIAL_MULTIPLE_TRACKS.png';
+import SPATIAL_TAN from './thumbnails/SPATIAL_TAN.png';
 
 export const THUMBNAILS = {
     ALIGNMENT,
@@ -63,5 +69,11 @@ export const THUMBNAILS = {
     TEMPLATE,
     VISUAL_ENCODING,
     VISUAL_ENCODING_CIRCULAR,
-    ISLANDVIEWER
+    ISLANDVIEWER,
+    SPATIAL_MINIMAL,
+    SPATIAL_YEAST,
+    SPATIAL_COLOR,
+    SPATIAL_DENSITY,
+    SPATIAL_MULTIPLE_TRACKS,
+    SPATIAL_TAN,
 };
diff --git a/editor/example/thumbnails/SPATIAL_COLOR.png b/editor/example/thumbnails/SPATIAL_COLOR.png
new file mode 100644
index 000000000..543ed2ec7
Binary files /dev/null and b/editor/example/thumbnails/SPATIAL_COLOR.png differ
diff --git a/editor/example/thumbnails/SPATIAL_DENSITY.png b/editor/example/thumbnails/SPATIAL_DENSITY.png
new file mode 100644
index 000000000..bd56c28b0
Binary files /dev/null and b/editor/example/thumbnails/SPATIAL_DENSITY.png differ
diff --git a/editor/example/thumbnails/SPATIAL_MINIMAL.png b/editor/example/thumbnails/SPATIAL_MINIMAL.png
new file mode 100644
index 000000000..7011fb33f
Binary files /dev/null and b/editor/example/thumbnails/SPATIAL_MINIMAL.png differ
diff --git a/editor/example/thumbnails/SPATIAL_MULTIPLE_TRACKS.png b/editor/example/thumbnails/SPATIAL_MULTIPLE_TRACKS.png
new file mode 100644
index 000000000..cbd74011e
Binary files /dev/null and b/editor/example/thumbnails/SPATIAL_MULTIPLE_TRACKS.png differ
diff --git a/editor/example/thumbnails/SPATIAL_TAN.png b/editor/example/thumbnails/SPATIAL_TAN.png
new file mode 100644
index 000000000..7d53b44de
Binary files /dev/null and b/editor/example/thumbnails/SPATIAL_TAN.png differ
diff --git a/editor/example/thumbnails/SPATIAL_YEAST.png b/editor/example/thumbnails/SPATIAL_YEAST.png
new file mode 100644
index 000000000..1f93f0f6f
Binary files /dev/null and b/editor/example/thumbnails/SPATIAL_YEAST.png differ
diff --git a/package.json b/package.json
index 0e9ca2088..a7a823360 100644
--- a/package.json
+++ b/package.json
@@ -58,9 +58,11 @@
     "@gmod/tabix": "^1.5.6",
     "@gmod/vcf": "^5.0.10",
     "@preact/signals-core": "^1.6.1",
+    "@uwdata/flechette": "^1.1.2",
     "allotment": "^1.19.0",
     "bezier-js": "4.0.3",
     "buffer": "^6.0.3",
+    "chromospace": "^0.1.7",
     "css-element-queries": "^1.2.3",
     "d3-array": "^3.2.4",
     "d3-brush": "^3.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dfb65b66e..fb555dd01 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ dependencies:
   '@preact/signals-core':
     specifier: ^1.6.1
     version: 1.6.1
+  '@uwdata/flechette':
+    specifier: ^1.1.2
+    version: 1.1.2
   allotment:
     specifier: ^1.19.0
     version: 1.19.3(react-dom@18.2.0)(react@18.2.0)
@@ -38,6 +41,9 @@ dependencies:
   buffer:
     specifier: ^6.0.3
     version: 6.0.3
+  chromospace:
+    specifier: ^0.1.7
+    version: 0.1.7
   css-element-queries:
     specifier: ^1.2.3
     version: 1.2.3
@@ -1459,6 +1465,12 @@ packages:
       p-map: 4.0.0
     dev: true
 
+  /@swc/helpers@0.5.15:
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+    dependencies:
+      tslib: 2.8.1
+    dev: false
+
   /@tootallnate/once@2.0.0:
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}
@@ -1507,6 +1519,14 @@ packages:
     resolution: {integrity: sha512-qQR1dr2rGIHYlJulmr8Ioq3De0Le9E4MJ5AiaeAETJJpndT1uUNHsGFK3L/UIu+rbkQSdj8J/w2bCsBZc/Y5fQ==}
     dev: true
 
+  /@types/command-line-args@5.2.3:
+    resolution: {integrity: sha512-uv0aG6R0Y8WHZLTamZwtfsDLVRnOa+n+n5rEvFWL5Na5gZ8V2Teab/duDPFzIIIhs9qizDpcavCusCLJZu62Kw==}
+    dev: false
+
+  /@types/command-line-usage@5.0.4:
+    resolution: {integrity: sha512-BwR5KP3Es/CSht0xqBcUXS3qCAUVXwpRKsV2+arxeb65atasuXG9LykC9Ab10Cw3s2raH92ZqOeILaQbsB2ACg==}
+    dev: false
+
   /@types/css-font-loading-module@0.0.12:
     resolution: {integrity: sha512-x2tZZYkSxXqWvTDgveSynfjq/T2HyiZHXb00j/+gy19yp70PHCizM48XFdjBCWH7eHBD0R5i/pw9yMBP/BH5uA==}
     dev: true
@@ -1738,6 +1758,12 @@ packages:
     resolution: {integrity: sha512-KcfkBq9H4PI6Vpu5B/KoPeuVDAbmi+2mDBqGPGUgoL7yXQtcWGu2vJWmmRkneWK3Rh0nIAX192Aa87AqKHYChQ==}
     dev: true
 
+  /@types/node@20.17.17:
+    resolution: {integrity: sha512-/WndGO4kIfMicEQLTi/mDANUu/iVUhT7KboZPdEqqHQ4aTS+3qT3U5gIqWDFV+XouorjfgGqvKILJeHhuQgFYg==}
+    dependencies:
+      undici-types: 6.19.8
+    dev: false
+
   /@types/normalize-package-data@2.4.4:
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
     dev: true
@@ -1931,6 +1957,10 @@ packages:
       eslint-visitor-keys: 4.2.0
     dev: true
 
+  /@uwdata/flechette@1.1.2:
+    resolution: {integrity: sha512-hhtAgXlJbibLIHHIyFJ2fcPQ/hAK43HtEirRgrb/v2xEQv4It/KcUOyMklaVPUv2Z7+agKjSWLAXGyAQglRPvQ==}
+    dev: false
+
   /@vitejs/plugin-react@4.1.0(vite@4.4.11):
     resolution: {integrity: sha512-rM0SqazU9iqPUraQ2JlIvReeaxOoRj6n+PzB1C0cBzIbd8qP336nC39/R9yPi3wVcah7E7j/kdU1uCUqMEU4OQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -2141,7 +2171,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       color-convert: 2.0.1
-    dev: true
 
   /ansi-styles@5.2.0:
     resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
@@ -2153,6 +2182,21 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /apache-arrow@18.1.0:
+    resolution: {integrity: sha512-v/ShMp57iBnBp4lDgV8Jx3d3Q5/Hac25FWmQ98eMahUiHPXcvwIMKJD0hBIgclm/FCG+LwPkAKtkRO1O/W0YGg==}
+    hasBin: true
+    dependencies:
+      '@swc/helpers': 0.5.15
+      '@types/command-line-args': 5.2.3
+      '@types/command-line-usage': 5.0.4
+      '@types/node': 20.17.17
+      command-line-args: 5.2.1
+      command-line-usage: 7.0.3
+      flatbuffers: 24.12.23
+      json-bignum: 0.0.3
+      tslib: 2.8.1
+    dev: false
+
   /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
@@ -2166,6 +2210,16 @@ packages:
     resolution: {integrity: sha512-fExL2kFDC1Q2DUOx3whE/9KoN66IzkY4b4zUHUBFM1ojEYjZZYDcUW3bek/ufGionX9giIKDC5redH2IlGqcQQ==}
     dev: true
 
+  /array-back@3.1.0:
+    resolution: {integrity: sha512-TkuxA4UCOvxuDK6NZYXCalszEzj+TLszyASooky+i742l9TqsOdYCMJJupxRic61hwquNtppB3hgcuq9SVSH1Q==}
+    engines: {node: '>=6'}
+    dev: false
+
+  /array-back@6.2.2:
+    resolution: {integrity: sha512-gUAZ7HPyb4SJczXAMUXMGAvI976JoK3qEx9v1FTmeYuJj0IBiaKttG1ydtGKdkfqWkIkouke7nG8ufGy77+Cvw==}
+    engines: {node: '>=12.17'}
+    dev: false
+
   /array-buffer-byte-length@1.0.0:
     resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
     dependencies:
@@ -2539,6 +2593,13 @@ packages:
       type-detect: 4.0.8
     dev: true
 
+  /chalk-template@0.4.0:
+    resolution: {integrity: sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==}
+    engines: {node: '>=12'}
+    dependencies:
+      chalk: 4.1.2
+    dev: false
+
   /chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -2554,7 +2615,6 @@ packages:
     dependencies:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
-    dev: true
 
   /chalk@5.3.0:
     resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
@@ -2579,6 +2639,21 @@ packages:
       get-func-name: 2.0.2
     dev: true
 
+  /chroma-js@3.1.2:
+    resolution: {integrity: sha512-IJnETTalXbsLx1eKEgx19d5L6SRM7cH4vINw/99p/M11HCuXGRWL+6YmCm7FWFGIo6dtWuQoQi1dc5yQ7ESIHg==}
+    dev: false
+
+  /chromospace@0.1.7:
+    resolution: {integrity: sha512-m0zTrJco+NpmfJe9lOIJzvdK853z305npnw7sP7wmbiUPwl9YtcmL6084Nl7ntNj6rBD9EGJoF+eWgxiHdQIZQ==}
+    dependencies:
+      apache-arrow: 18.1.0
+      chroma-js: 3.1.2
+      gl-matrix: 3.4.3
+      n8ao: 1.9.4(postprocessing@6.36.7)(three@0.171.0)
+      postprocessing: 6.36.7(three@0.171.0)
+      three: 0.171.0
+    dev: false
+
   /classnames@2.3.2:
     resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
     dev: false
@@ -2614,7 +2689,6 @@ packages:
     engines: {node: '>=7.0.0'}
     dependencies:
       color-name: 1.1.4
-    dev: true
 
   /color-name@1.1.3:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
@@ -2622,7 +2696,6 @@ packages:
 
   /color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: true
 
   /combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
@@ -2631,6 +2704,26 @@ packages:
       delayed-stream: 1.0.0
     dev: true
 
+  /command-line-args@5.2.1:
+    resolution: {integrity: sha512-H4UfQhZyakIjC74I9d34fGYDwk3XpSr17QhEd0Q3I9Xq1CETHo4Hcuo87WyWHpAF1aSLjLRf5lD9ZGX2qStUvg==}
+    engines: {node: '>=4.0.0'}
+    dependencies:
+      array-back: 3.1.0
+      find-replace: 3.0.0
+      lodash.camelcase: 4.3.0
+      typical: 4.0.0
+    dev: false
+
+  /command-line-usage@7.0.3:
+    resolution: {integrity: sha512-PqMLy5+YGwhMh1wS04mVG44oqDsgyLRSKJBdOo1bnYhMKBW65gZF1dRp2OZRhiTjgUHljy99qkO7bsctLaw35Q==}
+    engines: {node: '>=12.20.0'}
+    dependencies:
+      array-back: 6.2.2
+      chalk-template: 0.4.0
+      table-layout: 4.1.1
+      typical: 7.3.0
+    dev: false
+
   /commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
@@ -3861,6 +3954,13 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /find-replace@3.0.0:
+    resolution: {integrity: sha512-6Tb2myMioCAgv5kfvP5/PkZZ/ntTpVK39fHY7WkWBgvbeE+VHd/tZuZ4mrC+bxh4cfOZeYKVPaJIZtZXV7GNCQ==}
+    engines: {node: '>=4.0.0'}
+    dependencies:
+      array-back: 3.1.0
+    dev: false
+
   /find-up@2.1.0:
     resolution: {integrity: sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==}
     engines: {node: '>=4'}
@@ -3892,6 +3992,10 @@ packages:
       keyv: 4.5.4
     dev: true
 
+  /flatbuffers@24.12.23:
+    resolution: {integrity: sha512-dLVCAISd5mhls514keQzmEG6QHmUUsNuWsb4tFafIUwvvgDjXhtfAYSKOzt5SWOy+qByV5pbsDZ+Vb7HUOBEdA==}
+    dev: false
+
   /flatted@3.3.2:
     resolution: {integrity: sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==}
     dev: true
@@ -4101,6 +4205,10 @@ packages:
       ini: 1.3.8
     dev: true
 
+  /gl-matrix@3.4.3:
+    resolution: {integrity: sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==}
+    dev: false
+
   /glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -4233,7 +4341,6 @@ packages:
   /has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
-    dev: true
 
   /has-own-property@0.1.0:
     resolution: {integrity: sha512-14qdBKoonU99XDhWcFKZTShK+QV47qU97u8zzoVo9cL5TZ3BmBHXogItSt9qJjR0KUMFRhcCW8uGIGl8nkl7Aw==}
@@ -4965,6 +5072,11 @@ packages:
     hasBin: true
     dev: true
 
+  /json-bignum@0.0.3:
+    resolution: {integrity: sha512-2WHyXj3OfHSgNyuzDbSxI1w2jgw5gkWSWhS7Qg4bWXx1nLk3jnbwfUeS0PSba3IzpTUWdHxBieELUzXRjQB2zg==}
+    engines: {node: '>=0.8'}
+    dev: false
+
   /json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
     dev: true
@@ -5141,7 +5253,6 @@ packages:
 
   /lodash.camelcase@4.3.0:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
-    dev: true
 
   /lodash.clamp@4.0.3:
     resolution: {integrity: sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg==}
@@ -5523,6 +5634,16 @@ packages:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
     dev: true
 
+  /n8ao@1.9.4(postprocessing@6.36.7)(three@0.171.0):
+    resolution: {integrity: sha512-gbpAorQecZn2oGK/rheHxPTNwOxVsEC6216+Jr9tXHUk9L5VCE2q/uxsSrQpfNkZDoCmQHf7oSg3SYFWCAt0wg==}
+    peerDependencies:
+      postprocessing: '>=6.30.0'
+      three: '>=0.137'
+    dependencies:
+      postprocessing: 6.36.7(three@0.171.0)
+      three: 0.171.0
+    dev: false
+
   /nanoevents@7.0.1:
     resolution: {integrity: sha512-o6lpKiCxLeijK4hgsqfR6CNToPyRU3keKyyI6uwuHRvpRTbZ0wXw51WRgyldVugZqoJfkGFrjrIenYH3bfEO3Q==}
     engines: {node: ^14.0.0 || ^16.0.0 || >=18.0.0}
@@ -6039,6 +6160,14 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /postprocessing@6.36.7(three@0.171.0):
+    resolution: {integrity: sha512-X6B3xt9dy4Osv19kqnVGqV01I2Tm7VwV6rLegRIZkZJPH3ozKLypHSBK1xKx7P/Ols++OkXe6L8dBGTaDUL5aw==}
+    peerDependencies:
+      three: '>= 0.157.0 < 0.174.0'
+    dependencies:
+      three: 0.171.0
+    dev: false
+
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -6493,7 +6622,7 @@ packages:
   /rxjs@7.8.1:
     resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
     dev: false
 
   /safe-array-concat@1.0.1:
@@ -7006,7 +7135,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       has-flag: 4.0.0
-    dev: true
 
   /supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
@@ -7032,6 +7160,14 @@ packages:
       tslib: 2.8.1
     dev: true
 
+  /table-layout@4.1.1:
+    resolution: {integrity: sha512-iK5/YhZxq5GO5z8wb0bY1317uDF3Zjpha0QFFLA8/trAoiLbQD0HUbMesEaxyzUgDxi2QlcbM8IvqOlEjgoXBA==}
+    engines: {node: '>=12.17'}
+    dependencies:
+      array-back: 6.2.2
+      wordwrapjs: 5.1.0
+    dev: false
+
   /temp-dir@2.0.0:
     resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
     engines: {node: '>=8'}
@@ -7080,6 +7216,10 @@ packages:
       - supports-color
     dev: false
 
+  /three@0.171.0:
+    resolution: {integrity: sha512-Y/lAXPaKZPcEdkKjh0JOAHVv8OOnv/NDJqm0wjfCzyQmfKxV7zvkwsnBgPBKTzJHToSOhRGQAGbPJObT59B/PQ==}
+    dev: false
+
   /through2@2.0.5:
     resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
     dependencies:
@@ -7207,13 +7347,8 @@ packages:
       typescript: 4.6.4
     dev: true
 
-  /tslib@2.6.2:
-    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
-    dev: false
-
   /tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
-    dev: true
 
   /type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
@@ -7353,6 +7488,16 @@ packages:
     hasBin: true
     dev: true
 
+  /typical@4.0.0:
+    resolution: {integrity: sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw==}
+    engines: {node: '>=8'}
+    dev: false
+
+  /typical@7.3.0:
+    resolution: {integrity: sha512-ya4mg/30vm+DOWfBg4YK3j2WD6TWtRkCbasOJr40CseYENzCUby/7rIvXA99JGsQHeNxLbnXdyLLxKSv3tauFw==}
+    engines: {node: '>=12.17'}
+    dev: false
+
   /ufo@1.3.2:
     resolution: {integrity: sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==}
     dev: true
@@ -7384,6 +7529,10 @@ packages:
       which-boxed-primitive: 1.1.1
     dev: true
 
+  /undici-types@6.19.8:
+    resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
+    dev: false
+
   /unescape-js@1.1.4:
     resolution: {integrity: sha512-42SD8NOQEhdYntEiUQdYq/1V/YHwr1HLwlHuTJB5InVVdOSbgI6xu8jK5q65yIzuFCfczzyDF/7hbGzVbyCw0g==}
     dependencies:
@@ -7881,6 +8030,11 @@ packages:
     resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
     dev: true
 
+  /wordwrapjs@5.1.0:
+    resolution: {integrity: sha512-JNjcULU2e4KJwUNv6CHgI46UvDGitb6dGryHajXTDiLgg1/RiGoPSDw4kZfYnwGtEXf2ZMeIewDQgFGzkCB2Sg==}
+    engines: {node: '>=12.17'}
+    dev: false
+
   /wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
diff --git a/src/compiler/_normalize-3d-spec.ts b/src/compiler/_normalize-3d-spec.ts
new file mode 100644
index 000000000..3c55603ad
--- /dev/null
+++ b/src/compiler/_normalize-3d-spec.ts
@@ -0,0 +1,48 @@
+import type { JoinTransform, Track } from '@gosling-lang/gosling-schema';
+
+/**
+ * Convert a 3D-specific spec into a generalized spec (i.e., moving 3D model data to the `join` transform)
+ */
+export function _fixTrackToWalkaround(t: Track) {
+    const { layout } = t;
+    if (typeof layout == 'object' && 'type' in layout && layout.type === 'spatial') {
+        // This means, we encountered a spatial layout track
+        const { model } = layout;
+        const [x, y, z] = model.xyz;
+        const { url, chromosome: chr, position: coord } = model;
+        // @ts-expect-error
+        t.spatial = {
+            x,
+            y,
+            z,
+            chr,
+            coord
+        };
+        const dataTransform: Omit<JoinTransform, 'to'> = {
+            type: 'join',
+            from: { url, chromosomeField: chr, genomicField: coord }
+        };
+        // TODO: need to support other data types as well
+        let to: JoinTransform['to'];
+        if (t.data?.type === 'bigwig') {
+            to = { startField: 'start', endField: 'end' };
+        } else if (t.data?.type === 'csv') {
+            // TODO: Not the reliable way to select two data fields corresponding to start and end positions
+            const startField = t.data.genomicFields?.[0] ?? 'unknown';
+            const endField = t.data.genomicFields?.[1] ?? undefined;
+            to = { startField, endField };
+        }
+
+        // @ts-expect-error
+        t.dataTransform = [{ ...dataTransform, to }, ...(t.dataTransform ?? [])];
+        t.layout = 'spatial';
+    } else if (typeof layout == 'object') {
+        t.layout = layout.type;
+    }
+
+    // @ts-expect-error
+    if (t.locus && !t.x) {
+        // @ts-expect-error
+        t.x = { ...t.locus, type: 'genomic' };
+    }
+}
diff --git a/src/compiler/spec-preprocess.ts b/src/compiler/spec-preprocess.ts
index 70f3d3ad8..b18a23664 100644
--- a/src/compiler/spec-preprocess.ts
+++ b/src/compiler/spec-preprocess.ts
@@ -29,6 +29,7 @@ import {
 import { spreadTracksByData } from '../core/utils/overlay';
 import { getStyleOverridden } from '../core/utils/style';
 import { uuid } from '../core/utils/uuid';
+import { _fixTrackToWalkaround } from './_normalize-3d-spec';
 
 /**
  * Traverse individual tracks and call the callback function to read and/or update the track definition.
@@ -255,6 +256,9 @@ export function traverseToFixSpecDownstream(spec: GoslingSpec | SingleView, pare
             if (track.static === undefined) track.static = spec.static !== undefined ? spec.static : false;
             if (!track.zoomLimits) track.zoomLimits = spec.zoomLimits;
 
+            // Convert a 3D-specific spec into a generalized spec (i.e., moving 3D model data to the `join` transform)
+            _fixTrackToWalkaround(track);
+
             /**
              * Dummy track can't have a circular layout
              */
diff --git a/src/core/utils/assembly.ts b/src/core/utils/assembly.ts
index 34b544b5d..316312c78 100644
--- a/src/core/utils/assembly.ts
+++ b/src/core/utils/assembly.ts
@@ -6,7 +6,8 @@ import {
     CHROM_SIZE_HG19,
     CHROM_SIZE_HG38,
     CHROM_SIZE_MM10,
-    CHROM_SIZE_MM9
+    CHROM_SIZE_MM9,
+    CHROM_SIZE_SACCER3
 } from './chrom-size';
 
 export interface ChromSize {
@@ -138,6 +139,12 @@ const CRHOM_SIZES: { [assembly: string]: ChromSize } = Object.freeze({
         total: getChromTotalSize(CHROM_SIZE_MM9),
         path: basePath('mm9')
     },
+    sacCer3: {
+        size: CHROM_SIZE_SACCER3,
+        interval: getChromInterval(CHROM_SIZE_SACCER3),
+        total: getChromTotalSize(CHROM_SIZE_SACCER3),
+        path: 'https://gosling-lang.s3.us-east-1.amazonaws.com/data/sacCer3.chrom.sizes'
+    },
     // `unknown` assembly contains only one chromosome with max length
     unknown: {
         size: { chr: Number.MAX_VALUE },
@@ -213,7 +220,11 @@ export function parseGenomicPosition(position: string): { chromosome: string; st
  * A class that consistently manage and convert genomics positions.
  */
 export class GenomicPositionHelper {
-    constructor(public chromosome: string, public start?: number, public end?: number) {}
+    constructor(
+        public chromosome: string,
+        public start?: number,
+        public end?: number
+    ) { }
     static fromString(str: string) {
         const result = parseGenomicPosition(str);
         return new GenomicPositionHelper(result.chromosome, result.start, result.end);
diff --git a/src/core/utils/chrom-size.ts b/src/core/utils/chrom-size.ts
index 642871dea..123cdbc3b 100644
--- a/src/core/utils/chrom-size.ts
+++ b/src/core/utils/chrom-size.ts
@@ -187,6 +187,25 @@ export const CHROM_SIZE_MM9 = {
     chrM: 16299
 };
 
+export const CHROM_SIZE_SACCER3 = {
+    chrI: 230218,
+    chrII: 813184,
+    chrIII: 316620,
+    chrIV: 1531933,
+    chrV: 576874,
+    chrVI: 270161,
+    chrVII: 1090940,
+    chrVIII: 562643,
+    chrIX: 439888,
+    chrX: 745751,
+    chrXI: 666816,
+    chrXII: 1078177,
+    chrXIII: 924431,
+    chrXIV: 784333,
+    chrXV: 1091291,
+    chrXVI: 948066
+};
+
 export type Chromosome =
     | '1'
     | '2'
diff --git a/src/core/utils/data-transform.ts b/src/core/utils/data-transform.ts
index a1ed4220d..3a521bb99 100644
--- a/src/core/utils/data-transform.ts
+++ b/src/core/utils/data-transform.ts
@@ -12,7 +12,9 @@ import type {
     SvTypeTransform,
     CoverageTransform,
     DisplaceTransform,
-    JsonParseTransform
+    JsonParseTransform,
+    JoinTransform,
+    DataTransform
 } from '@gosling-lang/gosling-schema';
 import {
     getChannelKeysByAggregateFnc,
@@ -23,7 +25,38 @@ import {
     IsRangeFilter
 } from '@gosling-lang/gosling-schema';
 import { computeChromSizes } from './assembly';
-// import Logging from './log';
+import { dsvFormat } from 'd3-dsv';
+import type { Scale } from '@higlass/services';
+
+/**
+ * Apply data transformation.
+ */
+export async function transform(t: DataTransform, data: Datum[], xScale?: Scale, assembly?: Assembly) {
+    switch (t.type) {
+        case 'filter':
+            return filterData(t, data);
+        case 'join':
+            return await joinData(t, data, assembly);
+        case 'concat':
+            return concatString(t, data);
+        case 'replace':
+            return replaceString(t, data);
+        case 'log':
+            return calculateData(t, data);
+        case 'exonSplit':
+            return splitExon(t, data, assembly);
+        case 'genomicLength':
+            return calculateGenomicLength(t, data);
+        case 'svType':
+            return inferSvType(t, data);
+        case 'coverage':
+            return aggregateCoverage(t, data, xScale);
+        case 'subjson':
+            return parseSubJSON(t, data);
+        case 'displace':
+            return displace(t, data, xScale);
+    }
+}
 
 /**
  * Apply filter
@@ -52,6 +85,51 @@ export function filterData(filter: FilterTransform, data: Datum[]): Datum[] {
     return output;
 }
 
+// TODO: cache already transformed data as well
+// XXX: naive caching from a random place
+const FETCH_CACHE: Record<string, Datum[]> = {};
+
+/**
+ * Load a CSV file, and join it to the existing data.
+ */
+export async function joinData(
+    transform: JoinTransform,
+    toData: Datum[],
+    assembly: Assembly = 'hg19'
+): Promise<Datum[]> {
+    const { from, to } = transform;
+    const fetchDataIfNeeded = async (url: string) => {
+        if (FETCH_CACHE[url]) return FETCH_CACHE[url];
+        const response = await fetch(url);
+        const text = await response.text();
+        const data = dsvFormat(',').parse(text) as Datum[];
+        const chromSizes = computeChromSizes(assembly);
+        for (const d of data) {
+            const chrName = d[from.chromosomeField];
+            const chromPosition = d[from.genomicField];
+            d[from.genomicField] = (chromSizes.interval[chrName]?.[0] ?? 0) + +chromPosition;
+        }
+        FETCH_CACHE[url] = data;
+        return data;
+    };
+    const fromData = await fetchDataIfNeeded(from.url);
+    // a very naive approach to join two files
+    const joinned: Datum[] = fromData.map(f => {
+        // TODO: to be most accurate, need to find all data records matching and aggregate data
+        const found = toData.find(t => {
+            if (to.endField) {
+                const start = +t[to.startField] <= +f[from.genomicField];
+                const end = +t[to.endField] >= +f[from.genomicField];
+                return start && end;
+            } else {
+                return +t[to.startField] == +f[from.genomicField];
+            }
+        }) ?? { value: 0 };
+        return { ...f, ...found };
+    });
+    return joinned;
+}
+
 /**
  * Calculate new data, like log transformation.
  */
diff --git a/src/core/utils/overlay.ts b/src/core/utils/overlay.ts
index 1db0651bf..c37a794fe 100644
--- a/src/core/utils/overlay.ts
+++ b/src/core/utils/overlay.ts
@@ -26,7 +26,7 @@ export function resolveSuperposedTracks(track: Track): SingleTrack[] {
 
     if (!IsOverlaidTrack(track)) {
         // no `superpose` to resolve
-        return [track];
+        return [track] as [SingleTrack];
     }
 
     if (track._overlay.length === 0) {
diff --git a/src/gosling-schema/gosling.schema.json b/src/gosling-schema/gosling.schema.json
index 8e253969e..911df10be 100644
--- a/src/gosling-schema/gosling.schema.json
+++ b/src/gosling-schema/gosling.schema.json
@@ -42,6 +42,10 @@
           "const": "mm9",
           "type": "string"
         },
+        {
+          "const": "sacCer3",
+          "type": "string"
+        },
         {
           "const": "unknown",
           "type": "string"
@@ -367,6 +371,112 @@
       },
       "type": "array"
     },
+    "ChromospaceTrack": {
+      "additionalProperties": false,
+      "properties": {
+        "_invalidTrack": {
+          "description": "internal",
+          "type": "boolean"
+        },
+        "assembly": {
+          "$ref": "#/definitions/Assembly",
+          "description": "A string that specifies the genome builds to use. Currently support `\"hg38\"`, `\"hg19\"`, `\"hg18\"`, `\"hg17\"`, `\"hg16\"`, `\"mm10\"`, `\"mm9\"`, and `\"unknown\"`.\n\n__Note:__: with `\"unknown\"` assembly, genomic axes do not show chrN: in labels."
+        },
+        "color": {
+          "type": "string"
+        },
+        "data3D": {
+          "type": "string"
+        },
+        "height": {
+          "description": "Specify the track height in pixels.",
+          "type": "number"
+        },
+        "id": {
+          "description": "Assigned to `uid` in a HiGlass view config, used for API and caching.",
+          "type": "string"
+        },
+        "layout": {
+          "const": "spatial",
+          "type": "string"
+        },
+        "orientation": {
+          "$ref": "#/definitions/Orientation",
+          "description": "Specify the orientation."
+        },
+        "overlayOnPreviousTrack": {
+          "const": false,
+          "type": "boolean"
+        },
+        "spatial": {
+          "additionalProperties": false,
+          "properties": {
+            "chr": {
+              "type": "string"
+            },
+            "coord": {
+              "type": "string"
+            },
+            "x": {
+              "type": "string"
+            },
+            "y": {
+              "type": "string"
+            },
+            "z": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "x",
+            "y",
+            "z",
+            "chr",
+            "coord"
+          ],
+          "type": "object"
+        },
+        "static": {
+          "description": "Whether to disable [Zooming and Panning](http://gosling-lang.org/docs/user-interaction#zooming-and-panning), __Default:__ `false`.",
+          "type": "boolean"
+        },
+        "style": {
+          "additionalProperties": {
+            "type": [
+              "string",
+              "number"
+            ]
+          },
+          "type": "object"
+        },
+        "test": {
+          "type": "string"
+        },
+        "title": {
+          "description": "If defined, will show the textual label on the left-top corner of a track.",
+          "type": "string"
+        },
+        "width": {
+          "description": "Specify the track width in pixels.",
+          "type": "number"
+        },
+        "zoomLimits": {
+          "items": {
+            "type": "null"
+          },
+          "maxItems": 2,
+          "minItems": 2,
+          "type": "array"
+        }
+      },
+      "required": [
+        "color",
+        "test",
+        "data3D",
+        "spatial"
+      ],
+      "type": "object"
+    },
     "Color": {
       "additionalProperties": false,
       "properties": {
@@ -564,6 +674,9 @@
         {
           "$ref": "#/definitions/FilterTransform"
         },
+        {
+          "$ref": "#/definitions/JoinTransform"
+        },
         {
           "$ref": "#/definitions/StrConcatTransform"
         },
@@ -1152,6 +1265,16 @@
               "description": "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
               "type": "string"
             },
+            "locus": {
+              "anyOf": [
+                {
+                  "$ref": "#/definitions/X"
+                },
+                {
+                  "$ref": "#/definitions/ChannelValue"
+                }
+              ]
+            },
             "mark": {
               "$ref": "#/definitions/Mark"
             },
@@ -1305,6 +1428,16 @@
                         "description": "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
                         "type": "string"
                       },
+                      "locus": {
+                        "anyOf": [
+                          {
+                            "$ref": "#/definitions/X"
+                          },
+                          {
+                            "$ref": "#/definitions/ChannelValue"
+                          }
+                        ]
+                      },
                       "mark": {
                         "$ref": "#/definitions/Mark"
                       },
@@ -1922,6 +2055,16 @@
               "description": "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
               "type": "string"
             },
+            "locus": {
+              "anyOf": [
+                {
+                  "$ref": "#/definitions/X"
+                },
+                {
+                  "$ref": "#/definitions/ChannelValue"
+                }
+              ]
+            },
             "mark": {
               "$ref": "#/definitions/Mark"
             },
@@ -2075,6 +2218,16 @@
                         "description": "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
                         "type": "string"
                       },
+                      "locus": {
+                        "anyOf": [
+                          {
+                            "$ref": "#/definitions/X"
+                          },
+                          {
+                            "$ref": "#/definitions/ChannelValue"
+                          }
+                        ]
+                      },
                       "mark": {
                         "$ref": "#/definitions/Mark"
                       },
@@ -2749,6 +2902,16 @@
                         "description": "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
                         "type": "string"
                       },
+                      "locus": {
+                        "anyOf": [
+                          {
+                            "$ref": "#/definitions/X"
+                          },
+                          {
+                            "$ref": "#/definitions/ChannelValue"
+                          }
+                        ]
+                      },
                       "mark": {
                         "$ref": "#/definitions/Mark"
                       },
@@ -3402,6 +3565,59 @@
       ],
       "type": "object"
     },
+    "JoinTransform": {
+      "additionalProperties": false,
+      "description": "Join new data to the existing data. The data will be combined based on the overlap of genomic positions. The data will join _right_ to the new data (e.g., BigWig --> 3D Model).",
+      "properties": {
+        "from": {
+          "additionalProperties": false,
+          "description": "The new data to be combined, e.g., 3D Model",
+          "properties": {
+            "chromosomeField": {
+              "type": "string"
+            },
+            "genomicField": {
+              "type": "string"
+            },
+            "url": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "url",
+            "chromosomeField",
+            "genomicField"
+          ],
+          "type": "object"
+        },
+        "to": {
+          "additionalProperties": false,
+          "description": "The existing data to be updated, e.g., BigWig",
+          "properties": {
+            "endField": {
+              "type": "string"
+            },
+            "startField": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "startField"
+          ],
+          "type": "object"
+        },
+        "type": {
+          "const": "join",
+          "type": "string"
+        }
+      },
+      "required": [
+        "type",
+        "to",
+        "from"
+      ],
+      "type": "object"
+    },
     "JsonData": {
       "additionalProperties": false,
       "description": "The JSON data format allows users to include data directly in the Gosling's JSON specification.",
@@ -3498,11 +3714,91 @@
       "type": "object"
     },
     "Layout": {
-      "enum": [
-        "linear",
-        "circular"
-      ],
-      "type": "string"
+      "anyOf": [
+        {
+          "const": "linear",
+          "type": "string"
+        },
+        {
+          "const": "circular",
+          "type": "string"
+        },
+        {
+          "const": "spatial",
+          "type": "string"
+        },
+        {
+          "$ref": "#/definitions/LayoutDeep"
+        }
+      ]
+    },
+    "LayoutDeep": {
+      "anyOf": [
+        {
+          "additionalProperties": false,
+          "properties": {
+            "type": {
+              "enum": [
+                "linear",
+                "circular"
+              ],
+              "type": "string"
+            }
+          },
+          "required": [
+            "type"
+          ],
+          "type": "object"
+        },
+        {
+          "additionalProperties": false,
+          "properties": {
+            "model": {
+              "additionalProperties": false,
+              "properties": {
+                "chromosome": {
+                  "type": "string"
+                },
+                "position": {
+                  "type": "string"
+                },
+                "type": {
+                  "const": "csv",
+                  "type": "string"
+                },
+                "url": {
+                  "type": "string"
+                },
+                "xyz": {
+                  "items": {
+                    "type": "string"
+                  },
+                  "maxItems": 3,
+                  "minItems": 3,
+                  "type": "array"
+                }
+              },
+              "required": [
+                "type",
+                "url",
+                "xyz",
+                "chromosome",
+                "position"
+              ],
+              "type": "object"
+            },
+            "type": {
+              "const": "spatial",
+              "type": "string"
+            }
+          },
+          "required": [
+            "type",
+            "model"
+          ],
+          "type": "object"
+        }
+      ]
     },
     "LogBase": {
       "anyOf": [
@@ -3572,7 +3868,10 @@
         "triangleRight",
         "triangleBottom",
         "brush",
-        "_header"
+        "_header",
+        "sphere",
+        "box",
+        "octahedron"
       ],
       "type": "string"
     },
@@ -3983,6 +4282,16 @@
                 "description": "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
                 "type": "string"
               },
+              "locus": {
+                "anyOf": [
+                  {
+                    "$ref": "#/definitions/X"
+                  },
+                  {
+                    "$ref": "#/definitions/ChannelValue"
+                  }
+                ]
+              },
               "mark": {
                 "$ref": "#/definitions/Mark"
               },
@@ -4310,6 +4619,16 @@
           "description": "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
           "type": "string"
         },
+        "locus": {
+          "anyOf": [
+            {
+              "$ref": "#/definitions/X"
+            },
+            {
+              "$ref": "#/definitions/ChannelValue"
+            }
+          ]
+        },
         "mark": {
           "$ref": "#/definitions/Mark"
         },
@@ -4667,6 +4986,16 @@
           "description": "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
           "type": "string"
         },
+        "locus": {
+          "anyOf": [
+            {
+              "$ref": "#/definitions/X"
+            },
+            {
+              "$ref": "#/definitions/ChannelValue"
+            }
+          ]
+        },
         "mark": {
           "$ref": "#/definitions/Mark"
         },
@@ -5034,6 +5363,16 @@
                 "description": "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
                 "type": "string"
               },
+              "locus": {
+                "anyOf": [
+                  {
+                    "$ref": "#/definitions/X"
+                  },
+                  {
+                    "$ref": "#/definitions/ChannelValue"
+                  }
+                ]
+              },
               "mark": {
                 "$ref": "#/definitions/Mark"
               },
@@ -5309,12 +5648,18 @@
             },
             {
               "$ref": "#/definitions/ChannelValue"
+            },
+            {
+              "type": "string"
             }
           ]
         },
         "data": {
           "$ref": "#/definitions/DataDeep"
         },
+        "data3D": {
+          "type": "string"
+        },
         "dataTransform": {
           "items": {
             "$ref": "#/definitions/DataTransform"
@@ -5379,6 +5724,10 @@
               "const": "linear",
               "description": "Only linear layout are supported at this time",
               "type": "string"
+            },
+            {
+              "const": "spatial",
+              "type": "string"
             }
           ],
           "description": "Specify the layout type of all tracks."
@@ -5387,6 +5736,16 @@
           "description": "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
           "type": "string"
         },
+        "locus": {
+          "anyOf": [
+            {
+              "$ref": "#/definitions/X"
+            },
+            {
+              "$ref": "#/definitions/ChannelValue"
+            }
+          ]
+        },
         "mark": {
           "$ref": "#/definitions/Mark"
         },
@@ -5419,7 +5778,15 @@
           "type": "number"
         },
         "overlayOnPreviousTrack": {
-          "type": "boolean"
+          "anyOf": [
+            {
+              "type": "boolean"
+            },
+            {
+              "const": false,
+              "type": "boolean"
+            }
+          ]
         },
         "row": {
           "anyOf": [
@@ -5445,6 +5812,34 @@
           "description": "The size of the gap (1) between tracks, (2) between views, and (3) of the origin of circular tracks. The effect of this property depends on where on the spec you specify the `spacing`.\n\nIn a linear layout, this value is used in pixels, while in a circular layout, this value is used relative to the height of the tracks or views.",
           "type": "number"
         },
+        "spatial": {
+          "additionalProperties": false,
+          "properties": {
+            "chr": {
+              "type": "string"
+            },
+            "coord": {
+              "type": "string"
+            },
+            "x": {
+              "type": "string"
+            },
+            "y": {
+              "type": "string"
+            },
+            "z": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "x",
+            "y",
+            "z",
+            "chr",
+            "coord"
+          ],
+          "type": "object"
+        },
         "startAngle": {
           "description": "Specify the start angle (in the range of [0, 360]) of circular tracks (`{\"layout\": \"circular\"}`).",
           "type": "number"
@@ -5495,6 +5890,15 @@
             {
               "$ref": "#/definitions/DummyTrackStyle",
               "description": "Defines how the track is styled"
+            },
+            {
+              "additionalProperties": {
+                "type": [
+                  "string",
+                  "number"
+                ]
+              },
+              "type": "object"
             }
           ],
           "description": "Define the [style](http://gosling-lang.org/docs/visual-channel#style-related-properties) of multive views. Will be overwritten by the style of children elements (e.g., view, track)."
@@ -5505,6 +5909,9 @@
         "template": {
           "type": "string"
         },
+        "test": {
+          "type": "string"
+        },
         "text": {
           "anyOf": [
             {
@@ -5673,6 +6080,14 @@
               "maxItems": 2,
               "minItems": 2,
               "type": "array"
+            },
+            {
+              "items": {
+                "type": "null"
+              },
+              "maxItems": 2,
+              "minItems": 2,
+              "type": "array"
             }
           ]
         }
@@ -5923,6 +6338,16 @@
           "description": "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
           "type": "string"
         },
+        "locus": {
+          "anyOf": [
+            {
+              "$ref": "#/definitions/X"
+            },
+            {
+              "$ref": "#/definitions/ChannelValue"
+            }
+          ]
+        },
         "mark": {
           "$ref": "#/definitions/Mark"
         },
@@ -6283,6 +6708,16 @@
               "description": "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
               "type": "string"
             },
+            "locus": {
+              "anyOf": [
+                {
+                  "$ref": "#/definitions/X"
+                },
+                {
+                  "$ref": "#/definitions/ChannelValue"
+                }
+              ]
+            },
             "mark": {
               "$ref": "#/definitions/Mark"
             },
@@ -6432,6 +6867,16 @@
                         "description": "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
                         "type": "string"
                       },
+                      "locus": {
+                        "anyOf": [
+                          {
+                            "$ref": "#/definitions/X"
+                          },
+                          {
+                            "$ref": "#/definitions/ChannelValue"
+                          }
+                        ]
+                      },
                       "mark": {
                         "$ref": "#/definitions/Mark"
                       },
@@ -7046,6 +7491,16 @@
               "description": "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
               "type": "string"
             },
+            "locus": {
+              "anyOf": [
+                {
+                  "$ref": "#/definitions/X"
+                },
+                {
+                  "$ref": "#/definitions/ChannelValue"
+                }
+              ]
+            },
             "mark": {
               "$ref": "#/definitions/Mark"
             },
@@ -7195,6 +7650,16 @@
                         "description": "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
                         "type": "string"
                       },
+                      "locus": {
+                        "anyOf": [
+                          {
+                            "$ref": "#/definitions/X"
+                          },
+                          {
+                            "$ref": "#/definitions/ChannelValue"
+                          }
+                        ]
+                      },
                       "mark": {
                         "$ref": "#/definitions/Mark"
                       },
@@ -7862,6 +8327,16 @@
                         "description": "Specify an ID for [linking multiple views](http://gosling-lang.org/docs/user-interaction#linking-views)",
                         "type": "string"
                       },
+                      "locus": {
+                        "anyOf": [
+                          {
+                            "$ref": "#/definitions/X"
+                          },
+                          {
+                            "$ref": "#/definitions/ChannelValue"
+                          }
+                        ]
+                      },
                       "mark": {
                         "$ref": "#/definitions/Mark"
                       },
@@ -8902,6 +9377,9 @@
         },
         {
           "$ref": "#/definitions/DummyTrack"
+        },
+        {
+          "$ref": "#/definitions/ChromospaceTrack"
         }
       ]
     },
diff --git a/src/gosling-schema/gosling.schema.ts b/src/gosling-schema/gosling.schema.ts
index f45ea18ac..7f5b04ade 100644
--- a/src/gosling-schema/gosling.schema.ts
+++ b/src/gosling-schema/gosling.schema.ts
@@ -80,12 +80,24 @@ export type ResponsiveSpecOfMultipleViews = {
     }[];
 };
 
-export type Layout = 'linear' | 'circular';
+export type Layout = 'linear' | 'circular' | 'spatial' | LayoutDeep;
+export type LayoutDeep =
+    | { type: 'linear' | 'circular' }
+    | {
+        type: 'spatial';
+        model: {
+            type: 'csv';
+            url: string;
+            xyz: [string, string, string];
+            chromosome: string;
+            position: string;
+        };
+    };
 export type Orientation = 'horizontal' | 'vertical';
 
 /** Custom chromosome sizes, e.g., [["foo", 1000], ["bar", 300], ["baz", 240]] */
 export type ChromSizes = [string, number][];
-export type Assembly = 'hg38' | 'hg19' | 'hg18' | 'hg17' | 'hg16' | 'mm10' | 'mm9' | 'unknown' | ChromSizes;
+export type Assembly = 'hg38' | 'hg19' | 'hg18' | 'hg17' | 'hg16' | 'mm10' | 'mm9' | 'sacCer3' | 'unknown' | ChromSizes;
 export type ZoomLimits = [number | null, number | null];
 
 export interface CommonViewDef {
@@ -154,7 +166,7 @@ export interface CommonViewDef {
 }
 
 /* ----------------------------- TRACK ----------------------------- */
-export type Track = SingleTrack | OverlaidTrack | TemplateTrack | DummyTrack;
+export type Track = SingleTrack | OverlaidTrack | TemplateTrack | DummyTrack | ChromospaceTrack;
 
 export interface CommonTrackDef extends CommonViewDef {
     /** Assigned to `uid` in a HiGlass view config, used for API and caching. */
@@ -197,6 +209,31 @@ export interface CommonTrackDef extends CommonViewDef {
     _invalidTrack?: boolean; // flag to ignore rendering certain tracks if they have problems // !!! TODO: add tests
 }
 
+export interface ChromospaceTrack
+    extends Pick<
+        CommonTrackDef,
+        'width' | 'height' | 'id' | 'title' | '_invalidTrack' | 'orientation' | 'static' | 'assembly'
+    > {
+    //type: '3D';
+    color: string; //~ just testing
+    test: string;
+    data3D: string;
+    spatial: {
+        x: string;
+        y: string;
+        z: string;
+        chr: string;
+        coord: string;
+    };
+
+    // Some properties added just to be consistent with our track types.
+    // These make type checking less complicated during compiling, but certainly this can be removed/changed reflecting on the use cases.
+    layout?: 'spatial'; // internal property
+    overlayOnPreviousTrack?: false; // internal property
+    style?: { [key: string]: string | number }; // Any style-related properties to support?
+    zoomLimits?: [null, null]; // This determines whether users can zoom ifinitely or not. Unused at the moment.
+}
+
 /**
  * A placeholder track. In contrast to other tracks, this track does not display any data. Instead it provides
  * empty space for third party tools to display their data on top of.
@@ -261,7 +298,11 @@ export type Mark =
     | 'triangleBottom'
     | 'brush'
     // The _header mark is used internally for text tracks
-    | '_header';
+    | '_header'
+    // Spatial track
+    | 'sphere'
+    | 'box'
+    | 'octahedron';
 
 /* ----------------------------- API & MOUSE EVENTS ----------------------------- */
 interface CommonEventData {
@@ -459,6 +500,9 @@ export interface Encoding {
 
     row?: Row | ChannelValue;
 
+    // For 3D, conceptually identical to `x` in the linear layout
+    locus?: X | ChannelValue;
+
     color?: Color | ChannelValue;
     size?: Size | ChannelValue;
     text?: Text | ChannelValue;
@@ -1257,6 +1301,7 @@ export interface MatrixData {
 
 export type DataTransform =
     | FilterTransform
+    | JoinTransform
     | StrConcatTransform
     | StrReplaceTransform
     | LogTransform
@@ -1310,6 +1355,26 @@ export interface ComparisonFilter extends CommonFilterTransform {
     not: undefined; // Not used
 }
 
+/**
+ * Join new data to the existing data.
+ * The data will be combined based on the overlap of genomic positions.
+ * The data will join _right_ to the new data (e.g., BigWig --> 3D Model).
+ */
+export interface JoinTransform {
+    type: 'join';
+    /** The existing data to be updated, e.g., BigWig */
+    to: {
+        startField: string;
+        endField?: string;
+    };
+    /** The new data to be combined, e.g., 3D Model */
+    from: {
+        url: string;
+        chromosomeField: string;
+        genomicField: string;
+    };
+}
+
 export type LogBase = number | 'e';
 export interface LogTransform {
     type: 'log';
diff --git a/src/gosling-schema/template.schema.json b/src/gosling-schema/template.schema.json
index 544893950..b7f2cdce4 100644
--- a/src/gosling-schema/template.schema.json
+++ b/src/gosling-schema/template.schema.json
@@ -42,6 +42,10 @@
           "const": "mm9",
           "type": "string"
         },
+        {
+          "const": "sacCer3",
+          "type": "string"
+        },
         {
           "const": "unknown",
           "type": "string"
@@ -639,6 +643,27 @@
           ],
           "type": "object"
         },
+        "from": {
+          "additionalProperties": false,
+          "description": "The new data to be combined, e.g., 3D Model",
+          "properties": {
+            "chromosomeField": {
+              "type": "string"
+            },
+            "genomicField": {
+              "type": "string"
+            },
+            "url": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "url",
+            "chromosomeField",
+            "genomicField"
+          ],
+          "type": "object"
+        },
         "genomicField": {
           "description": "Relative genomic position to parse.",
           "type": "string"
@@ -734,9 +759,26 @@
         "startField": {
           "type": "string"
         },
+        "to": {
+          "additionalProperties": false,
+          "description": "The existing data to be updated, e.g., BigWig",
+          "properties": {
+            "endField": {
+              "type": "string"
+            },
+            "startField": {
+              "type": "string"
+            }
+          },
+          "required": [
+            "startField"
+          ],
+          "type": "object"
+        },
         "type": {
           "enum": [
             "filter",
+            "join",
             "concat",
             "replace",
             "log",
@@ -924,7 +966,10 @@
         "triangleRight",
         "triangleBottom",
         "brush",
-        "_header"
+        "_header",
+        "sphere",
+        "box",
+        "octahedron"
       ],
       "type": "string"
     },
diff --git a/src/tracks/gosling-track/data-abstraction.ts b/src/tracks/gosling-track/data-abstraction.ts
index 684123d55..af1e29fd1 100644
--- a/src/tracks/gosling-track/data-abstraction.ts
+++ b/src/tracks/gosling-track/data-abstraction.ts
@@ -35,8 +35,8 @@ export function getTabularData(
         const bin = spec.data.binSize ?? 1;
 
         const numericValues = data.dense;
-        const numOfGenomicPositions = data.tileSize;
-        const tileUnitSize = data.tileWidth / data.tileSize;
+        const numOfGenomicPositions = data.tileSize ?? data.dense.length;
+        const tileUnitSize = (data.tileWidth ?? 1024) / numOfGenomicPositions;
 
         const valueName = spec.data.value ?? 'value';
         const columnName = spec.data.column ?? 'position';
@@ -62,9 +62,9 @@ export function getTabularData(
                 const value = numericValues[j] / (agg === 'mean' ? tileUnitSize : 1);
                 tabularData.push({
                     [valueName]: value,
-                    [columnName]: data.tileX + (j + 0.5) * tileUnitSize,
-                    [startName]: data.tileX + j * tileUnitSize,
-                    [endName]: data.tileX + (j + 1) * tileUnitSize,
+                    [columnName]: (data.tileX ?? 0) + (j + 0.5) * tileUnitSize,
+                    [startName]: (data.tileX ?? 0) + j * tileUnitSize,
+                    [endName]: (data.tileX ?? 0) + (j + 1) * tileUnitSize,
                     [minValueName]: value,
                     [maxValueName]: value
                 });
diff --git a/src/tracks/gosling-track/gosling-track.ts b/src/tracks/gosling-track/gosling-track.ts
index 2684bfc39..c22c7fa85 100644
--- a/src/tracks/gosling-track/gosling-track.ts
+++ b/src/tracks/gosling-track/gosling-track.ts
@@ -25,18 +25,7 @@ import { validateTrack } from '@gosling-lang/gosling-schema';
 import { shareScaleAcrossTracks } from '../../core/utils/scales';
 import { resolveSuperposedTracks } from '../../core/utils/overlay';
 import colorToHex from '../../core/utils/color-to-hex';
-import {
-    aggregateCoverage,
-    calculateData,
-    concatString,
-    displace,
-    filterData,
-    calculateGenomicLength,
-    parseSubJSON,
-    replaceString,
-    splitExon,
-    inferSvType
-} from '../../core/utils/data-transform';
+import { transform } from '../../core/utils/data-transform';
 import { publish } from '../../api/pubsub';
 import { getRelativeGenomicPosition } from '../../core/utils/assembly';
 import { getTextStyle } from '../../core/utils/text-style';
@@ -560,18 +549,23 @@ export class GoslingTrackClass extends TiledPixiTrack<Tile, GoslingTrackOptions>
         this.combineAllTilesIfNeeded();
 
         // apply data transforms to the tabular data and generate track models
-        const models = tiles.flatMap(tile => this.transformDataAndCreateModels(tile));
+        Promise.all(tiles.flatMap(tile => this.transformDataAndCreateModels(tile))).then(n => {
+            const models = n.flat();
 
-        shareScaleAcrossTracks(models);
+            shareScaleAcrossTracks(models);
 
-        const flatTileData = ([] as Datum[]).concat(...models.map(d => d.data()));
-        if (flatTileData.length !== 0) {
-            this.options.siblingIds.forEach(id => publish('rawData', { id, data: flatTileData }));
-        }
+            const flatTileData = ([] as Datum[]).concat(...models.map(d => d.data()));
+            if (flatTileData.length !== 0) {
+                this.options.siblingIds.forEach(id => publish('rawData', { id, data: flatTileData }));
+            }
 
-        // Record processed tiles so that we don't process them again
-        tiles.forEach(tile => {
-            this.#processedTileMap.set(tile, true);
+            // Record processed tiles so that we don't process them again
+            tiles.forEach(tile => {
+                this.#processedTileMap.set(tile, true);
+            });
+
+            this.draw();
+            this.forceDraw();
         });
     }
 
@@ -820,7 +814,7 @@ export class GoslingTrackClass extends TiledPixiTrack<Tile, GoslingTrackOptions>
         // https://github.com/higlass/higlass/blob/38f0c4415f0595c3b9d685a754d6661dc9612f7c/app/scripts/TiledPixiTrack.js#L637
         super.receivedTiles(loadedTiles);
         // some items in this.fetching are removed
-        if (!isTabularDataFetcher(this.dataFetcher)) {
+        if (isTabularDataFetcher(this.dataFetcher)) {
             this.drawLoadingCue();
         }
     }
@@ -830,7 +824,7 @@ export class GoslingTrackClass extends TiledPixiTrack<Tile, GoslingTrackOptions>
      */
     override removeOldTiles() {
         super.removeOldTiles(); // some items are added to this.fetching
-        if (!isTabularDataFetcher(this.dataFetcher)) {
+        if (isTabularDataFetcher(this.dataFetcher)) {
             this.drawLoadingCue();
         }
     }
@@ -981,7 +975,7 @@ export class GoslingTrackClass extends TiledPixiTrack<Tile, GoslingTrackOptions>
     /**
      * Apply data transformation to each of the overlaid tracks and generate GoslingTrackModels.
      */
-    transformDataAndCreateModels(tile: Tile) {
+    async transformDataAndCreateModels(tile: Tile) {
         const tileInfo = this.#processedTileInfo[tile.tileId];
 
         if (!tileInfo || tileInfo.skipRendering) {
@@ -994,42 +988,16 @@ export class GoslingTrackClass extends TiledPixiTrack<Tile, GoslingTrackOptions>
         tileInfo.goslingModels = [];
 
         const resolvedTracks = this.getResolvedTracks();
-        resolvedTracks.forEach(resolvedSpec => {
-            let tabularDataTransformed = Array.from(tileInfo.tabularData);
-            resolvedSpec.dataTransform?.forEach(t => {
-                switch (t.type) {
-                    case 'filter':
-                        tabularDataTransformed = filterData(t, tabularDataTransformed);
-                        break;
-                    case 'concat':
-                        tabularDataTransformed = concatString(t, tabularDataTransformed);
-                        break;
-                    case 'replace':
-                        tabularDataTransformed = replaceString(t, tabularDataTransformed);
-                        break;
-                    case 'log':
-                        tabularDataTransformed = calculateData(t, tabularDataTransformed);
-                        break;
-                    case 'exonSplit':
-                        tabularDataTransformed = splitExon(t, tabularDataTransformed, resolvedSpec.assembly);
-                        break;
-                    case 'genomicLength':
-                        tabularDataTransformed = calculateGenomicLength(t, tabularDataTransformed);
-                        break;
-                    case 'svType':
-                        tabularDataTransformed = inferSvType(t, tabularDataTransformed);
-                        break;
-                    case 'coverage':
-                        tabularDataTransformed = aggregateCoverage(t, tabularDataTransformed, this._xScale.copy());
-                        break;
-                    case 'subjson':
-                        tabularDataTransformed = parseSubJSON(t, tabularDataTransformed);
-                        break;
-                    case 'displace':
-                        tabularDataTransformed = displace(t, tabularDataTransformed, this._xScale.copy());
-                        break;
-                }
-            });
+        for (const resolvedSpec of resolvedTracks) {
+            let tabularDataTransformed: Datum[] = Array.from(tileInfo.tabularData);
+            for (const t of resolvedSpec.dataTransform ?? []) {
+                tabularDataTransformed = await transform(
+                    t,
+                    tabularDataTransformed,
+                    this.xScale().copy(),
+                    resolvedSpec.assembly
+                );
+            }
 
             // TODO: Remove the following block entirely and use the `rawData` API in the Editor (June-02-2022)
             // Send data preview to the editor so that it can be shown to users.
@@ -1070,7 +1038,7 @@ export class GoslingTrackClass extends TiledPixiTrack<Tile, GoslingTrackOptions>
 
             // Add a track model to the tile object
             tileInfo.goslingModels.push(model);
-        });
+        }
 
         return tileInfo.goslingModels;
     }
diff --git a/src/tracks/spatial-track/spatial-track.ts b/src/tracks/spatial-track/spatial-track.ts
new file mode 100644
index 000000000..34b9f5ec3
--- /dev/null
+++ b/src/tracks/spatial-track/spatial-track.ts
@@ -0,0 +1,312 @@
+import type { ChannelValue, Color, OverlaidTrack, SingleTrack, Size } from '@gosling-lang/gosling-schema';
+import * as chs from 'chromospace';
+import type { CsvDataFetcherClass, LoadedTiles } from 'src/data-fetchers/csv/csv-data-fetcher';
+import { tableFromArrays, tableFromIPC, tableToIPC } from '@uwdata/flechette';
+import { transform } from '../../core/utils/data-transform';
+import { getTabularData } from '../gosling-track/data-abstraction';
+
+/**
+ * Make an assertion.
+ *
+ * Usage
+ * @example
+ * ```ts
+ * const value: boolean = Math.random() <= 0.5;
+ * assert(value, "value is greater than than 0.5!");
+ * value // true
+ * ```
+ *
+ * @copyright Trevor Manz 2025
+ * @license MIT
+ * @see {@link https://github.com/manzt/manzt/blob/f7faee/utils/assert.js}
+ */
+export function assert(expression: unknown, msg: string | undefined = ""): asserts expression {
+    if (!expression) throw new Error(msg);
+}
+
+export type SpatialTrackOptions = {
+    spec: SingleTrack | OverlaidTrack;
+    color: string | undefined;
+    test: string | undefined;
+    data3D: string | undefined;
+    spatial: {
+        //~ spatial encoding
+        x: string;
+        y: string;
+        z: string;
+    };
+};
+
+const ERROR_COLOR = '#ff00ff';
+
+async function transformObjectToArrow(t: LoadedTiles, options: SpatialTrackOptions): Promise<Uint8Array | null> {
+    // Some genomics file formats, such as BigWig and MultiVec, do not have tabular data already stored.
+    // So, create one if missing by running `getTabularData()`.
+    // The tile ID of '0.0' extracts all data for a given file at the lowest resolution.
+    let tabularData = t['0.0'].tabularData ?? getTabularData(options.spec, t['0.0']);
+
+    tabularData = structuredClone(tabularData);
+    for (const t of options.spec.dataTransform ?? []) {
+        tabularData = await transform(t, tabularData, undefined, options.spec.assembly);
+    }
+    const xArr: number[] = [];
+    const yArr: number[] = [];
+    const zArr: number[] = [];
+    const chrArr: string[] = [];
+    const coordArr: number[] = [];
+
+    const parseAsNumber = (e: string | number): number => {
+        if (typeof e === 'string') {
+            return parseFloat(e);
+        }
+        return e;
+    };
+    console.log(options);
+
+    const fieldForSpatialX = options.spec.spatial.x;
+    const fieldForSpatialY = options.spec.spatial.y;
+    const fieldForSpatialZ = options.spec.spatial.z;
+    const fieldForSpatialChr = options.spec.spatial.chr;
+    const fieldForSpatialCoord = options.spec.spatial.coord;
+    console.log(
+        `fieldForSpatialX: ${fieldForSpatialX},\nfieldForSpatialY: ${fieldForSpatialY},\nfieldForSpatialZ: ${fieldForSpatialZ}`
+    );
+    console.log(`fieldForSpatialChr : ${fieldForSpatialChr},\nfieldForSpatialCoord: ${fieldForSpatialCoord}`);
+
+    for (let i = 0; i < tabularData.length; i++) {
+        // same as `xArr.push(parseAsNumber(tabularData[i].x));` but here I can use the string from the `"x": { "field": "whatever-value" }` instead of hard-coded ".x"
+        xArr.push(parseAsNumber(tabularData[i][fieldForSpatialX]));
+        yArr.push(parseAsNumber(tabularData[i][fieldForSpatialY]));
+        zArr.push(parseAsNumber(tabularData[i][fieldForSpatialZ]));
+        chrArr.push(tabularData[i][fieldForSpatialChr] as string);
+        coordArr.push(parseAsNumber(tabularData[i][fieldForSpatialCoord]));
+    }
+    let arrays = {
+        x: xArr,
+        y: yArr,
+        z: zArr,
+        chr: chrArr,
+        coord: coordArr
+    };
+
+    // Add additional fields joined by the join operation
+    const allFields = Object.keys(tabularData[0] ?? {});
+    const alreadyAddedFields: string[] = [
+        fieldForSpatialX,
+        fieldForSpatialY,
+        fieldForSpatialZ,
+        fieldForSpatialChr,
+        fieldForSpatialCoord
+    ];
+    const additionalFields = [];
+    for (const c of allFields) {
+        if (alreadyAddedFields.indexOf(c) === -1) {
+            additionalFields.push(c);
+        }
+    }
+    const suppArray: Record<string, (string | number)[]> = {};
+    for (const d of tabularData) {
+        for (const f of additionalFields) {
+            if (!suppArray[f]) {
+                suppArray[f] = [];
+            }
+            suppArray[f].push(Number.isNaN(+d[f]) ? d[f] : parseAsNumber(d[f]));
+        }
+    }
+    arrays = { ...suppArray, ...arrays };
+
+    const table = tableFromArrays(arrays);
+    const buffer = tableToIPC(table, { format: 'file' });
+    return buffer;
+}
+
+function fetchValuesFromColumn(columnName: string, arrowIpc: Uint8Array): number[] | string[] {
+    const table = tableFromIPC(arrowIpc);
+    const column = table.getChild(columnName).toArray();
+    return column;
+}
+
+function findMinAndMaxOfColumn(column: Int16Array): [number, number] {
+    let minVal = Infinity;
+    let maxVal = -Infinity;
+    for (const v of column) {
+        minVal = Math.min(minVal, v);
+        maxVal = Math.max(maxVal, v);
+    }
+    return [minVal, maxVal];
+}
+
+//~ TODO: make more generic
+function getRange(size: Size): [number, number] {
+    if (size.range) {
+        //~ TODO: yeah...this is ugly
+        return [size.range[0] as number, size.range[1] as number];
+    } else {
+        return [0.01, 0.001];
+    }
+}
+
+/**
+ * Just a utility function...should be removed
+ */
+const randomColors = (n: number) => {
+    const colors = [];
+    for (let j = 0; j < n; j++) {
+        let colorStr = '#';
+        for (let i = 0; i < 6; i++) {
+            const maxNum = 16; //~ maximum numerical value: 0 - 16 (F)
+            const randNum = Math.floor(Math.random() * maxNum);
+            colorStr += randNum.toString(16); //~ 16 is base
+        }
+        colors.push(colorStr);
+    }
+    return colors;
+};
+
+/**
+ * Returns something we can feed to chromospace view config
+ */
+function handleColorField(color?: ChannelValue | Color | string, arrowIpc: Uint8Array): string {
+    if (color === undefined) {
+        return 'red';
+    } else if (typeof color === 'string') {
+        return color;
+    } else if ('value' in color) {
+        return color.value as string;
+    } else if ('field' in color) {
+        if (!color.type) {
+            color.type = 'nominal'; // assume 'nominal' by default?
+        }
+        if (color.type === 'nominal') {
+            console.warn('not implemented!');
+            const values = fetchValuesFromColumn(color.field, arrowIpc) as string[]; //~TODO: forcing to string[] not good
+            const colScale = color.range ?? randomColors(50); //~ just some big number
+            const colorConfig = {
+                values: [...values],
+                //min: minVal,
+                //max: maxVal,
+                colorScale: colScale
+            };
+            return colorConfig;
+        } else if (color.type === 'quantitative') {
+            const values = fetchValuesFromColumn(color.field, arrowIpc);
+            console.log('values', values);
+            const [minVal, maxVal] = color.domain ? [color.domain[0], color.domain[1]] : findMinAndMaxOfColumn(values);
+            console.log(`minVal = ${minVal}, maxVal = ${maxVal}`);
+            const colScale = color.range ?? 'viridis';
+            const colorConfig = {
+                //values: values,
+                values: [...values],
+                min: minVal,
+                max: maxVal,
+                colorScale: colScale
+            };
+            return colorConfig;
+        } else {
+            return ERROR_COLOR;
+        }
+    } else {
+        return ERROR_COLOR; // error color
+    }
+}
+
+//~ I see a case for a generic impl for color and size...
+function handleSizeField(size?: ChannelValue | Size | number, arrowIpc: Uint8Array): number {
+    if (size === undefined) {
+        return 0.01;
+    } else if (typeof size === 'number') {
+        return size;
+    } else if ('value' in size) {
+        return size.value as number;
+    } else if ('field' in size) {
+        if (!size.type) {
+            size.type = 'quantitative'; // assume 'nominal' by default?
+        }
+        if (size.type === 'nominal') {
+            console.warn('not implemented!');
+        } else if (size.type === 'quantitative') {
+            const values = fetchValuesFromColumn(size.field, arrowIpc);
+            const [rangeMax, rangeMin] = getRange(size);
+            console.log(`size.field = ${size.field}`);
+            console.log(values);
+            const [minVal, maxVal] = findMinAndMaxOfColumn(values);
+            const sizeConfig = {
+                values: [...values],
+                min: minVal,
+                max: maxVal,
+                scaleMin: rangeMin,
+                scaleMax: rangeMax
+            };
+            return sizeConfig;
+        } else {
+            return 0.01;
+        }
+    } else {
+        return 0.01;
+    }
+}
+
+export function createSpatialTrack(
+    options: SpatialTrackOptions,
+    dataFetcher: CsvDataFetcherClass,
+    container: HTMLDivElement,
+) {
+    console.log('SPEC OPTIONS', options);
+    dataFetcher.tilesetInfo(info => {
+        console.log('info', info);
+        dataFetcher.fetchTilesDebounced(
+            async t => {
+                console.log('CSV tiles: ~~~~~~~~');
+                console.log(t);
+                if (!t['0.0'].tileWidth) {
+                    // This information is needed to create tabular data (i.e., running getTabularData())
+                    t['0.0'].tileWidth = info.max_width;
+                }
+
+                const ipcBuffer = await transformObjectToArrow(t, options);
+                if (!ipcBuffer) {
+                    console.error("could not tranform into Apache Arrow");
+                    return;
+                }
+                console.warn("spec", options.spec);
+                let chromatinScene = chs.initScene();
+                const tracks = options.spec._overlay ?? [options.spec];
+                for (const ov of tracks) {
+                    console.log("ov", ov);
+
+                    const color = handleColorField(ov.color, ipcBuffer.buffer);
+                    const scale = handleSizeField(ov.size, ipcBuffer.buffer);
+                    const viewConfig = {
+                        scale: scale,
+                        color: color,
+                        mark: ov.mark
+                    };
+
+                    let s = chs.load(ipcBuffer.buffer, { center: true, normalize: true });
+
+                    const isModel = "parts" in s; //~ ChromatinModel has .parts
+                    if (isModel) {
+                        const filterTransform = (ov.dataTransform ?? []).find(t => t.type === "filter");
+                        if (filterTransform) {
+                            const field: string = filterTransform.field;
+                            assert(field === "chr", "Field for transform should be 'chr'");
+                            const oneOf = filterTransform.oneOf;
+                            const first = oneOf[0];
+                            const res = chs.get(s, first)!;
+                            if (res) {
+                                const [selectedModel, _] = res;
+                                s = { parts: [selectedModel] };
+                            }
+                        }
+                        chromatinScene = chs.addModelToScene(chromatinScene, s, viewConfig);
+                    } else {
+                        chromatinScene = chs.addChunkToScene(chromatinScene, s, viewConfig);
+                    }
+                }
+                const [_, createdCanvas] = chs.display(chromatinScene, { alwaysRedraw: false, withHUD: false });
+                container.appendChild(createdCanvas);
+            },
+            ['0.0']
+        );
+    });
+}