GridVar

Genomics Example

Our inspiration for developing GridVar was a figure from Sequence analysis of mutations and translocations across breast cancer subtypes published in Nature. Users can interact with the visualization by hovering over a cell to view a popup with more details, clicking on labels, and by reordering the rows and columns by selecting actions in the dropdowns.

We've taken data (Supplementary Table 4 from the aforementioned Nature paper) to create the above example. Tissue samples (columns) are initially ordered by total mutations per sample in descending order across the entire set of genes. Similarly, genes (rows) are ordered by the number of mutations across samples in descending order.

Alternate orderings for both tissue samples and genes enable visual exploration of the view. By restricting the tissue samples mutation counts to just the top 6 mutated genes, tissue samples can be reordered. This enables our users to see the impact of mutations across the global set or restricted to a subset. When selecting this option, users will see the samples with mutations shift to the left.

To understand gain and/or loss of function, our users can adjust the gene mutation ordering by switching the gene order based on the frequency of mutation types: missense, other non-synonymous, or both. The gene rows will reorder and the histogram will update based on this selection.

Example code for initializing GridVar

$('#gridVarGenomics').gridVar({
    cellHeight: 30,
    cellWidth: 9,
    rowOrder: ['TP53', 'PIK3CA', 'AKT1',
        'CBFB', 'GATA3', 'MAP3K1'],
        columnOrder: ['BR-M-191','BR-M-037',
        'BR-V-043','BR-V-027','BR-V-067',
        ...],
    dataMapping: {
        data: [
            ['AKT1', 'BR-V-016', ['Missense']],
            ['AKT1', 'BR-V-017', ['Missense']],
            ['TP53', 'BR-M-123', ['other non-synonymous']],
            ...],
        dataIndex: {
            rowKey: 0,
            columnKey: 1,
            mutation: 2
        }
    },
    dataDisplayMapping: [{
        dataType: 'mutation',
        mappings: {
            Missense: '#bb88bb',
            'other non-synonymous': '#777777'
        }
    }],
    histogramMapping: {
        data: histogramData,
        label: 'Mut. Frequency'
    },
    rowLabelClicked: function(event, data) {
        alert(data + ' clicked!');
    }
});

Example code for reordering rows

$('#gridVarGenomics').gridVar('option', 'rowOrder', ['TP53', 'PIK3CA', 'AKT1', 'CBFB', 'GATA3', 'MAP3K1']);

Example code for reordering columns

$('#gridVarGenomics').gridVar('option', 'columnOrder', ['BR-M-191','BR-M-037','BR-V-043','BR-V-027','BR-V-067']);

Weather Example

Although GridVar was developed for a genomics use case, GridVar can visualize all types of categorical data. In the example below, GridVar displays climate data from the Comparative Climate Data for the U.S. through 2012 from the National Climate Data Center. Each row is one city per state, including Washington D.C., Puerto Rico, and Pacific Islands (i.e. Guam), each column is a month, and at the intersection the example displays the highest recorded temperature per month and the days in those months that were or weren't cloudy.

Temperature - Highest of Record: Degrees F

Example code for initializing GridVar with climate data

$('#gridVarWeather').gridVar({
    rowOrder: ['BIRMINGHAM AP, AL', 'ANCHORAGE, AK',
        'FLAGSTAFF, AZ', 'FORT SMITH, AR',
        'BAKERSFIELD, CA', ...
    ],
    columnOrder: ['January', 'February', 'March', ...],
    dataMapping: data: [
            ['BIRMINGHAM AP, AL', 'January', ['Neutral'],
            [81],
            ['cloudy'],
            [7, 6, 18]
        ],
            ['BIRMINGHAM AP, AL', 'February', ['Neutral'],
            [83],
            ['cloudy'],
            [7, 6, 15]
        ],
            ['BIRMINGHAM AP, AL', 'March', ['Hot'],
            [89],
            ['cloudy'],
            [7, 8, 16]
        ],
        ...
    ],
    dataIndex: {
        rowKey: 0,
        columnKey: 1,
        temperature: 2,
        cloudy: 4
    }
    ],
    dataDisplayMapping: [{
      dataType: 'temperature',
      mappings: {
          Hot: '#E44C16',
           Neutral: '#E3E3E3',
            Cool: '#01A2BF'
        },
        labelMapping: {
           Hot: 'Hot (greater than 88)',
           Neutral: 'Neutral',
           Cool: 'Cool (less than 55)'
        }
    }, {
       dataType: 'cloudy',
           mappings: {
           clear: 'circleRenderer',
           cloudy: 'minusRenderer'
        }
    }],
    rowLabelClicked: function (event, data) {
         alert(data + ' clicked!');
    }
});