GenomeSpy

Embedding examples

Practical examples for connecting GenomeSpy to application state, data sources, controls, and framework components.

15 examples Core API · dynamic data · UI integration

01

Control views and state

Coordinate embeds, scales, parameters, and live view hierarchies from your own application code.

Scale resolution API

Zoom a visualization through its named scale API.

Parameter API

Read and write parameters exposed by an embed.

Brush linking

Link an overview brush to a separate detail embed.

Linked embeds

Synchronize named scales across separate instances.

View mutation API

Add, remove, move, and control live views.

02

Stream and edit data

Push new records into a running visualization and build selection-driven editing workflows.

Dynamic named data

Update a named dataset through the embed API.

Multiple dynamic sources

Keep several live sources on a shared scale domain.

Named data form

Connect ordinary form fields to named data.

Annotation editor

Create annotations from a brushed genomic region.

Selection-driven form

Use interval and point selections to drive a form.

03

Add embedding tools

Give users export controls and an in-context view of the visualization inspector.

Visualization controls

Download images, clear selections, and go full-screen.

Inspector overlay

Open the developer inspector over an embedded plot.

04

Genome data and frameworks

Combine embedding with sequence data or a modern UI framework.

Dynamic sequence source

Replace data as the genomic locus changes.

DNA sequence editor

Edit individual bases in a named dataset.

React component

Use GenomeSpy as a React component with lifecycle cleanup.