Display a REDIRECT module step by step

0. Download all files in this tutorial.

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

1. REDIRECT data preparation in LOLLIPOP

Modify the output file you got from NGCircos_PrepareData.py

Before, the LOLLIPOP01.js looks like this:

var LOLLIPOP01 = [ "LOLLIPOP01" , {
   LOLLIPOPFillColor:"#9400D3",
   LOLLIPOPSecondColor: "#FFFFFFF",
   PointType: "circle",
   circleSize: 6,
   stroke:true,
   strokeColor: "#999999",
   strokeWidth: "1px",
   lineAutoHeight: true,
   LOLLIPOPAnimationDisplay: false,
   LOLLIPOPLineWidth: 1,
   LOLLIPOPLineColor: "#000000",
   realStart: 101219350,
} , [
   {protein: "EGFR", chr: "7", pos: "101219410", strand: "+", CancerTypeNumber: "2", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Hetero"},
   {protein: "EGFR", chr: "7", pos: "101219417", strand: "+", CancerTypeNumber: "2", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo"},
   {protein: "EGFR", chr: "7", pos: "101219425", strand: "+", CancerTypeNumber: "1", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo"},
   {protein: "EGFR", chr: "7", pos: "101219431", strand: "+", CancerTypeNumber: "3", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo"},
   ......
   {protein: "EGFR", chr: "7", pos: "101220278", strand: "+", CancerTypeNumber: "3", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Hetero"},
   {protein: "EGFR", chr: "7", pos: "101220281", strand: "+", CancerTypeNumber: "2", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo"},
   {protein: "EGFR", chr: "7", pos: "101220288", strand: "+", CancerTypeNumber: "1", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo"},
   {protein: "EGFR", chr: "7", pos: "101220295", strand: "+", CancerTypeNumber: "1", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Hetero"},
]];

To start using REDIRECT module in LOLLIPOP, add a parameter called link for each mutation as the following:

var LOLLIPOP01 = [ "LOLLIPOP01" , {
   var LOLLIPOP01 = [ "LOLLIPOP01" , {
   LOLLIPOPFillColor:"#9400D3",
   LOLLIPOPSecondColor: "#FFFFFFF",
   PointType: "circle",
   circleSize: 6,
   stroke:true,
   strokeColor: "#999999",
   strokeWidth: "1px",
   lineAutoHeight: true,
   LOLLIPOPAnimationDisplay: false,
   LOLLIPOPLineWidth: 1,
   LOLLIPOPLineColor: "#000000",
   realStart: 101219350,
} , [
   {protein: "EGFR", chr: "7", pos: "101219410", strand: "+", CancerTypeNumber: "2", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Hetero", link: "https://www.intogen.org/search?gene=EGFR"},
   {protein: "EGFR", chr: "7", pos: "101219417", strand: "+", CancerTypeNumber: "2", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo", link: "https://www.intogen.org/search?gene=EGFR"},
   {protein: "EGFR", chr: "7", pos: "101219425", strand: "+", CancerTypeNumber: "1", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo", link: "https://www.intogen.org/search?gene=EGFR"},
   {protein: "EGFR", chr: "7", pos: "101219431", strand: "+", CancerTypeNumber: "3", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo", link: "https://www.intogen.org/search?gene=EGFR"},
   ......
   {protein: "EGFR", chr: "7", pos: "101220278", strand: "+", CancerTypeNumber: "3", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Hetero", link: "https://www.intogen.org/search?gene=EGFR"},
   {protein: "EGFR", chr: "7", pos: "101220281", strand: "+", CancerTypeNumber: "2", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo", link: "https://www.intogen.org/search?gene=EGFR"},
   {protein: "EGFR", chr: "7", pos: "101220288", strand: "+", CancerTypeNumber: "1", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo", link: "https://www.intogen.org/search?gene=EGFR"},
   {protein: "EGFR", chr: "7", pos: "101220295", strand: "+", CancerTypeNumber: "1", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Hetero", link: "https://www.intogen.org/search?gene=EGFR"},
]];

Example file: REDIRECT01.js

2. Set LOLLIPOPxlink as true(default false) in NGCircos01

The code should looks like below:

NGCircos01 = new NGCircos(LOLLIPOP01,NGCircosGenome,{
   target:"NGCircos",
   svgWidth:900,
   svgHeight:600,
   svgClassName:"lollipop",
   ......
   LOLLIPOPxlink:true,
   ......

3. Source code

When step 1 and 2 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="js/REDIRECT01.js"></script>
<!-- Genome configuration -->
<script>
var ARC01 = [ "ARC01" , {
innerRadius:240,
outerRadius:256,
} , [
{chr:"EGFR",start:"57",end:"167",color:"#FFBB77",des:"Recep_L_domain"},
{chr:"EGFR",start:"185",end:"338",color:"#FF7F0E",des:"Furin-like_domain"},
{chr:"EGFR",start:"361",end:"480",color:"#FFBB77",des:"Recep_L_domain"},
{chr:"EGFR",start:"505",end:"636",color:"#1F77B4",des:"GF_recep_IV_domain"},
{chr:"EGFR",start:"713",end:"965",color:"#AEC6E7",des:"Pkinase_Tyr_domain"},
]];
</script>
<!-- Genome configuration -->
<script>
  var NGCircosGenome = [[
  ["EGFR",1211],
  ]];
  NGCircos01 = new NGCircos(LOLLIPOP01,ARC01, NGCircosGenome,{
  target:"NGCircos",
  svgWidth:900,
  svgHeight:600,
  svgClassName:"lollipop",
  chrPad:0.04,
  innerRadius:246,
  outerRadius:250,
  zoom:true,
  genomeFillColor:["#999999"],
  ticks:{
  display:false,
  len:5,
  color:"#000",
  textSize:10,
  textColor:"#000",
  scale:30000000,
  realLength:false,
  },
  genomeLabel:{
  display:true,
  textSize:15,
  textColor:"#000",
  dx:0.028,
  dy:"-0.55em",
  },
  genomeBorder:{
  display:true,
  borderColor:"#000",
  borderSize:0.5,
  },
  TEXTModuleDragEvent:false,
  LOLLIPOPxlink:true,
  LOLLIPOPMouseEvent:true,
  LOLLIPOPMouseClickDisplay:false,
  LOLLIPOPMouseClickColor:"none",
  LOLLIPOPMouseClickCircleSize: "none",
  LOLLIPOPMouseClickCircleOpacity: "none",
  LOLLIPOPMouseClickCircleStrokeColor: "none",
  LOLLIPOPMouseClickCircleStrokeWidth:"none",
  LOLLIPOPMouseClickTextFromData: "first",
  LOLLIPOPMouseClickTextOpacity:0,
  LOLLIPOPMouseClickTextColor: "none",
  LOLLIPOPMouseClickTextSize: 0,
  LOLLIPOPMouseClickTextPostionX: 0,
  LOLLIPOPMouseClickTextPostionY: 0,
  LOLLIPOPMouseClickTextDrag: true,
  LOLLIPOPMouseDownDisplay:false,
  LOLLIPOPMouseDownColor:"none",
  LOLLIPOPMouseDownCircleSize: "none",
  LOLLIPOPMouseDownCircleOpacity: "none",
  LOLLIPOPMouseDownCircleStrokeColor: "none",
  LOLLIPOPMouseDownCircleStrokeWidth:"none",
  LOLLIPOPMouseEnterDisplay:false,
  LOLLIPOPMouseEnterColor:"none",
  LOLLIPOPMouseEnterCircleSize: "none",
  LOLLIPOPMouseEnterCircleOpacity: "none",
  LOLLIPOPMouseEnterCircleStrokeColor: "none",
  LOLLIPOPMouseEnterCircleStrokeWidth:"none",
  LOLLIPOPMouseLeaveDisplay:false,
  LOLLIPOPMouseLeaveColor:"none",
  LOLLIPOPMouseLeaveCircleSize: "none",
  LOLLIPOPMouseLeaveCircleOpacity: "none",
  LOLLIPOPMouseLeaveCircleStrokeColor: "none",
  LOLLIPOPMouseLeaveCircleStrokeWidth:"none",
  LOLLIPOPMouseMoveDisplay:false,
  LOLLIPOPMouseMoveColor:"none",
  LOLLIPOPMouseMoveCircleSize: "none",
  LOLLIPOPMouseMoveCircleOpacity: "none",
  LOLLIPOPMouseMoveCircleStrokeColor: "none",
  LOLLIPOPMouseMoveCircleStrokeWidth:"none",
  LOLLIPOPMouseOutDisplay:true,
  LOLLIPOPMouseOutAnimationTime:700,
  LOLLIPOPMouseOutColor:"none",
  LOLLIPOPMouseOutCircleSize: "none",
  LOLLIPOPMouseOutCircleOpacity: 1,
  LOLLIPOPMouseOutCircleStrokeColor: "#999999",
  LOLLIPOPMouseOutCircleStrokeWidth:1,
  LOLLIPOPMouseUpDisplay:false,
  LOLLIPOPMouseUpColor:"none",
  LOLLIPOPMouseUpCircleSize: "none",
  LOLLIPOPMouseUpCircleOpacity: "none",
  LOLLIPOPMouseUpCircleStrokeColor: "none",
  LOLLIPOPMouseUpCircleStrokeWidth:"none",
  LOLLIPOPMouseOverDisplay:true,
  LOLLIPOPMouseOverColor:"red",
  LOLLIPOPMouseOverCircleSize: 5,
  LOLLIPOPMouseOverCircleOpacity: 1,
  LOLLIPOPMouseOverCircleStrokeColor: "#F26223",
  LOLLIPOPMouseOverCircleStrokeWidth:3,
  LOLLIPOPMouseOverTooltipsHtml01:"protein : ",
  LOLLIPOPMouseOverTooltipsHtml02:"<br>chr : ",
  LOLLIPOPMouseOverTooltipsHtml03:"<br>pos : ",
  LOLLIPOPMouseOverTooltipsHtml04:"<br>strand : ",
  LOLLIPOPMouseOverTooltipsHtml05:"<br>CancerTypeNumber : ",
  LOLLIPOPMouseOverTooltipsHtml06:"<br>AA_pos : ",
  LOLLIPOPMouseOverTooltipsHtml07:"<br>AA_change : ",
  LOLLIPOPMouseOverTooltipsHtml08:"<br>Consequence : ",
  LOLLIPOPMouseOverTooltipsHtml09:"",
  LOLLIPOPMouseOverTooltipsPosition:"absolute",
  LOLLIPOPMouseOverTooltipsBackgroundColor:"white",
  LOLLIPOPMouseOverTooltipsBorderStyle:"solid",
  LOLLIPOPMouseOverTooltipsBorderWidth:1,
  LOLLIPOPMouseOverTooltipsPadding:"3px",
  LOLLIPOPMouseOverTooltipsBorderRadius:"3px",
  LOLLIPOPMouseOverTooltipsOpacity:0.8,
  ARCMouseEvent:true,
  ARCMouseClickDisplay:false,
  ARCMouseClickColor:"none",
  ARCMouseClickArcOpacity: "none",
  ARCMouseClickArcStrokeColor: "none",
  ARCMouseClickArcStrokeWidth:"none",
  ARCMouseClickTextFromData: "first",
  ARCMouseClickTextOpacity:0,
  ARCMouseClickTextColor: "none",
  ARCMouseClickTextSize: 0,
  ARCMouseClickTextPostionX: 0,
  ARCMouseClickTextPostionY: 0,
  ARCMouseClickTextDrag: true,
  ARCMouseDownDisplay:false,
  ARCMouseDownColor:"none",
  ARCMouseDownArcOpacity: "none",
  ARCMouseDownArcStrokeColor: "none",
  ARCMouseDownArcStrokeWidth:"none",
  ARCMouseEnterDisplay:false,
  ARCMouseEnterColor:"none",
  ARCMouseEnterArcOpacity: "none",
  ARCMouseEnterArcStrokeColor: "none",
  ARCMouseEnterArcStrokeWidth:"none",
  ARCMouseLeaveDisplay:false,
  ARCMouseLeaveColor:"none",
  ARCMouseLeaveArcOpacity: "none",
  ARCMouseLeaveArcStrokeColor: "none",
  ARCMouseLeaveArcStrokeWidth:"none",
  ARCMouseMoveDisplay:false,
  ARCMouseMoveColor:"none",
  ARCMouseMoveArcOpacity: "none",
  ARCMouseMoveArcStrokeColor: "none",
  ARCMouseMoveArcStrokeWidth:"none",
  ARCMouseOutDisplay:true,
  ARCMouseOutAnimationTime:700,
  ARCMouseOutColor:"none",
  ARCMouseOutArcOpacity: 1,
  ARCMouseOutArcStrokeColor: "#9400D3",
  ARCMouseOutArcStrokeWidth:0,
  ARCMouseUpDisplay:false,
  ARCMouseUpColor:"none",
  ARCMouseUpArcOpacity: "none",
  ARCMouseUpArcStrokeColor: "none",
  ARCMouseUpArcStrokeWidth:"none",
  ARCMouseOverDisplay:true,
  ARCMouseOverColor:"red",
  ARCMouseOverArcOpacity: 1,
  ARCMouseOverArcStrokeColor: "#F26223",
  ARCMouseOverArcStrokeWidth:3,
  ARCMouseOverTooltipsHtml01:"item : ",
  ARCMouseOverTooltipsHtml02:"<br>start : ",
  ARCMouseOverTooltipsHtml03:"<br>end : ",
  ARCMouseOverTooltipsHtml04:"<br>des : ",
  ARCMouseOverTooltipsHtml05:" ",
  ARCMouseOverTooltipsPosition:"absolute",
  ARCMouseOverTooltipsBackgroundColor:"white",
  ARCMouseOverTooltipsBorderStyle:"solid",
  ARCMouseOverTooltipsBorderWidth:1,
  ARCMouseOverTooltipsPadding:"3px",
  ARCMouseOverTooltipsBorderRadius:"3px",
  ARCMouseOverTooltipsOpacity:0.8,
  });
  NGCircos01.draw_genome(NGCircos01.genomeLength);
  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>

4. Visualization of REDIRECT data using NG-Circos