Step by step visualize CbioPortal data using NG-Circos

0. Download all files in this tutorial.

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

1. Download data from CbioPortal datahub in Github.

    Example file: SNP01.txt  CNV01.txt  LINK01.txt  data_mutations_extended.txt  data_cna_hg19.seg  data_fusions.txt

    (1)Download data from CbioPortal

    (a) Clone cBioPortal datahub
git clone https://github.com/cBioPortal/datahub.git
cd datahub
git lfs install --local --skip-smudge

(b) Download data using cBioPortal data ID
git lfs pull -I public/nsclc_pd1_msk_2018
cd public/nsclc_pd1_msk_2018/

(c) Files in public/nsclc_pd1_msk_2018/
data_mutations_extended.txt
data_cna_hg19.seg
data_fusions.txt

    (2)Process CbioPortal data 

    (a)Process SNP module data
awk -F "\t" '{print $5"\t"$6"\t"$7"\t"$1"\t"$38}' ./CbioPortal/nsclc_pd1_msk_2018/data_mutations_extended.txt | sed '1d' | sort | uniq -c | sort | sed 's/^ *//' | awk -F " " '$1>0{print $2"\t"$3"\t"$1"\t"$5"|"$6}' > ./CbioPortal/SNP01.txt
python3 NGCircos_PrepareData.py SNP ./CbioPortal/SNP01.txt > ./CbioPortal/SNP01.js         #prepare SNP js file

(b)Process CNV module data
awk -F "\t" '(2^$6*2)>3{print $2"\t"$3"\t"$4"\t"(2^$6*2)}' ./CbioPortal/nsclc_pd1_msk_2018/data_cna_hg19.seg | sort -k1,1 -k2,2n > ./CbioPortal/CNV.txt
bedtools merge -i cnv.txt -c 4 -o count > ./CbioPortal/CNV01.txt
python3 NGCircos_PrepareData.py CNV ./CbioPortal/CNV01.txt > ./CbioPortal/CNV01.js        #prepare CNV js file

(c)Process LINK module data
grep "::" ./CbioPortal/nsclc_pd1_msk_2018/data_fusions.txt | awk -F "\t" '{print $10}' | awk -F ":" '{print $1"\t"$2"\t"$3"\t"$4"\t"$5"\t"$6}' | awk -F "\)" '{print $1"\t"$2"\t"$5"\t"$6}' | sed 's/Note//g'| sed 's/(NM_002944//g'| sed 's/(NM_001025159//g'| sed 's/(NM_013956//g' | sed 's/(NM_000321//g' | sed 's/(NM_006424//g' | sed 's/(//g' | grep -v "rearrangement" | uniq | sed 's/g\.//g' | sed 's/chr//g' | sed 's/ //g' | sed 's/-//g' | sed 's/ROS1$//g' | sed 's/5q32;6q22.1//g' | gsed 's/\t/@/g' | sed 's/@@/@/g' | sed 's/@$//' | awk -F "@" '{print $1"--"$2"\t"$3"\t"$4"\t"$4"\t"$1"\t"$5"\t"$6"\t"$6"\t"$2}' > ./CbioPortal/LINK01.txt
python3 NGCircos_PrepareData.py LINK ./CbioPortal/LINK01.txt > ./CbioPortal/LINK01.js            #prepare LINK js file

2. Input data.

    The input data of NG-Circos can be either generated by the supporting python scripts, or directly through the well documented JSON data formats.

    Example file: SNP01.txt

    Data structure

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

    #chr    pos     value   des
1	11181344	10	MTOR|ENST00000361445.4:c.6892G>C
1	11184573	3	MTOR|ENST00000361445.4:c.6644C>T
1	11188582	25	MTOR|ENST00000361445.4:c.5839G>C
 ......
15	99442709	1	IGF1R|ENST00000268035.6:c.1106A>G
15	99442834	2	IGF1R|ENST00000268035.6:c.1231G>T
15	99451967	18	IGF1R|ENST00000268035.6:c.1301G>C

    Following fields are required:

    • The 1 column(chr) is the name of the chromosome.

    • The 2 column(pos) is the position of the SNP.

    • The 3 column(value) is the value(density, P-value, etc.) of the SNP.

    • The 4 column(des) is the description of the SNP.

    Example file: CNV01.txt

    Data structure

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

    #chr    start   end     value
1	2488138	2494650	1
1	11307736	11319386	1
1	40361361	40367520	4
......
12	46123666	49449083	3
12	56474126	57864972	4
12	58142354	69233342	17

    Following fields are required:

    • The 1 column(chr) is the name of the chromosome.

    • The 2 column(start) is the start of the CNV region.

    • The 3 column(end) is the end of the CNV region.

    • The 4 column(value) is the copy number of CNV region.

    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
CD74--NRG1	5	149782758	149782758	CD74	8	32513214	32513214	NRG1
CD74--ROS1	5	149783763	149783763	CD74	6	117647234	117647234	ROS1
CD74--NRG1	8	32549502	32549502	CD74	5	149782966	149782966	NRG1
ROS1--SLC34A2	4	25667671	25667671	ROS1	6	117662059	117662059	SLC34A2

    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.

3. Prepare module through python script.

    Use:

    python NGCircos_PrepareData.py SNP SNP01.txt > SNP01.js
python NGCircos_PrepareData.py CNV CNV01.txt > CNV01.js
python NGCircos_PrepareData.py LINK LINK01.txt > LINK01.js

    Example file: SNP01.js   CNV01.js   LINK01.js   BACKGROUND01.js   BACKGROUND02.js  

    Details in SNP01.js file:

    var SNP01 = [ "SNP01" , {
  maxRadius: 205,
  minRadius: 173,
  SNPFillColor: "#9400D3",
  PointType: "circle",
  circleSize: 2,
  rectWidth: 2,
  rectHeight: 2,
  displaySNPAxis: false,
  SNPAxisColor: "#B8B8B8",
  SNPAxisWidth: 0.5
} , [
  {chr: "1", pos: "11181344", value: "1", des: "MTOR|ENST00000361445.4:c.6892G>C", color: "rgb(153,102,0)"},
  {chr: "1", pos: "11184573", value: "1", des: "MTOR|ENST00000361445.4:c.6644C>T", color: "rgb(153,102,0)"},
  {chr: "1", pos: "11188582", value: "1", des: "MTOR|ENST00000361445.4:c.5839G>C", color: "rgb(153,102,0)"},
   ......
  {chr: "12", pos: "25398284", value: "11", des: "KRAS|ENST00000256078.4:c.35G>A", color: "rgb(204,0,0)"},
  {chr: "12", pos: "25398284", value: "14", des: "KRAS|ENST00000256078.4:c.35G>T", color: "rgb(204,0,0)"},
  {chr: "12", pos: "25398285", value: "36", des: "KRAS|ENST00000256078.4:c.34G>T", color: "rgb(204,0,0)"},
]];
    Note: explaination for each parameter is available in document

    Details in CNV01.js file:

    var CNV01 = [ "CNV01" , {
  maxRadius: 155,
  minRadius: 116,
  CNVwidth: 2,
  CNVColor: "#4876FF",
} , [
  {chr: "1", start: "2488138", end: "2494650", value: "1"},
  {chr: "1", start: "11307736", end: "11319386", value: "1"},
  {chr: "1", start: "40361361", end: "40367520", value: "4"},
   ......
  {chr: "X", start: "451142", end: "53253997", value: "16"},
  {chr: "X", start: "66765797", end: "76763968", value: "2"},
  {chr: "X", start: "100604909", end: "149924738", value: "4"},
 ]];
    Note: explaination for each parameter is available in document

    Details in LINK01.js file:

    var LINK01 = [ "LINK01" , {
  LinkRadius: 100,
  LinkFillColor: "#F26223",
  LinkWidth: 3,
  LinkType:"Q",
  displayLinkAxis: true,
  LinkAxisColor: "#B8B8B8",
  LinkAxisWidth: 0.5,
  LinkAxisPad: 3,
  displayLinkLabel: false,
  LinkLabelColor: "red",
  LinkLabelSize: 13,
  LinkLabelPad: 8,
} , [
  {fusion: "CD74--NRG1", g1chr: "5", g1start: "149782758", g1end: "149782758", g1name: "CD74", g2chr: "8", g2start: "32513214", g2end: "32513214", g2name: "NRG1"},
  {fusion: "CD74--ROS1", g1chr: "5", g1start: "149783763", g1end: "149783763", g1name: "CD74", g2chr: "6", g2start: "117647234", g2end: "117647234", g2name: "ROS1"},
  {fusion: "CD74--NRG1", g1chr: "8", g1start: "32549502", g1end: "32549502", g1name: "CD74", g2chr: "5", g2start: "149782966", g2end: "149782966", g2name: "NRG1"},
  {fusion: "ROS1--SLC34A2", g1chr: "4", g1start: "25667671", g1end: "25667671", g1name: "ROS1", g2chr: "6", g2start: "117662059", g2end: "117662059", g2name: "SLC34A2"},
]];
    Note: explaination for each parameter is available in document

4. Including SNP/CNV/LINK data

    Use <script> tag to include SNP01.js/CNV01.js/LINK01.js and BACKGROUND01.js/BACKGROUND02.js.

    <script src="js/SNP01.js"></script> 
    <script src="js/CNV01.js"></script> 
    <script src="js/LINK01.js"></script> 
    <script src="js/BACKGROUND01.js"></script> 
    <script src="js/BACKGROUND02.js"></script>

5. Initialize NG-Circos

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

    NGCircos01 = new NGCircos(SNP01,CNV01,LINK01,BACKGROUND01,BACKGROUND02,NGCircosGenome,{ // Initialize with "SNP01""CNV01""LINK01" data tag

6. Source code

    When step 1 to 5 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>
                  </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="./CbioPortal/SNP01.js"></script>
      <script src="./CbioPortal/BACKGROUND01.js"></script>
      <script src="./CbioPortal/CNV01.js"></script>
      <script src="./CbioPortal/BACKGROUND02.js"></script>
      <script src="./CbioPortal/LINK01.js"></script>
      <!-- Genome configuration -->
      <script>
        var NGCircosGenome = [
          [
           ["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(SNP01,BACKGROUND01,CNV01,BACKGROUND02,LINK01,NGCircosGenome,{  // Initialize with "SNP01" data tag
        //Main configuration
           target : "NGCircos",                       // Main configuration "target"
           svgWidth : 900,                             // Main configuration "svgWidth"
           svgHeight : 600,                            // Main configuration "svgHeight"
           svgClassName: "NGCircos",                  // Main configuration "svgClassName"
           chrPad : 0.04,                              // Main configuration "chrPad"
           innerRadius: 246,                           // Main configuration "innerRadius"
           outerRadius: 270,                           // Main configuration "outerRadius"
      LINKMouseEvent: true,
      LINKMouseOutDisplay: true,
      LINKMouseOutAnimationTime: 500,
      LINKMouseOutOpacity: 1,
      LINKMouseOutStrokeColor: "green",
      LINKMouseOutStrokeWidth: 4,
      LINKMouseOverDisplay: true,
      LINKMouseOverStrokeColor: "green",
      LINKMouseOverOpacity: 1,
      LINKMouseOverStrokeWidth: 3,
      LINKLabelDragEvent: false,
      CNVMouseOutDisplay: true,
      CNVMouseOutAnimationTime: 500,
      CNVMouseOverDisplay : true,
      CNVMouseOverColor : "red",
      CNVMouseOverArcOpacity : 1.0,
      CNVMouseOverArcStrokeColor : "#F26223",
      CNVMouseOverArcStrokeWidth : 3,
      CNVMouseOverTooltipsSetting :"style1",
        });
        NGCircos01.draw_genome(NGCircos01.genomeLength); // NGCircos2.js callback
        NGCircos01.draw_genome(NGCircos01.genomeLength2); // NGCircos2.js callback
      </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 SNP data using NG-Circos

Download svg