🏠 back to Observable

Spatial single cell gene expression viewer

We just released an interactive spatial single cell gene expression viewer built using deck.gl, D3, and Observable (exporting JavaScript bundle)

The notebook is not currently public but similar examples can be found here


We’ll be presenting our work at the Urban Computing Foundation’s monthly TAC Meeting using deck.gl and ObservableHQ to help biologists visualize and gain insights from Vizgen’s in situ, single-cell, spatial transcriptomics data. ObservableHQ has been a great tool for developing interactive visualizations that we can embed into Jupyter notebooks and our website Applications - Vizgen!


Nice, definitely share the presentation here afterwards! I was just looking at your site again earlier today as a nice example of embedding notebooks. Embedding an embedding I suppose, lol. Still don’t really understand the graphic… guess I need a presentation!

1 Like

Thanks @tophtucker! Yes, we’re embedding an Observable UMAP embedding :smiley:. I’ll definitely post the link to the recorded seminar when available.

I’m happy to try to explain the graphic better - we’re visualizing MERFISH spatial transcriptomics data at a single-cell level from our Mouse Brain Showcase Data Release. Each point in the scatterplot is a single cell from a mouse brain where we are measuring the expression of 483 genes in each cell. We use Scanpy to perform a UMAP dimensionality on our 483-dimensional space and define clusters cells using Leiden clustering. Cells are colored by their Leiden cluster by default. Since MERFISH is a spatially resolved approach, we can also visualize the cells in our scatterplot based on their position within the tissue and we have set up an animation between the UMAP and spatial views. Additionally, we can overlay the expression of any of our measured genes using the dropdown selector to see the spatial expression patterns across our single cells. This visual allows users to explore the high-dimensional gene-expression and spatial patterns of cell clusters and genes across the mouse brain.

that was a great description!

so is it a cross-section of tissue or is z-axis collapsed?

looks like if i select a gene from the dropdown and then click a cell twice, it’s no longer colored by that gene, right? but the dropdown still shows that gene; i have to select a different gene and then come back if i want to get the gene coloring back. maybe it’d make sense to only have that highlight-cluster-on-click behavior if you’re currently coloring by Leiden cluster?

i’m way more naive than your core audience lol but i think it’d be clearer for me if you split up the current color dropdown and had one radio button toggle like

Color cells by
:radio_button: Leiden cluster
:white_circle: Gene expression

And then a separate dropdown (disabled unless “Gene expression” is selected above) labeled

Color by gene

  • ADGRF3
  • Abcc9
  • Ackr1
  • …

dumb question: what does gene expression mean? like, every cell contains the full DNA in its nucleus, but some cells have more of the proteins made by some genes, so different parts of the DNA show up more in different cells? and that differentiates the cell purpose, even though they all somehow come from the same DNA? man i wish i knew how all this worked lol

1 Like

Hi @tophtucker, thanks for all the feedback and questions it is much appreciated.

Yes, the experiment was run on a slice of mouse brain, but we image this slice at different Z levels. This visualization is collapsing this slice into a flat plane although we do have 3D information on this Z-axis (~10um).

Yes, selecting a gene from the dropdown colors the cells based on their expression of this gene and clicking a cell will always highlight the Leiden cluster that this cell belongs to. I might set up d3 to modify the selection in the dropdown to Leiden when a cell is clicked and the coloring scheme is set back to Leiden. I like the radio buttons idea, we might implement something like this going forward.

That’s an excellent question, and I didn’t explain what we meant by gene expression. You’re mostly right though :smiley: So at a very simplistic level, cell’s operate under the central dogma, which states that genetic material, a gene in the DNA, is first copied (transcribed) to short lived molecules (mRNA), which is then transported out of the nucleus to be translated to proteins (strings of amino acids which are encoded in triplet nucleodide codes) which are the main functional components of cells (e.g. enzymes, structural proteins, motor proteins etc). As an aside, determining how this string of amino acids folds into a functional protein is a huge field - see AlphaFold | DeepMind. So, even though cells contain the same DNA and set of genes, they do not always express the same genes and do not have the same distributions of proteins. Understanding how cells and tissues/organisms carefully regulate gene expression and thereby control cell type/state/function(s) is a huge area of biology research. Tissues like the brain have incredibly well spatially organized sets of cell types and corresponding gene expression patterns. Biology is very complicated :microbe: :microscope:

We released this dataset and a corresponding Google Colab notebook, which can be obtained from this link. The Colab notebook uses observable-jupyter and Observable “template notebooks” (e.g. Deck.gl Jupyter Spatial and UMAP / vizgen / Observable) that are then populated with real data in our Jupyter notebooks to produce embedded visuals on Google Colab. We used a similar approach to build this example.

1 Like