Display a LOLLIPOP module step by step

0. Download all files in this tutorial.

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

1. Input data.

    Example file: LOLLIPOP01.txt

    Data structure

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

    #protein   chr   pos   strand   CancerTypeNumber   AA_pos   AA_change   Consequence   color   type   link
    EGFR 7       101219410       +       2       AA_858  L/R     missense_variant        #FEFF00 Hetero  https://www.intogen.org/search?gene=EGFR
    EGFR 7       101219417       +       2       AA_858  L/R     missense_variant        #FEFF00 Homo    https://www.intogen.org/search?gene=EGFR
    EGFR 7       101219425       +       1       AA_858  L/R     missense_variant        #FEFF00 Homo    https://www.intogen.org/search?gene=EGFR
    EGFR 7       101219431       +       3       AA_858  L/R     missense_variant        #FEFF00 Homo    https://www.intogen.org/search?gene=EGFR
    ......
    EGFR 7       101220278       +       3       AA_858  L/R     missense_variant        #FEFF00 Hetero  https://www.intogen.org/search?gene=EGFR
    EGFR 7       101220281       +       2       AA_858  L/R     missense_variant        #FEFF00 Homo    https://www.intogen.org/search?gene=EGFR
    EGFR 7       101220288       +       1       AA_858  L/R     missense_variant        #FEFF00 Homo    https://www.intogen.org/search?gene=EGFR
    EGFR 7       101220295       +       1       AA_858  L/R     missense_variant        #FEFF00 Hetero  https://www.intogen.org/search?gene=EGFR
    

    Following fields are required:

    • The 1 column(protein) is the name of the protein.

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

    • The 3 column(pos) is the position of the point.

      Others are optional:

    • The 4 column(strand) is the strand position of the point.

    • The 5 column(CancerTypeNumber) is the number of cancer where the mutation is found.

    • The 6 column(AA_pos) is the AA position of the point.

    • The 7 column(AA_change) is the AA_change of the point.

    • The 8 column(Consequence) is the consequence of the point.

    • The 9 column(color) is the specific color of the point.

    • The 10 column(type) is the mutation type of the point.

    • The 11 column(link) is the hyperlink address of the point.

2. Prepare module through python script.

    Use:

    python NGCircos_PrepareData.py LOLLIPOP LOLLIPOP01.txt > LOLLIPOP01.js

    Example file: LOLLIPOP01.js

    Details in js file:

    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"},
    ]];
        
    Note: explaination for each parameter is available in document

3. Including LOLLIPOP data

    Use <script> tag to include LOLLIPOP01.js.

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

4. Initialize NG-Circos with LOLLIPOP data

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

    NGCircos01 = new NGCircos(LOLLIPOP01,ARC01,NGCircosGenome,{ // Initialize with "LOLLIPOP01,ARC01" 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>
                </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/LOLLIPOP01.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"},
    ]];
    
      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:false,
      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>

6. Visualization of LOLLIPOP data using NG-Circos

Download svg ↓