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 ↓