User Help Pages
  • Welcome to the Help Pages for UCSC Xena
  • Tutorials and webinars
    • Webinars
    • Basic Tutorial: Section 1
    • Basic Tutorial: Section 2
    • Basic Tutorial: Section 3
    • Advanced Tutorial: Section 1
    • Advanced Tutorial: Section 2
    • Tutorial: Tumor vs Normal
    • Tutorial: Viewing your own data
    • Live examples
  • How do I ...
    • How do I make a KM plot?
    • How do I compare tumor vs normal expression?
    • How do I remove null data (gray lines) from view?
    • How do I make subgroups?
    • How do I make more than 2 subgroups?
    • How do I make subgroups with geneA high and geneB high?
    • How do I compare gene expression between subgroups?
    • How do I compare gene expression between different cancer types?
    • How do I remove duplicate samples from a KM plot?
    • How do I view multiple types of cancer together?
    • How do I filter to just one cancer type
    • How do I view my data with the data from TCGA?
    • How do I change the color of a column?
    • How do I interact with the tooltip?
    • How do I cite UCSC Xena?
  • Overview of features
    • Visual Spreadsheet
      • Coloring for Mutation Columns
      • Coloring for Segmented Copy Number Columns
    • Kaplan Meier Plots
    • Chart & Statistics View
    • Filtering and subgrouping
      • Supported search terms for finding samples
    • Differential Gene Expression
    • GSEA
    • Genomic Signatures
    • Bookmarks
    • Download Data
    • Xena Single Cell
    • TumorMap
    • MuPIT
    • Accessing data through python
    • Transcript View
    • Xena Gene Set Viewer
  • Overview of public data
    • Types of data we have
    • TCGA
    • GDC
    • More studies
    • Choosing a study/cohort
  • FAQ
    • Xena Browser
    • Data and datasets
  • Viewing your own data
    • Getting Started
    • Probes/transcripts/identifiers we recognize
    • Data format specifications and supported biological data types
    • KM plots using data from a Local Xena Hub
    • Hubs for institutions, collaborations, labs, and larger projects
    • Loading data from the command line
    • FAQ/Troubleshooting Guide
  • Technical documentation
    • Setting up Xena for your institution
    • Deep Linking Into Xena
    • Metadata Specification
  • Contact us
  • Cite us
  • Data Use Agreement
Powered by GitBook
On this page
  • Examples
  • Base URL and URL construction
  • columns parameter
  • Properties
  • Optional properties
  • filterColumns parameter
  • heatmap parameter
  • Properties

Was this helpful?

Export as PDF
  1. Technical documentation

Deep Linking Into Xena

How to programmatically specify Xena Browser views

Last updated 28 days ago

Was this helpful?

Xena has the ability to draw visualizations based on parameters passed through URL. You will need to URL encode the parameters.

The list of supported parameters below is not exhaustive. If you do not see your functionality supported below please .

Examples

Display Column Setup Examples

One data column (with two subcolumns) display

Display in chart mode

Three data column display, one clinical data column, two genomic data columns

Specify column width, top label, and bottom label on Column C

Reverse sort on Column B

Display gene average in Column C

Display introns in Column C; Hide welcome banner

HTML Code showing how to build examples 1-7

<html>
<script>
	window.onload = function() {
        var browser = 'https://xenabrowser.net/';

        var hub1 = 'https://toil.xenahubs.net';
        var dataset1 = 'tcga_Kallisto_tpm';

		var hub2 = 'https://tcga.xenahubs.net';
		var dataset2 = 'TCGA.PANCAN.sampleMap/Gistic2_CopyNumber_Gistic2_all_data_by_genes';
		
		var hub3 = 'https://pancanatlas.xenahubs.net';
		var dataset3 = 'Survival_SupplementalTable_S1_20171025_xena_sp';

		var hub4 = 'https://pancanatlas.xenahubs.net';
		var dataset4 = 'broad.mit.edu_PANCAN_Genome_Wide_SNP_6_whitelisted.xena';

		var hub5 = 'https://gdc.xenahubs.net';
		var dataset5 = 'TCGA-BRCA.somaticmutation_wxs.tsv';

		var col1 = {name: dataset1, host: hub1, fields: 'TP53 FOXM1'};
		var col2 = {name: dataset2, host: hub2, fields: 'FOXM1'};
		var col3 = {name: dataset3, host: hub3, fields: 'cancer type abbreviation'};
		var col4 = {name: dataset4, host: hub4, fields: 'chr3:4000000-4100000'};
		var col5 = {
			name: dataset1,
			host: hub1,
			width: 400,
			columnLabel: 'top column label',
			fieldLabel: 'bottom column label',
			fields: 'ENST00000064780.6 ENST00000066544.7 ENST00000070846.10 ENST00000072516.7 ENST00000072644.5 ENST00000072869.8 ENST00000074304.9 ENST00000075120.11 ENST00000075322.10'
		};

		var col6 = {name: dataset1, host: hub1, fields: 'TP53'};
		var col6_geneAve = {name: dataset1, host: hub1, fields: 'TP53', geneAverage: true};

		var col7 = {name: dataset5, host: hub5, fields: 'TP53'};
		var col7_showIntron = {name: dataset5, host: hub5, fields: 'TP53', showIntrons: true};

		var col8 = {
			name: dataset1, 
			host: hub1, 
			fields: 'TP53 FOXM1', 
			sortDirection: 'reverse'
		};

		var heatmapChart = JSON.stringify({
			mode: 'chart'
		});

		var heatmapHideWelcome = JSON.stringify({
			showWelcome: false,
		});

		        var columns1 = JSON.stringify([col1]);
        var l1 = document.getElementById('link1');
        l1.href = browser + 'heatmap/?columns=' + encodeURIComponent(columns1);

        var columns2 = JSON.stringify([col1, col2]);
        var l2 = document.getElementById('link2');
        l2.href = browser + 'heatmap/?columns=' + encodeURIComponent(columns2) + '&heatmap=' + encodeURIComponent(heatmapChart);

        var columns3 = JSON.stringify([col3, col2, col4]);
        var l3 = document.getElementById('link3');
        l3.href = browser + 'heatmap/?columns=' + encodeURIComponent(columns3);

        var columns4 = JSON.stringify([col3, col5]);
        var l4 = document.getElementById('link4');
        l4.href = browser + 'heatmap/?columns=' + encodeURIComponent(columns4);

        var columns5 = JSON.stringify([col8]);
        var l5 = document.getElementById('link5');
        l5.href = browser + 'heatmap/?columns=' + encodeURIComponent(columns5);

        var columns6 = JSON.stringify([col6, col6_geneAve]);
        var l6 = document.getElementById('link6');
        l6.href = browser + 'heatmap/?columns=' + encodeURIComponent(columns6);

        var columns7 = JSON.stringify([col7, col7_showIntron]);
        var l7 = document.getElementById('link7');
        l7.href = browser + 'heatmap/?columns=' + encodeURIComponent(columns7) + '&heatmap=' + encodeURIComponent(heatmapHideWelcome);
    };
</script>
<body>
    <a id=link1>Example 1</a> One data column (with two subcolumns) display
	<br><br>
	<a id=link2>Example 2</a> Display in chart mode
	<br><br>
	<a id=link3>Example 3</a> Three data column display, one clinical data column, two genomic data columns
	<br><br>
	<a id=link4>Example 4</a> Specify column width, top label, and bottom label on Column C
	<br><br>
	<a id=link5>Example 5</a> Reverse sort on Column B
	<br><br>
	<a id=link6>Example 6</a> Display gene average in Column C
	<br><br>
	<a id=link7>Example 7</a> Display introns in Column C; Hide welcome banner
</body>
</html>

Highlight Samples Examples

Below is HTML code showing how to generate URLs that:

1) highlight samples TCGA-C8-A131-01 or TCGA-BH-A0DL-01

2) highlight samples matching arbitrary criteria, such as samples in Column B with values > 10

HTML code for highlighting samples examples

<html>
<script>
	window.onload = function() {
		var browser = 'https://xenabrowser.net/';
		var columns = JSON.stringify([
			{
				"width": 136,
				"columnLabel": "gene expression RNAseq - IlluminaHiSeq",
				"fieldLabel": "TP53",
				"showIntrons": true,
				"host": "https://tcga.xenahubs.net",
				"name": "TCGA.BRCA.sampleMap/HiSeqV2",
				"fields": "TP53"
			},
			{
				"width": 200,
				"columnLabel": "somatic mutation (SNPs and small INDELs) - MC3 public version",
				"fieldLabel": "TP53",
				"host": "https://tcga.xenahubs.net",
				"name": "mc3/BRCA_mc3.txt",
				"fields": "TP53"
			}
		]);


		var heatmap1 = JSON.stringify({
			showWelcome: false,
			searchSampleList: ["TCGA-C8-A131-01", "TCGA-BH-A0DL-01"]
		});

		var l1 = document.getElementById('link1');
		l1.href = browser + 'heatmap/?columns=' + encodeURIComponent(columns) + '&heatmap=' + encodeURIComponent(heatmap1);

		var heatmap2 = JSON.stringify({
			showWelcome: false,
			search: "B:>10"
		});

		var l2 = document.getElementById('link2');
		l2.href = browser + 'heatmap/?columns=' + encodeURIComponent(columns) + '&heatmap=' + encodeURIComponent(heatmap2);
	};
</script>
<body>
	<a id=link1>Sample highlight example 1:</a> highlight samples of specific sample IDs, such as TCGA-C8-A131-01 or TCGA-BH-A0DL-01
	<br>
	<a id=link2>Sample highlight example 2:</a> highlight samples matching arbitary criteria, such as samples in Column B with values > 10
</body>
</html>

HTML code showing sample filtering (to specify what samples to display in the view) examples

<html>
<script>
	window.onload = function() {
		var browser = 'http://dev.xenabrowser.net/';
		var columns = JSON.stringify([
			{
				"width": 90,
				"columnLabel": "",
				"fieldLabel": "site id",
				"host": "https://xena.treehouse.gi.ucsc.edu",
				"name": "clinical_TumorCompendium_v11_PolyA_2020-04-09.tsv",
				"fields": "site_id"
			},
			{
				"width": 150,
				"columnLabel": "gene expression RNAseq",
				"fieldLabel": "ALK",
				"host": "https://xena.treehouse.gi.ucsc.edu",
				"name": "TumorCompendium_v11_PolyA_AllSamples_AllGenes_Kallisto_HugoLog2TPM_20230630.tsv",
				"fields": "ALK"
			}
		]);


		var heatmap1 = JSON.stringify({
			showWelcome: false,
			searchSampleList: ["THR30_0820_S01", "THR30_0861_S01"]
		});

		var l1 = document.getElementById('link1');
		l1.href = browser + 'heatmap/?columns=' + encodeURIComponent(columns) + '&heatmap=' + encodeURIComponent(heatmap1);

		var heatmap2 = JSON.stringify({
			showWelcome: false,
			search: "B:=TARGET"
		});

		var l2 = document.getElementById('link2');
		l2.href = browser + 'heatmap/?columns=' + encodeURIComponent(columns) + '&heatmap=' + encodeURIComponent(heatmap2);

		var heatmap3 = JSON.stringify({
			filter: "B:TARGET",
		});

		var l3 = document.getElementById('link3');
		l3.href = browser + 'heatmap/?columns=' + encodeURIComponent(columns) + '&heatmap=' + encodeURIComponent(heatmap3);

		var heatmap4 = JSON.stringify({
			showWelcome: false,
			filter: "B:TARGET OR B:TCGA",
		});

		var l4 = document.getElementById('link4');
		l4.href = browser + 'heatmap/?columns=' + encodeURIComponent(columns) + '&heatmap=' + encodeURIComponent(heatmap4);

		var heatmap5 = JSON.stringify({
			showWelcome: false,
			filter: "B: TARGET",
			searchSampleList: ["TARGET-40-0A4I6O-01A-01R"]
		});

		var l5 = document.getElementById('link5');
		l5.href = browser + 'heatmap/?columns=' + encodeURIComponent(columns) + '&heatmap=' + encodeURIComponent(heatmap5);

		var filterColumns = JSON.stringify([{
			"host": "https://xena.treehouse.gi.ucsc.edu",
			"name": "clinical_TumorCompendium_v11_PolyA_2020-04-09.tsv",
			"fields": "age_at_dx"
		}]);
		var heatmap6 = JSON.stringify({
			showWelcome: false,
			filter: "D:<5",
		});
		var l6 = document.getElementById('link6');
		l6.href = browser + 'heatmap/?columns=' + encodeURIComponent(columns) + '&filterColumns=' + encodeURIComponent(filterColumns) + '&heatmap=' + encodeURIComponent(heatmap6);
	};
</script>
<body>
	<a id=link1>Sample highlight Example 1:</a> highlight samples of specific sample IDs, such as THR30_0820_S01 or THR30_0861_S01
	<br><br>
	<a id=link2>Sample highlight Example 2:</a> highlight samples matching an arbitary criteria, such as TARGET samples
	<br><br>
	<a id=link3>Sample filtering Example 1:</a> specify (filter to) what samples to show in a view using a predicate, such as TARGET samples
	<br><br>
	<a id=link4>Sample filtering Example 2:</a> specify samples in a view using a predicate that includes a boolean term, such as TARGET and TCGA samples (use boolean OR)
	<br><br>
	<a id=link5>Sample filtering and highlight at the same time:</a> specify samples in a view using a predicate (e.g. just show TARGET samples), as well as highlight specific samples by IDs, such as TARGET-40-0A4I6O-01A-01R
	<br><br>
	<a id=link6>Sample filtering using data in a hidden filter column:</a> useful when you want to filter samples using data not displayed on the screen. You can use <i>HIDDEN FILTER COLUMN</i>. For exmaple, filter the samples to < 5 years old, but you don't want to actually display the age column on the screen.  
</body>
</html>

Base URL and URL construction

var page = ‘https://xenabrowser.net/heatmap/’;
var url = page + ‘?columns=’ + encodeURIComponent(columns_parameter) + \
    ‘&heatmap=’ + encodeURIComponent(heatmap_parameter);

columns parameter

The columns parameter is a JSON-encoded array of objects, specifying the columns to display.

Properties

To specify a single column you need to, at a minimum, specify the dataset ID, the hub where the data resides, and the fields that you want to display.

var column = {name: dataset1, host: hub1, fields: 'foo bar'};
var columns_parameter = JSON.stringify([column]);
var url = page + ‘?columns=’ + encodeURIComponent(columns_parameter);

Fields for genomic columns

Fields can be a gene, probe, or chromosome position. All fields need to be of the same type (i.e. all genes or all probes). You can only enter one chromosome position per column.

Fields for phenotypic columns

Field should be the field ID as it appears exactly in the dataset

Optional properties

width: <number>

Width in pixels

columnLabel: <string>

Text for top column label

fieldLabel: <string>

Text for bottom column label

geneAverage: <boolean>

Display the gene average instead of the individual probes for a gene. You can use this only when a single gene is specified for a dataset that has probes on a gene

normalize: ‘none’ | ‘mean’ | ‘log2’ | ‘normal2’

How the data should be dynamically normalized on the fly. 'mean' is x-mean (subtract mean), applied per (sub)column. 'log2' is log2(x+1). 'normal2' is (x-2).

showIntrons: <boolean>

Show introns for mutation and segmented copy number columns

sortDirection: 'reverse'

Reverse sort the samples

sortVisible: <boolean>

Sort column on the zoomed region

filterColumns parameter

Same as the columns parameter, but these columns will not be displayed. They are available for sample filtering. See the filter property of the heatmap parameter, below.

heatmap parameter

The heatmap parameter is a JSON-encoded object specifying global display options

Properties

mode: 'chart'

Display in chart mode rather than visual spreadsheet mode.

showWelcome: <boolean>

Show the welcome banner.

searchSampleList: [<string>, ...]

Highlight the specified samples in the view.

search: <string>

filter: <string>

Both search and filter can be specified in the same url, in which case the samples will be filtered, and any remaining samples matching search will be highlighted. Note that the search expression should only reference columns, not filterColumns, since the latter are not available for visualization.

var heatmap_paramter = JSON.stringify({
      showWelcome: false,
      search: "B:=TARGET"
});
var url = page + ‘?columns=’ + encodeURIComponent(columns_parameter) + \
      ‘?heatmap=’ + encodeURIComponent(heatmap_paramter);

Equivalent to typing this text into the 'Find' feature in Xena. In this example it is highlighting the samples that for column B have a value of 'TARGET'.

Like the search parameter, but filter the view to the matching samples. Equivalent to . Columns that are only needed for filtering (not visualization) can be added to the filterColumns parameter, and appear semantically after columns. For example, if columns has length two they are labeled 'B' and 'C', and the first column in filterColumns will be 'D'.

contact us
Example 1
Example 2
Example 3
Example 4
Example 5
Example 6
Example 7
More examples of possible search terms.
selecting 'Filter' from the 'Find' UI