View 3D Structure

3D visualization video tutorial on YouTube


If you cannot access YouTube, we also put the video tutorial on Bilibili, please click this link.

g3d format

3D genomic structure data can also be displayed at the browser. g3d is a new format we developped for visualizing 3D structure data in the Browser. g3d format is a binary format based in bed-like format of data contains x, y, z coordinates for each genomic bin. Documentations for how to prepare .g3d file is available at g3dtools documentation.

G3d files can be submitted as custom tracks from Tracks -> Custom Tracks, or using a datahub. Submitting a g3d track will trigger a new panel opened in the browser, which also contains menu allows you to customize the visulization, like change resolution and decorating the 3D structure using bigwig (like GC percentage) or compartment annotations.

g3d track

From Tracks menu, choose Remote Tracks, choose g3d track type and paste the g3d file url, you can also input a track label which is optional.


you can use our example file for testing purpose, this file is converted from data published in Three-dimensional genome structures of single diploid human cells, Science Vol. 361, Issue 6405, pp. 924-928 and the original data was obtained from NCBI GEO database.


click the Submit button, close the Remote track panel, this is how it looks like with default view:


By default the 3D viewer contains main and thumbnail viewer, if you zoom/rotate in one of them, both of them will be synchronized. Yellow highlighted region indicates browser region, change region in browser will also change the highlighted region in yellow.


by default the model will spin after intially loaded, you can disable the spin in configuration menu. Please see the instructions in the sections below.

3D viewer menu

Clicking the g3dmenu button will open the configuration menu for the 3D visulization, which by default floats to the left of the screen, the menu is grouped to control the model data, layout, highlighting & labeling, painting, animation and export. Each group can be clicked to toggle expansion.


The menu icon position can also be adjusted using the dropdown menu on the 3D viewer:


Config 3D model data

The Model data section can control the resolution of the g3d data.


All the models in the g3d file will be listed here and can be displayed or hidden using the eye icon button. The example screenshot below indicates the maternal model is hidden by click the its eye icon:


Show nuclear envelop

The 3d viewer uses an outer sphere to mimic the display of the nuclear envelop. Envelop can be configed to show or hide, color and opacity can also be customized.


Config the spin of 3d model

The model will spin after intially load, the spin section can used to toggle the spin status, and control the direction, speed of the spin.

_images/spin.gif _images/g3d_60.png

Config 3D viewer layout

The Layout section is used to control the layout of main and thumbnail viewer.


Change the view layout to side by side:


You can also change how the thumbnail structure looks like, for example, sphere style as below:


Highlighting & labeling

Toggle browser region highlighting

By default the main viewer would highlight the structure part belongs to current browser region in yellow, the Highlighting section is used to control this behaviour, click the Remove highlight will turn off the highlighting.


This is how it looks like when the highlighting is turned off:


Customize highlighting

Highlighting color and tube thickness can be customized to get a different viewer. As shown below, we changed the color to purple and thickness to 1:


and this is the updated and view:


Labeling by gene

Gene symbol can be searched for labeling, start with search any gene symbol, the menu will auto complete the search based on users’ input.


choose the isoform wanted:


the gene will be added as a new label in the label list:


and shown in 3D view:


update the display style of the label:


updated view of the label:


Labeling by region

User can also manully type a region for highlighting:


the added label by region search by also be updated in the menu control:


the view after added region label:


Upload a file for labeling

A text file contains list of regions/gene symbols can also be uploaded for batch labeling, as shown below, the text file contains content:


upload this file:


regions in the file are all labeled:


Pointing using arrows

instead of using shapes for labels, arrows can also be used to pointing the region desired. Choose label style as arrow:


use either gene search or region labeling:


the new added label will be displayed under arrow list:


and displayed in 3d viewer:


config the style of arrow:


updated arrow style in the viewer:


Interactivity on 3D model

Click on the segments of 3D model will bring up the menu to interact with the Browser:


Click Browser region button will let the browser jump to the region of this segment:


or you can add this segment to current browser reigon by click Add to set view button, the browser will enter Region set view mode:


you can keep adding as many segments as you want. Click Close set view button to restore to the default view.


Interactivity on tracks

From certain track types like gene and HiC track, users can choose to display gene or HiC anchors on 3D structure directly. As shown below, the tooltip of the gene has Show in 3D button, click it will add this gene to the label list and highlight it in 3D view:

_images/g3d_49.png _images/g3d_50.png

Clicking any dimond on a HiC track will also bring the Show in 3D button, click it will add both anchors of this contact to the arrow list by default:

_images/g3d_51.png _images/g3d_52.png

arrows pointing both anchors will be displayed in 3D view (there are 2 models in this structure, patenal and maternal, so 4 arrows displayed here):


Numerical painting

Numerical painting with bigwig data

The numerical track in bigWig format can be used to paint the 3D structure. The Use loaded tracks check menu allows user to load either loaded bigWig tracks in browser or submit another bigWig track with file URL.


If uncheck Use loaded tracks, a URL input will be provided for bigWig URL input:


Here we are using the GC percentage data of hg38 genome as example, add the GC Percent track from Annotation Tracks:


The GC Percent track is added:


Choose the track from the dropdown menu:


Click Paint region button:


you can also paint the whole chromosome by click the Paint chromosome button:


Click the color box on the color legend will bring a color palette for choosing colors:


Choose a different color will rerender the structure with color chosen:


Paint the whole genome is also doable, click the Paint genome button:



by default the color gradient uses the min and max values from the bigwig file, users can also set the min and max value manually by unchecking the auto scale option.

Click the Remove paint button will remove the painting.

Numerical painting with gene expression data

For painting with gene expression data, the data need be organized in the following format:

chr3        168903366       168921996       ENSG00000242268.2       2.40146671319
chr18       46756487        46764408        ENSG00000270112.3       0.0287250976522
chr3        11900011        11901245        ENSG00000225275.4       0.0
chr15       41921417        41928883        ENSG00000259883.1       0.305029986379
chr13       98949719        98950447        ENSG00000231981.3       0.0806509326125
chrX        152682810       152683842       ENSG00000269475.2       0.0
chr12       44880868        44880969        ENSG00000201788.1       0.0
chr17       57092145        57096425        ENSG00000263089.1       0.295277363304

This is a 5 column bed format file, each column is chromosome, start, end, gene id or symbol, gene expression value (can be FPKM, RPKM or whatever types of value you want to plot).

Choose Gene expression from the dropdown menu, then upload your file, click one the paint button.


And this is the view after painting with the expresion data, color and scale can be customized as described before:


Annotation painting

Supported file formats for 3D annotation painting


For cytoband there is no need to upload a file, the cytoband data will be read from current loaded genome data.


The standard refGene format from UCSC can be used for painting gene positions on 3D:

2085        NR_046630       chr3    +       196666747       196669405       196669405       196669405       3       196666747,196667841,196669263,  196666995,196668013,196669405,  0       NCBP2-AS1       unk     unk     -1,-1,-1,
2051        NR_046598       chr3    +       192232810       192234362       192234362       192234362       2       192232810,192234269,    192233297,192234362,    0       FGF12-AS2       unk     unk     -1,-1,
1312        NR_046514       chr13   +       95364969        95368199        95368199        95368199        2       95364969,95365891,      95365647,95368199,      0       SOX21-AS1       unk     unk     -1,-1,
585 NR_106918       chr1    -       17368   17436   17436   17436   1       17368,  17436,  0       MIR6859-1       unk     unk     -1,
585 NR_107062       chr1    -       17368   17436   17436   17436   1       17368,  17436,  0       MIR6859-2       unk     unk     -1,

bed 9 columns

bed file with 9th column as RGB values can be used as well, for example, the chromHMM from Roadmap project looks like:

chr10       0       94800   15_Quies        0       .       0       94800   255,255,255
chr10       94800   95600   9_Het   0       .       94800   95600   138,145,208
chr10       95600   102200  15_Quies        0       .       95600   102200  255,255,255
chr10       102200  104400  9_Het   0       .       102200  104400  138,145,208
chr10       104400  110000  15_Quies        0       .       104400  110000  255,255,255
chr10       110000  111200  9_Het   0       .       110000  111200  138,145,208

bed 4 columns

To make things simple, a 4 column bed format is supported as well, with the 4th column has color value:

chr11       108280000       109080000       #ff0100
chr11       109080000       109480000       #0000ff
chr11       109720000       110160000       #018100
chr11       110200000       111400000       #0064fb
chr11       111400000       112640000       #ef8c0a
chr11       112640000       113480000       #7f007f
chr11       113520000       114520000       #520000
chr11       114520000       114880000       #39ae00

4DN compartment data

Compartment calls table file can also be used to paint the 3D structure. We supported the compartment calls data 4DNFIL65C8ZI from 4DN data portal. The file is pretty small about 1MB in size. The file can either in raw text file (example text) or in compressed gzip format example gzipped text for upload.

The 4DN compartment data looks like:

chrom       start   end     gene_count      gene_coverage   E1      E2      E3
chr1        0       100000  595     0.8812700000000001
chr1        100000  200000  952     1.0
chr1        200000  300000  159     0.09797
chr1        300000  400000  132     0.05368
chr1        400000  500000  471     0.24454
chr1        500000  600000  390     0.15467999999999998
chr1        600000  700000  229     0.05782999999999999

Rao compartment data

The paper from Rao published in Cell in 2014 also containes a compartment format, the format looks like below:

chr19       0       200000  NA      0       .       0       200000  255,255,255
chr19       200000  500000  B1      -1      .       200000  500000  220,20,60
chr19       500000  3800000 A1      2       .       500000  3800000 34,139,34
chr19       3800000 3900000 B1      -1      .       3800000 3900000 220,20,60
chr19       3900000 5000000 A1      2       .       3900000 5000000 34,139,34
chr19       5000000 5600000 B1      -1      .       5000000 5600000 220,20,60


The uploaded file for annotation painting can be raw text file or compressed with gzip, but NOT with bgzip.

Example annotation painting

Choose the format of your data be used to painting from the dropdown menu:


Then click one the paint button, the upload file button will appear if the format is not cytoband.

cytoband painting

_images/g3d_24.png _images/g3d_25.png

4DN compartment painting

The screenshot below is an example using the compartment calls table mentioned above to paint the whole chromosome, green part indicates compartment A and red part indicates compartment B, color can also be customized. The operations are similar to numerical painting, and the painting can also be removed with provided button.

_images/g3d_56.png _images/g3d_57.png

chromHMM painting

The screenshot below is an example using the chromHMM data from Roadmap to paint the whole chromosome.

_images/g3d_58.png _images/g3d_59.png

Animations on 3D

g3d format is designed to be a container file format, it might contain multiple models from haplotypes or different cells/samples, each model may also contain data at different resolution. This example file contains 3D structure data from 3 different cell at different resolutions. When there are multiple models available, the 3D viewer can play animation while each model will be displayed as a frame and loop over every model. Add this example as g3d track, this is how it looks like:


in the Animation section, click the Play button the animation will start, Stop will stop the animation, and Reset will reset the viewer to default view style.


Please check the animation below (speed was adjusted to reduce animation file size for documentation):


Sync 3D structure with dynamic hic

Since the browser have both dynamic hic track type and animation over 3D structures, there is a way to sync the animation between dynamic hic track and 3D structure. The Sync dynamic HiC button enables animation synchronization between dynamic hic and models in 3D structure. Please see the animation below for example:


Export 3D images

The 3D viewer can export current view as image in png format for download. Simplely click the buttons under Export section, users can download the image in main and thumbnail viewer.