Visualization Components

Overview#

Vitessce supports several components for visualization of single-cell data, and several controller components for updating visualization parameters. The component names found on this page are all valid values for the field layout[].component in the view config. On this page you will also find screenshots of each component.

note

The terms "component" and "view" are used interchangeably thoughout this documentation.

scatterplot#

The scatterplot component displays 2-dimensional (pre-computed) embeddings / projections (such as t-SNE or UMAP). Use with the embeddingType coordination type to specify which embedding to use when mapping cells onto scatterplot points. Use with datasets containing the cells data type. Optionally, the cell-sets and genes data types can be used for coloring cells on the plot.

Screenshot of Scatterplot ComponentScreenshot of Scatterplot Component

heatmap#

The heatmap component displays a (normalized) cell-by-gene (or gene-by-cell) matrix visualization. This component uses the expression-matrix data type, and optionally displays cell set color assignments if a file with the cell-sets data type is available in the same dataset. The heatmap can support very large matrices (~6,000 x ~9,000) when using Zarr-based file types (best performance can be acheived when arrays are saved with the type uint8).

Screenshot of Heatmap ComponentScreenshot of Heatmap Component

spatial#

The spatial component is meant to display data with spatial coordinates, including spatially-resolved cell segmentations as polygons (from the cells data type) and molecule positions as points (from the molecules data type). The spatial component also includes a multiplexed and multi-scale image viewer (implemented with Viv). Image files can be defined with the raster data type. Cell segmentations can be colored by gene expression data through the expression-matrix data type or cell set color assignments through the cell-sets data type.

Screenshot of Spatial ComponentScreenshot of Spatial Component

layerController#

The layer controller component provides an interface for manipulating the visualization layers displayed in the spatial component. The corresponding spatial component(s) can be specified through the spatialLayers coordination type.

Screenshot of Layer Controller Component

genomicProfiles#

The genomic profiles component displays genome browser tracks (using the genomic-profiles data type) containing bar plots, where the genome is along the x-axis and the value at each genome position is encoded with a bar along the y-axis. Genome tracks may be colored by corresponding cell set color assignments if the cell-sets data type is available in the same dataset, coordinated on the cellSetSelection coordination type. This component was implemented with HiGlass.

Screenshot of Genomic Profiles Component

genes#

The genes component displays an interactive list of genes when used with datasets containing the expression-matrix data type.

Screenshot of Expression Levels Component

cellSets#

The cell sets component displays an interactive list of (potentially hierarchical) cell sets when used with datasets containing the cell-sets data type. This can be useful for managing cell sets representing clustering algorithm outputs or cell type annotations.

Screenshot of Cell Set Manager Component

cellSetSizes#

The cell set sizes component displays a bar plot with the currently-selected cell sets (using the cell-sets data type and cellSetSelection coordination type) on the x-axis and bars representing their size (by number of cells) on the y-axis. This component was implemented with Vega-Lite.

Screenshot of Cell Set Sizes Component

description#

The description component can be used to display text content. This may be useful for communicating the details of a dataset or a data analysis process. When the spatial component is used for visualization of imaging data, the description component also renders a dropdown containing image metadata.

Screenshot of Description Component

status#

The status component displays debugging messages, including app-wide error messages when datasets fail to load or when schemas fail to validate. Details about the entity under the mouse cursor (cell, gene, and/or molecule) are displayed during hover interactions.

Screenshot of Status Component

cellSetExpression#

The cell set expression component displays a violin plot with expression values for the selected gene, implemented with Vega-Lite.

Screenshot of Cell Set Expression Component

expressionHistogram#

The expression histogram component displays a bar plot with the distribution of expression values for the selected gene, implemented with Vega-Lite.

Screenshot of Expression Histogram Component

Constants#

We provide the Component constant mapping from JavaScript object keys to component strings. For convenience, you may specify a shorter alias such as cm when the variable is imported.

import { Component as cm } from 'vitessce';
KeyValue
cm.DESCRIPTIONdescription
cm.STATUSstatus
cm.GENESgenes
cm.CELL_SETScellSets
cm.SCATTERPLOTscatterplot
cm.SPATIALspatial
cm.HEATMAPheatmap
cm.LAYER_CONTROLLERlayerController
cm.CELL_SET_SIZEScellSetSizes
cm.GENOMIC_PROFILESgenomicProfiles
cm.CELL_SET_EXPRESSIONcellSetExpression
cm.EXPRESSION_HISTOGRAMexpressionHistogram