Numerous platforms aid in exploring cellular spatial organization, but also pose challenges in terms of data integration for achieving unified visualization and exploration. Spatial-Live addresses these challenges by being platform-agnostic and prioritizing a data-type-oriented approach. Regardless of the diverse origins of spatial data sources, from the Spatial-Live perspective, datasets from various platforms can be uniformly preprocessed and consolidated into three input files, namely the image PNG file, the data CSV file, and the polygon-shape JSON file. As shown in Fig.1, the image file (in PNG format) is mandatory and plays a pivotal role in establishing the pixel coordinate space for all other data plotting. While the JSON file is an optional component, it can prove invaluable in specific scenarios, allowing for annotation of regions of interest (ROIs) on the image. These JSON files can represent various features [ 16 ], such as cancer cell-enriched regions or abnormal tissue zones, as collections of geometric polygons rendered as a GeoJson Layer.

The Comma-Separated Value (CSV) file assumes a central role in Spatial-Live, serving as the primary means for structuring and accommodating variables. It facilitates the organization of data from various platforms after preprocessing, segregating them into distinct variable types: categorical, numerical, and gene variables. These variable types are represented by different column headers in the CSV file, as illustrated in Fig.1, such as 8char:[variable]9, 8num:[variable]9, and 8gene:[variable]9. Keep its lightweight nature in mind, Spatial-Live prefer to load only the essential data variables necessary for your analysis, rather than the entire spectrum of the dataset. In addition to these, three fundamental columns are essential: 8id:spot', 'pos:pixel_x', and 'pos:pixel_y'. These columns specify the unique spot IDs and pixel positions for each spot (or cell), cooperating with the underlying image to establish the pixel coordinate base. By analyzing these columns, Spatial-Live9s rendering engine efficiently generates corresponding visual layers for each variable type, leveraging a GPU-powered backend. In Fig.1, categorical variables appear as ScatterLayers, numerical variables as ColumnLayers, and gene variables as HeatmapLayers. Furthermore, the Spatial-Live engine offers an array of interactive controls, including 2D orthographic or 3D orbit view modes, pan/zoom functionality, and color platters. More details can be found in <Materials and Methods= and the online documentation.

To extend and overcome the limitations of the 2D orthographic view as mentioned previously, we integrated a 3D orbit perspective view mode into Spatial-Live. To implement this feature, as well as the structural layout as shown in Fig.1, we utilized the deck.gl library [ 17 ], a powerful WebGL2 (GPU baked) data visualization infrastructure, which can offer many visualization layers that can be customized and adapted, allowing us to create visually appealing and interactive data visualizations. By leveraging the capabilities of deck.gl, along with other modern JavaScript frameworks like Vue3 and React, we forged the Spatial-Live Rendering Engine, which offers users an immersive 3D viewing experience, elevating the exploration and analysis of spatial-omics data, through an appealing multiple-layer stacking approach. By adjusting the z-height level of each layer, Spatial-Live allows for proper positioning and view angles, ensuring the effective overlay of multiple layers in 3D space.

The Spatial-Live user interface consists of three main components: the left menu pane, the middle main visual pane, and the right control panel, as shown in Fig.2. The left panel controls visibility of different variable layers. When toggled to the "on" state (checkbox), the corresponding layer is added to the visual output, with the active layer highlighted in yellow. The middle pane dynamically renders the visual output in response to parameter changes and enables interactive manipulation through mouse actions, including zooming, rotating, and dragging. This functionality provides users with the ability to explore and visualize data from various angles and perspectives. The top-right panel provides a convenient interface for adjusting parameters to control the appearance of the active layer and optimize the layout. Notably, users can switch between 2D orthographic and 3D orbiting perspective modes to suit their viewing preferences.

Furthermore, Spatial-Live has the option to enable tooltips for most layers, except for the Gene Heatmap layer. The tooltips can provide useful hints and additional information in certain cases. To enable tooltips, simply toggle the "Tooltip" button located in the right control panel. Additionally, once all the layers are finalized and properly stacked, users can export the visualization as an external image by clicking the "Export Image" button. For a more comprehensive guideline of using Spatial-Live, we have provided a quick demo and instructional video. Please refer to the online documentation for detailed instructions and further information.

To maintain platform-agnosticism, we have deliberately decoupled data processing from the Spatial-Live tool, recognizing that it may be tied to specific single-cell spatial platforms. This separation allows us to concentrate exclusively on visualization. Nonetheless, for optimal utilization of Spatial-Live, it is essential to supply properly formatted input files. To facilitate this process, comprehensive tutorials have been curated to exemplify the preparation of these files. These resources can be readily accessed via our online documentation.

In this context, an illustrative example has already been presented in Fig.2, based on a study in which the authors induced acute kidney injury (AKI) in mice using the CLP model (cecal ligation puncture) [ 18 ]. The spatial t ranscriptomic data were generated from the 10x Visium platform. As evident from the central portion of Fig.2, the careful arrangement of multiple layers offers a lucid depiction of distinct kidney regions, including the cortex and inner medulla. These regions are discerned using annotated polygon shapes displayed via the Geo-JSON layer, as well as the <leiden= clusters highlighted through the scatter layer. Moreover, the Column bar plot of a specific gene (e.g. Sprr1a) vividly demonstrates gene expression fluctuations within these areas. With the capabilities of Spatial-Live, we can delve into individual cell spots beneath the column. As we descend along the column, we can seamlessly zoom in on the adjacent spots, allowing for a comprehensive examination of histopathological details within the tissue image.

To further demonstrate the versatility of Spatial-Live in handling data from various platforms, we processed and visualized mouse liver MERFISH data from the Vizgen platform. Specifically, cell filtering was based on marker genes persistently expressed in hepatocyte peri-central and peri-portal zones [ 19 ]. In addition, we prepared the required input PNG image and CSV data files for Spatial-Live, aptly integrating two numerical variables and two gene variables. As demonstrated in Fig.3, a screenshot captured from Spatial-Live effectively highlights the tool9s capacity to convey abundant information via a singular plot. The light-blue and orange heatmaps represent the gene variables 8gene:Aldh3a29 and 8gene:Hsd17b69, capturing hepatocyte peri-portal and peri-central spatial distributions while unveiling a unique, mutually exclusive jagged pattern. The two numerical variables, 8num:Vwf9 and 8num:Axin29, plotted as purple and green column bars, respectively, presenting discernible spatial trends within hepatocyte zones; notably, enriched Vwf expression borders blood vessels. Through strategic layer stacking, an engaging visual depiction of processed mouse liver MERFISH data can be achieved.

Irrespective of their diverse origins, datasets sourced from different spatial omics platforms are consistently preprocessed and organized into three key input files: a PNG image file, a CSV data file, and an optional JSON geometry-shape file. These files form the foundation for rendering into image-based pixel coordinates, subsequentially accommodating the four distinct data types: categorical variables, numerical variables, gene variables, and geometric shape variables (see Fig.1). The data preparation and visualization rendering in Spatial-Live mainly revolve around these four data types, ensuring that the tool is tailored to accommodate and effectively handle each of them. In line with this objective, we have established certain constraints on their formats. And by leveraging the capabilities of deck.gl [ 17 ], Spatial-Live can seamlessly generate the appropriate visual layers for diverse variables, as illustrated below: ¥ ¥

The spatial profiling for the mouse liver dataset (Liver1Slice1) was sourced from Vizgen9s MERFISH Mouse Liver Map available at: https://info.vizgen.com/mouse-liver-access. Within this dataset, MERFISH measurements were conducted on a gene panel comprising 347 genes, spanning a substantial >300,000 liver cells situated within a single tissue slice. We downloaded essential files like cell_by_gene.csv and cell_metadata.csv, in addition to image-related components such as manifest.json and micro_to_mosaic_pixel_transform.csv. Moreover, we acquired DAPI (nuclear staining) and PolyT (RNA labeling) TIF images, which underwent subsequent processing to align with the prerequisites for the Spatial-Live image layer serving as pixel coordinate base.

Recognizing the considerable initial dimensions of the image, we opted to downscale it to a smaller size, ultimately achieving a resolution of 5989×5631. The standard singlecell data processing steps, encompassing quality filtering, clustering, and marker gene identification, were carried out using scanpy [ 22 ] and squidpy [ 23 ] scripts. Specifically, cell filtering was conducted based on marker genes persistently expressed in hepatocyte peri-central and peri-portal zones. As a result, we obtained the final output files, namely liver_demo.csv and liver_demo.png, which were meticulously tailored to align with the Spatial-Live standards. These files were seamlessly imported into Spatial-Live, facilitating their visualization. For a comprehensive understanding of the step-by-step procedure, refer to the detailed instructions available in the online documentation.