- Have some data to be visualized
- Write or find a visualization specification that describes how the data should be visualized
- Embed GenomeSpy into a web page and initialize it with the specification and the data
- Open the web page with your web browser
However, there are three ways to get quickly started with GenomeSpy visualizations: the Playground app, Observable notebooks, and embedding GenomeSpy on HTML pages. More advanced users can use GenomeSpy as a visualization library in web applications.
The easiest way to try out GenomeSpy is the Playground app, which allows you to experiment with different visualization specifications directly in your web browser. You can load data from publicly accessible web servers or from your computer. The app is still rudimentary and does not support saving or sharing visualizations.
Local or remote web server¶
- Create an HTML document (web page) by using the example below
- Place the visualization spec and your data files into the same directory as the HTML document
- Copy them onto a remote web server or start a local web server in the directory
Local web server¶
Python comes with an HTTP server module that can be started from command line:
python3 -m http.server --bind 127.0.0.1
By default, it serves files from the current working directory. See Python's documentation for details.
embed function initializes a visualization into the HTML element given as
the first parameter using the specification given as the second parameter. The
function returns a promise that resolves into an object that provides the
current public API. For deails, see the API Documentation.
Check the latest version!
The versions in the examples below may be slightly out of date. The current version is:
Load the spec from a file¶
This template loads the spec from a separate
Embed the spec in the HTML document¶
Genomespy.app website examples¶
Using GenomeSpy as a visualization library in web applications¶
The @genome-spy/core NPM package contains a bundled library that can be used on web pages as shown in the examples above. In addition, it contains the source code in ESM format, allowing use with bundlers such as Vite and Webpack. For examples of such use, see: