Back to Projects

Tissue-Cut Visualization (BioVis 2024 Challenge)

ViteTailwindCSSThree.jsPlotly.jsJavaScript (ES6 Modules)Node.js
Tissue-Cut Visualization is an interactive web-based visualization system designed to explore spatial transcriptomics data. The platform enables researchers to analyze gene expression across tissue slices through an intuitive interface that integrates high-resolution histology images with spatial gene expression data. The system was developed as part of the BioVis 2024 Challenge and focuses on providing a scalable visualization interface capable of rendering high-dimensional biological data in real time.

The Problem & Solution

Problem

Spatial transcriptomics datasets contain large volumes of multidimensional biological information that combine gene expression values with spatial tissue coordinates. Traditional data visualization tools struggle to effectively render and explore such datasets interactively. Researchers often face challenges including: • Difficulty linking gene expression data with spatial tissue locations • Lack of interactive tools for exploring multimodal biological datasets • Performance limitations when visualizing high-resolution spatial data These limitations hinder effective biological interpretation of spatial omics datasets.

Solution

A browser-based visualization platform was developed to enable interactive exploration of spatial gene expression data. The system integrates high-resolution tissue imagery with gene expression information and allows users to dynamically select genes and visualize their spatial distribution across tissue samples. The application supports real-time visualization updates, enabling researchers to explore gene patterns without reloading datasets.

Architecture

The system architecture consists of multiple modular components: • Data Layer: Spatial transcriptomics datasets including gene expression matrices and tissue coordinates. • Visualization Engine: Three.js renders spatial gene expression spots in a 3D interactive environment. • Interaction Layer: User interface controls allow gene selection, opacity adjustment, and clipping operations. • Analytics Layer: Plotly.js generates dynamic charts to analyze gene expression values. • Frontend Application: Built using Vite and TailwindCSS for high performance and responsive UI rendering.

Key Features

  • Interactive spatial transcriptomics visualization

  • Real-time gene selection and expression mapping

  • Dynamic 3D rendering of spatial gene expression data

  • Interactive clipping and opacity control for tissue slices

  • Integrated gene expression plotting using Plotly

Key Impact

  • 1

    Enabled intuitive exploration of complex spatial omics datasets

  • 2

    Improved interpretability of gene expression across tissue samples

  • 3

    Demonstrated scalable browser-based scientific visualization architecture

  • 4

    Provided a flexible interface for future multimodal biological data integration

Interested in discussing this architecture?

Get in touch