{"id":8340,"date":"2026-09-11T08:47:38","date_gmt":"2026-09-11T06:47:38","guid":{"rendered":"https:\/\/www.scs.ch\/uncategorized-en-us\/web-viewer-for-microscopy-images\/"},"modified":"2026-09-20T07:38:56","modified_gmt":"2026-09-20T05:38:56","slug":"web-viewer-for-microscopy-images","status":"publish","type":"post","link":"https:\/\/www.scs.ch\/en\/case-studies\/web-viewer-for-microscopy-images\/","title":{"rendered":"Web Viewer for Microscopy Images"},"content":{"rendered":"

Initial Situation<\/h2><\/div>

Automated analysis of biomedical images quickly generates several terabytes of data. Microscopy images are available in various resolutions and image planes and are supplemented by segmentations, annotations, and analysis data. Making these data volumes quickly, fluidly, and interactively accessible in the browser places high demands on the architecture and performance of the frontend. <\/p>\n<\/div>

\"Map<\/span><\/div><\/div><\/div>

Project Overview<\/h3><\/div>

Client<\/strong>
ariadne.ai<\/p>\n<\/div>

<\/div><\/div>

Sector<\/strong>
Medical & Life Science<\/p>\n<\/div>

<\/div><\/div>

Solution<\/strong>
High-performance Web Viewer for very large image data.<\/p>\n<\/div>

<\/div><\/div>

System Environment <\/strong>
Neuroglancer, Angular, D3.js, containerized deployment<\/p>\n<\/div>

<\/div><\/div>

Scope<\/strong>
Complete frontend development from requirements analysis and wireframes through UI and UX to implementation, deployment, and performance optimization<\/p>\n<\/div>

<\/div><\/div>

Data Volumes<\/strong>
Image data in the terabyte range, multiple resolution levels and image planes<\/p>\n<\/div><\/div><\/div><\/div><\/div>

SCS’s Contribution<\/h2><\/div>

SCS developed the complete frontend for Ariadne SPATIAL for ariadne.ai. The web viewer interactively displays large image data, integrates ariadne.ai’s processing results, and allows users to select data areas, segmentations, and analysis parameters directly in the browser. <\/p>\n<\/div><\/div><\/div>

<\/i><\/div>

Large Data Displayed Fluidly<\/h4><\/div>
<\/div>
\n

Image data, segmentations, and annotations are available in various formats and resolution levels. The web viewer enables fluid zooming and panning, as well as quick switching between relevant image planes. <\/p>\n<\/div><\/div><\/div>

<\/i><\/div>

Analysis Data Directly Visualized<\/h4><\/div>
<\/div>
\n

Image analysis results can be directly linked with the image data. Statistical metadata, for example, is displayed in interactive scatter plots and can be used to select relevant data areas. <\/p>\n<\/div><\/div><\/div>

<\/i><\/div>

Segmentations Explored Interactively<\/h4><\/div>
<\/div>
\n

Using lasso selection and hierarchical gating, users can select relevant areas in the analysis data. The corresponding segmentations, such as individual cells, are immediately highlighted in the microscopy image. <\/p>\n<\/div><\/div><\/div>

<\/i><\/div>

Optimized for Large Image Data<\/h4><\/div>
<\/div>
\n

SCS combined Neuroglancer for displaying large image datasets, D3.js for interactive visualizations, and Angular for the user interface. The deployment was containerized, and the entire application was specifically optimized for performance. <\/p>\n<\/div><\/div><\/div>

<\/div><\/div><\/div><\/div>
\"Ausgew\u00e4hlten<\/span><\/div><\/div><\/div><\/div><\/div>
<\/div>

Result<\/h2><\/div>

With Ariadne SPATIAL, even very large microscopy datasets can be interactively explored in the browser. Users can switch between resolution levels and image planes, select segmentations, and link analysis data directly with the underlying images. SCS was responsible for the entire frontend, from requirements analysis and wireframes through UI and UX to implementation, containerization, and performance analysis and optimization. <\/p>\n<\/div><\/div><\/div>

several terabytes<\/h3><\/div>

Image data interactively displayed in the web viewer.<\/p>\n<\/div><\/div><\/div>

complete frontend<\/h3><\/div>

from requirements analysis and UX to performance optimization.<\/p>\n<\/div><\/div><\/div>

multiple data layers<\/h3><\/div>

Images, segmentations, annotations, and metadata visualized together.<\/p>\n<\/div><\/div><\/div><\/div><\/div>

Services Used<\/h2><\/div><\/div><\/div>

High Level Software<\/h3><\/div><\/div><\/div><\/div><\/div><\/div>

UX \/ UI<\/h3><\/div><\/div><\/div><\/div><\/div><\/div>

Data Visualization<\/h3><\/div><\/div><\/div><\/div><\/div><\/div>

Medical & Life Science<\/h3><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
\"Smiling<\/div><\/div>

Your Contact Person<\/h2><\/div>
Beat H\u00f6rmann<\/div><\/div>

Healthtech & Innovation
+41 43 456 16 00<\/a><\/p>\n<\/div>

Speak with the responsible specialist<\/span>Speak with the responsible specialist<\/span><\/div><\/a><\/div>

For questions regarding machine learning, medical image segmentation, and reproducible AI development.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>

Further Case Studies<\/h2><\/div>