NGCircos.js

0. Download all files in this tutorial.

Download LINK.zip and click *.html file(in LINK.zip) to open this demo in local browser!.

1. Input data.

Example file: LINK01.txt

Data structure

Users should prepare the input data in the following format (separated by tabs).

#name   g1chr   g1start g1end   g1name  g2chr   g2start g2end   g2name
FGFR3--TACC3    4       1795662 1808986 FGFR3   4       1723217 1746905 TACC3
CCDC6--RET      10      43595894        43623714        RET     10      61552678        61666182        TACC3
ETV6--NTRK3     12      11905384        12043977        ETV6    15      88420169        88799384        NTRK3
EGFR--SEPT14    7       55086971        55273307        EGFR    7       55861237        55930482        SEPT14
EML4--ALK       2       42472644        42557344        EML4    2       29416093        30143525        ALK
ABL1--BCR       9       133589707       133761067       ABL1    22      23523148        23657706        BCR

Following fields are required:

The 1 column(name) is the name of the link.
The 2 column(g1chr) is the chromosome of gene 1.
The 3 column(g1start) is the start of gene 1.
The 4 column(g1end) is the end of gene 1.
The 5 column(g1name) is the name of gene 1.
The 6 column(g2chr) is the chromosome of gene 2.
The 7 column(g2start) is the start of gene 2.
The 8 column(g2end) is the end of gene 2.
The 9 column(g2name) is the name of gene 2.

2. Prepare module through python script.

Use:

python NGCircos_PrepareData.py LINK LINK01.txt > LINK01.js

Example file: LINK01.js

Details in js file:

var LINK01 = [ "LINK01" , {
    LinkRadius: 140,
    LinkFillColor: "#F26223",
    LinkWidth: 3,
    LinkType:"Q",
    displayLinkAxis: true,
    LinkAxisColor: "#B8B8B8",
    LinkAxisWidth: 0.5,
    LinkAxisPad: 3,
    displayLinkLabel: true,
    LinkLabelColor: "red",
    LinkLabelSize: 13,
    LinkLabelPad: 8,
    } , [
    {fusion: "FGFR3--TACC3", g1chr: "4", g1start: "1795662", g1end: "1808986", g1name: "FGFR3", g2chr: "4", g2start: "1723217", g2end: "1746905", g2name: "TACC3"},
    {fusion: "CCDC6--RET", g1chr: "10", g1start: "43595894", g1end: "43623714", g1name: "RET", g2chr: "10", g2start: "61552678", g2end: "61666182", g2name: "TACC3"},
    {fusion: "ETV6--NTRK3", g1chr: "12", g1start: "11905384", g1end: "12043977", g1name: "ETV6", g2chr: "15", g2start: "88420169", g2end: "88799384", g2name: "NTRK3"},
    {fusion: "EGFR--SEPT14", g1chr: "7", g1start: "55086971", g1end: "55273307", g1name: "EGFR", g2chr: "7", g2start: "55861237", g2end: "55930482", g2name: "SEPT14"},
    {fusion: "EML4--ALK", g1chr: "2", g1start: "42472644", g1end: "42557344", g1name: "EML4", g2chr: "2", g2start: "29416093", g2end: "30143525", g2name: "ALK"},
    {fusion: "ABL1--BCR", g1chr: "9", g1start: "133589707", g1end: "133761067", g1name: "ABL1", g2chr: "22", g2start: "23523148", g2end: "23657706", g2name: "BCR"},
]];
    

Note: explaination for each parameter is available in document

3. Including LINK data

Use <script> tag to include LINK01.js.

<script src="js/LINK01.js"></script> 

4. Initialize NG-Circos with LINK data

Prepare a <div> tag with “example” id to set the picture position your will draw in html, e.g.:

NGCircos01 = new NGCircos(LINK01,NGCircosGenome,{ // Initialize with "LINK01" data tag

5. Source code

When step 1 to 4 are finished, the configuration for NGCircos:

<button class="svg-action-btn download-img" style="height: 18px;line-height: 18px;padding: 0 11px;background: #FFFFFF;border: 1px #D9D9D9 solid;border-radius: 3px;display: inline-block;font-size: 12px;outline: none;color: black">Download png ↓</button>
<a href="javascript:(function () { var e = document.createElement('script');if (window.location.protocol === 'https:') { e.setAttribute('src', './lib/svg-crowbar.js'); } else { e.setAttribute('src', './lib/svg-crowbar.js'); } e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();" style="height: 18px;line-height: 18px;padding: 0 11px;background: #FFFFFF;border: 1px #D9D9D9 solid;border-radius: 3px;display: inline-block;font-size: 12px;outline: none;color: black" >Download svg ↓</a>
<div id="NGCircos"></div>
            <div class="row">
                <div class="col-lg-12">
                    <div id="NGCircos"></div>
                </div>
            </div>
<!-- Data configuration -->
<script src="./lib/jquery.js"></script>
<script src="./lib/d3.js"></script>
<script src="./lib/NGCircos.js"></script>
<script src="js/LINK01.js"></script>
<!-- Genome configuration -->
<style>
    .NGCircosLINKTooltip{
    position: absolute;
    width: 120;
    height: auto;
    font-family: simsun;
    font-size: 14px;
    text-align: center;
    border-style: solid;
    border-width: 3px;
    background-color: red;
    border-radius: 5px;
    }
</style>
<script>
  var NGCircosGenome = [      // Configure your own genome here.
    [
     ["1" , 249250621],
     ["2" , 243199373],
     ["3" , 198022430],
     ["4" , 191154276],
     ["5" , 180915260],
     ["6" , 171115067],
     ["7" , 159138663],
     ["8" , 146364022],
     ["9" , 141213431],
     ["10" , 135534747],
     ["11" , 135006516],
     ["12" , 133851895],
     ["13" , 115169878],
     ["14" , 107349540],
     ["15" , 102531392],
     ["16" , 90354753],
     ["17" , 81195210],
     ["18" , 78077248],
     ["19" , 59128983],
     ["20" , 63025520],
     ["21" , 48129895],
     ["22" , 51304566],
     ["X" , 155270560],
     ["Y" , 59373566]
    ]
  ];
  NGCircos01 = new NGCircos(LINK01,NGCircosGenome,{       // Initialize NGCircos.js with "NGCircosGenome" and Main configuration
     target : "NGCircos",                              // Main configuration "target"
     svgWidth : 900,                                  // Main configuration "svgWidth"
     svgHeight : 600,                                 // Main configuration "svgHeight"
     svgClassName: "NGCircos",                  // Main configuration "svgClassName"
     LINKMouseEvent: true,
     LINKMouseOutDisplay: true,
     LINKMouseOutAnimationTime: 500,
     LINKMouseOutOpacity: 1,
     LINKMouseOutStrokeColor: "green",
     LINKMouseOutStrokeWidth: 4,
     LINKMouseOverDisplay: true,
     LINKMouseOverStrokeColor: "green",
     LINKMouseOverOpacity: 1,
     LINKMouseOverStrokeWidth: 3,
     LINKLabelDragEvent: false,
  });
  NGCircos01.draw_genome(NGCircos01.genomeLength);  // NGCircos.js callback
  NGCircos01.draw_genome(NGCircos01.genomeLength2);
</script>
<script src="./lib/saveSvgAsPng.js"></script>
<script>

      (function(){
        var downloadImg = getEle(".download-img"),
          imgName = getEle("."+NGCircos01.svgClassName);

        //          imgScale = getEle(".img-scale");

        downloadImg.addEventListener("click",function(){
          var mySvg = getEle("."+NGCircos01.svgClassName),
            //iImgScale = parseInt(imgScale.value) || 1,
            oImgName = imgName.value || NGCircos01.svgClassName;

//          saveSvgAsPng(mySvg, oImgName+".png", iImgScale);
          saveSvgAsPng(mySvg, oImgName+".png");

        })

        function getEle(obj){
          var d = document;
          return d.querySelector(obj);
        }
      })()
</script>

6. Visualization of LINK data using NG-Circos

Download svg

Display a LINK module step by step

0. Download all files in this tutorial.

1. Input data.

Example file: LINK01.txt

Data structure

2. Prepare module through python script.

Use:

Example file: LINK01.js

Details in js file:

Note: explaination for each parameter is available in document

3. Including LINK data

Use <script> tag to include LINK01.js.

4. Initialize NG-Circos with LINK data

Prepare a <div> tag with “example” id to set the picture position your will draw in html, e.g.:

5. Source code

When step 1 to 4 are finished, the configuration for NGCircos:

6. Visualization of LINK data using NG-Circos