DOCSEARCHbyAlgolia
Submit Docs

Gosling Grammar for Data Visualization

website·Indexed 32 days ago

http://gosling-lang.org/

A grammar for creating interactive genomic visualizations. Version 1.0.0 features a hierarchical specification for views and tracks, supporting visual marks like points, lines, and bars, semantic zooming, and various data formats including CSV, GFF3, VCF, and BigWig. It includes a JavaScript API with a React component (GoslingComponent) and supports both responsive and fixed sizing.

Tokens
23.1K
Snippets
142
Records
193
Agent score
66%

What's inside Gosling

  1. Overview of Gosling supported data formats

    Gosling supports two categories of datasets for visualization via the track.data property:

    1. Plain Datasets (No HiGlass Server): These can be used directly without preprocessing. Supported formats include CSV, JSON, BigWig, BAM, and BED.
    2. Pre-aggregated Datasets (Require HiGlass Server): These are preprocessed for scalable exploration and require a HiGlass server for access. Supported formats include Vector, Multivec, and BEDDB.
    {
  "tracks": [{
    "data": { ... }, // specify the data used in this track
    "mark": "rect",
    "color": ...
  }]
}

  2. Overview of Gosling and Gos Python Library

    Gosling is a visualization grammar for genome-mapped data that defines primitives for transforming and mapping genomics datasets to visual properties. It allows for the creation of scalable and interactive genomics data visualizations on the web. The Gos Python library is specifically designed for computational biologists to author these Gosling-based visualizations using their own data within environments like Jupyter Notebooks.

  3. Overview of the Gosling visualization toolkit

    Gosling is a declarative visualization toolkit designed for creating expressive genomics data visualizations. It allows users to focus on 'what' to create rather than 'how' to implement it, moving away from the need to write extensive JavaScript (e.g., using PixiJS) for custom tracks. The grammar is based on a taxonomy of genomics data visualization primitives, including layouts, arrangements, and alignments.

  4. Overview of Gosling visual marks

    In Gosling, visual marks are the basic graphical elements used to construct a visualization (referred to as a track). A visualization is created by binding data fields to visual channels (such as size, color, and position) of a specific mark type. The mark type is defined using the mark property within a track object.
    {
    "tracks":[
      {
        "mark": "rect",
        ... 
      },
      {
        "mark": "line",
        ... 
      }
    ]
}

  5. Overview of the Gosling genomics visualization grammar

    Gosling is a grammar designed for interactive and scalable genomics data visualization. It aims to balance expressiveness for multi-scale genomics data with accessibility for domain scientists, addressing the limitation of existing tools that are often tailored to specific problems or data types. The project includes Gosling.js, a JavaScript toolkit that provides scalable and interactive rendering built on top of existing web-based genomics visualization platforms to simplify the handling of common genomics data formats.

  6. Overview of Gosling.js for genomics visualization

    Gosling.js is a declarative grammar designed for interactive (epi)genomics visualization on the Web. It formalizes the rules for genomic data visualizations, allowing users to define a visualization using a Gosling specification, which is a JSON object. The structure and values of this JSON object are governed by the Gosling grammar.

  7. Overview of the Gosling visualization toolkit

    v1-release
    Gosling is a declarative visualization toolkit designed for creating expressive genomics data visualizations. It allows users to focus on what to create rather than how to achieve it, utilizing a grammar based on a taxonomy of genomics data visualization primitives (such as layouts, arrangements, and alignments). It is available as a JavaScript toolkit and as a Python package for computational notebook users, featuring transparent data loading.

  8. Understand Gosling Track building blocks

    A track is the fundamental building block in Gosling. It can be rendered as a bar chart, a line chart, or an ideogram. When multiple tracks belong to the same View, their genomic ranges can be synchronized.

  9. Create an overview and detailed views in Gosling

    To create a multi-view visualization (e.g., one overview and several detailed views), remove the specific x.domain from the overview track to allow it to visualize all data (such as all chromosomes). Then, create separate detailed views by specifying a unique domain for each, such as a specific chromosome.
    // Overview: Remove specific domain to show all
// - "domain": {"chromosome": "1"}

// Detailed View 1
"domain": {"chromosome": "2"}

// Detailed View 2
"domain": {"chromosome": "5"}

  10. Implement user interactions in Gosling visualizations

    Gosling provides built-in support for intuitive user interactions including zooming, panning, brushing, and linking. These features allow developers to create complex analysis scenarios such as comparative views or 'overview + detail' views using brushes.

  11. Understand Gosling's scalability and rendering architecture

    Gosling enables visualization scaling from whole genomes down to single nucleotides. This is achieved through semantic zooming, which dynamically updates visual encodings, and by leveraging the rendering and data access capabilities of the HiGlass genomics visualization framework.

  12. Link an overview to detailed views using brushes

    To link an overview view to detailed views, add brush marks to the overview tracks. Assign a unique linkingId to each brush and the same linkingId to the corresponding detailed view. To improve visual clarity, it is recommended to match the color of the brush in the overview with the background color of the linked detailed view.
    // In the Overview View
{
    "alignment": "overlay",
    "tracks": [
        { "mark": "area" },
        {
            "mark": "brush",
            "x": { "linkingId": "detail-1" },
            "color": { "value": "blue" }
        },
        {
            "mark": "brush",
            "x": { "linkingId": "detail-2" },
            "color": { "value": "red" }
        }
    ]
}

// In Detailed View 1
{
    "linkingId": "detail-1",
    "style": {
        "background": "blue",
        "backgroundOpacity": 0.1
    }
}

// In Detailed View 2
{
    "linkingId": "detail-2",
    "style": {
        "background": "red",
        "backgroundOpacity": 0.1
    }
}