Using Napari-SpatialData#

This tutorial shows how to load SpatialData objects into the Napari-Spatialdata plugin, and use it with the “View” and “Scatter” widgets for visualising coordinates.

Import packages and data#

There are two options to install napari-spatialdata:

(1) Run pip install napari-spatialdata

or,

(2) Clone this repo and run pip install -e .

After installing napari-spatialdata, insert the file path of the dataset in the FILE_PATH variable below and execute the cell. This loads the dataset from the filepath and creates a spatialdata.SpatialData object. We’ll use this object with the class Interactive to visualise this dataset in Napari.

%matplotlib inline
import matplotlib.pyplot as plt
from napari_spatialdata import Interactive
from spatialdata import SpatialData

plt.rcParams['figure.figsize'] = (20, 20)

FILE_PATH = "../../../data/cosmx/data.zarr" # Change this
sdata = SpatialData.read(FILE_PATH)

Visualise in napari#

We can instantiate the Interactive class with our spatialdata.SpatialData object, and view it in Napari.

interactive = Interactive(sdata)
interactive.run()

This executes an empty Napari viewer. The SpatialData widget is in the bottom left hand corner and consists of two boxes, “Coordinate System” and “Elements”.

A spatialdata.SpatialData object groups together five spatialdata.models.SpatialElement: Images (raster images), Labels (e.g. segmentation masks), Points (e.g. transcripts locations, molecular probes), Shapes (regions of interests, array capture locations etc.), and Table (where the molecular profiles and annotations are stored). Each SpatialElement can be associated with a coordinate system and the transformation required to align that element to it.

plt.imshow(interactive.screenshot())
plt.axis('off')
(-0.5, 2939.5, 1665.5, -0.5)
../_images/5be6a6527e33d1200db6783b114251e8180dc6183a19da1e50eb25c22e5f5379.png

We can pick a coordinate system in the first box. This automatically updates the next box, which shows the elements associated with that coordinate system. Clicking on an element loads it as a layer into Napari.

In the example below, we selected the coordinate system “16” and loaded “16_image” and “16_labels” to the Napari viewer.

plt.imshow(interactive.screenshot())
plt.axis('off')
(-0.5, 2939.5, 1665.5, -0.5)
../_images/a3faa286c2d15579e61b4c9ae6eb7ab60cb32f21bd10fa21533947d3f65a6acf.png

Load axis with the view widget#

Napari-SpatialData also comes with a “View” widget that can be used to load obs, var or obsm.

To open it, we can use the menu bar by going to Plugins > napari-spatialdata > View. The obs, var and obsm values associated with the anndata of the selected layer is shown.

To further examine a specific value, we can double click on any element on the View Widget to load it to the viewer. In the example below, we selected the layer “16_labels” and double clicked on the gene expression, “AATK” in the view widget.

plt.imshow(interactive.screenshot())
plt.axis('off')
(-0.5, 2939.5, 1857.5, -0.5)
../_images/f2a7387350d170ee69891165282ec4563fce5997bbb39f5553525d52158921f6.png

Load axis into scatter widget#

Napari-SpatialData also comes with a Scatter widget to visualise points in 2D coordinates.

In the example below, we started again with a setup where we’ve loaded 16_labels and 16_image to the viewer. We select the layer, “16_labels”. Then, we open the Scatter widget by going to Plugins > napari-spatialdata > Scatter. This loads the AnnData object associated with that layer into the “Scatter” Widget.

plt.imshow(interactive.screenshot())
plt.axis('off')
(-0.5, 2939.5, 1665.5, -0.5)
../_images/2f22375f3ea1cf7d398f7edc743557bd8105ba675d5ee0961cc5755c310023b7.png

We can now pick AnnData values to visualise in the scatterplot.

In the example below, we’ve selected obsm[“global”] , with axis 0 in the x-axis and axis 1 in the y-axis. We’re coloring each coordinate by obs[“Area”] . Once we’ve selected the relevant data points, clicking on “Plot” generates a scatterplot.

plt.imshow(interactive.screenshot())
plt.axis('off')
(-0.5, 2939.5, 1665.5, -0.5)
../_images/71f6109a9dc8b1e6ac4877f3ddaee09da1ebb8210774d96b92c7c19e10ec602e.png

The “Scatter” widget also offers an interactive feature to manually select clusters of interest.

In the example below, we used our mouse cursor to select a cluster on the top left area of the scatterplot. The selected points is less transparent than the non-selected points.

plt.imshow(interactive.screenshot())
plt.axis('off')
(-0.5, 2939.5, 1665.5, -0.5)
../_images/7abf8d8cd1f9d50206f24f8cdbcc43a0ed2e0f30619339b2ed934bc00f5b9b8a.png

After a cluster has been highlighted, it can be exported into AnnData by clicking on the “Export” button. This creates a new obs value, with the suffix “_LASSO_SELECTED”.

A new obs_value should be created called “16_labels_LASSO_SELECTED”. We will use this as the color type for our scatterplot. The obs box isn’t refreshed automatically so when selecting the color type, click on obsm and go back to obs. “16_labels_LASSO_SELECTED” should be visible as the first option. Use this to color the scatterplot.

plt.imshow(interactive.screenshot())
plt.axis('off')
(-0.5, 2939.5, 1665.5, -0.5)
../_images/49d3c7d6c872651757806a3f9d34ba046221a8930b28bcd0bac6e629ba56c71a.png

We can also view this in the “View” widget and load it as a new layer. After closing this scatter widget and opening the “View” widget, we can see “16_labels_LASSO_SELECTED” in the top of “Observations”.

plt.imshow(interactive.screenshot())
plt.axis('off')
(-0.5, 2939.5, 1857.5, -0.5)
../_images/75c023d7051d5921f00a45a47c31c714548810688d361013442a4ff77f95c4c9.png

Clicking on “16_labels_LASSO_SELECTED” loads it as a new layer to the viewer.

plt.imshow(interactive.screenshot())
plt.axis('off')
(-0.5, 2939.5, 1857.5, -0.5)
../_images/e7125f5a3ca98a1ea7e52b44ce908e2ca22ce2217cbddeaaa5cc47ee49c71508.png