Gallery11: 4 types of EML4-ALK fusions(click to other webpages)

1. Prepare data.

  • gallery11_ARC_redirect.js
  • gallery11_LINK.js
  • 2. Configure circle.

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>BioCircos.js</title>
        </head>
        <body>
            <!-- BioCircos.js, Jquery.js and D3.js import -->
            <script src="./lib/jquery.js"></script>
            <script src="./lib/d3.js"></script>
            <script src="./lib/biocircos-1.1.2.js"></script>
            <!-- Prepare a <div> tag with "biocircos" id to set the picture position your will draw in html -->
            <div id="biocircos"></div>
    <!-- Data configuration -->
    <script src="./data/gallery/gallery11_ARC_redirect.js"></script>
    <script src="./data/gallery/gallery11_LINK.js"></script>
    <!-- Genome configuration -->
    <style>
        .BioCircosLINKTooltip{  
        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 BioCircosGenome = [
         ["EML4" , 982],
         ["ALK" , 1621],
      ];
      BioCircos01 = new BioCircos(ARC01,ARC02,ARC03,ARC04,ARC05,ARC06,LINK01,LINK02,LINK03,LINK04,BioCircosGenome,{
         target : "biocircos",
         svgWidth : 900,
         svgHeight : 600,
         zoom : true,
         innerRadius: 246,
         outerRadius: 250,
         LINKMouseEvent : true,
         LINKMouseClickDisplay : false,
         LINKMouseClickColor : "green",
         LINKMouseClickStrokeWidth : 4,
         LINKMouseClickStrokeOpacity : 1.0,
         LINKMouseDownDisplay : false,
         LINKMouseDownOpacity : 1.0,
         LINKMouseDownStrokeColor : "#F26223",
         LINKMouseDownStrokeWidth : 1,
         LINKMouseEnterDisplay : false,
         LINKMouseEnterOpacity : 1.0,
         LINKMouseEnterStrokeColor : "red",
         LINKMouseEnterStrokeWidth : "none",
         LINKMouseLeaveDisplay : false,
         LINKMouseLeaveColor : "pink",
         LINKMouseLeaveOpacity : 1.0,
         LINKMouseLeaveStrokeColor : "#F26223",
         LINKMouseLeaveStrokeWidth : 0,
         LINKMouseMoveDisplay : false,
         LINKMouseMoveOpacity : 1.0,
         LINKMouseMoveStrokeColor : "#F26223",
         LINKMouseMoveStrokeWidth : 0,
         LINKMouseOutDisplay : false,
         LINKMouseOutAnimationTime : 500,
         LINKMouseOutOpacity : 1.0,
         LINKMouseOutStrokeColor : "red",
         LINKMouseOutStrokeWidth : 1,
         LINKMouseUpDisplay : false,
         LINKMouseUpOpacity : 1.0,
         LINKMouseUpStrokeColor : "#F26223",
         LINKMouseUpStrokeWidth : 0,
         LINKMouseOverDisplay : true,
         LINKMouseOverOpacity : 1.0,
         LINKMouseOverStrokeColor : "#F26223",  //"none","#F26223"
         LINKMouseOverStrokeWidth : "none",  //"none",3
         LINKMouseOverTooltipsHtml01 : "Gene: ",
         LINKMouseOverTooltipsHtml02 : "<br>Position: ",
         LINKMouseOverTooltipsHtml03 : "<br>Value: ",
         LINKMouseOverTooltipsHtml04 : "<br>Des: ",
         LINKMouseOverTooltipsHtml05 : "",
         LINKMouseOverTooltipsPosition : "absolute",
         LINKMouseOverTooltipsBackgroundColor : "white",
         LINKMouseOverTooltipsBorderStyle : "solid",
         LINKMouseOverTooltipsBorderWidth : 0,
         LINKMouseOverTooltipsPadding : "3px",
         LINKMouseOverTooltipsBorderRadius : "3px",
         LINKMouseOverTooltipsOpacity : 0.8,
         LINKLabelDragEvent : true,
         ARCMouseEvent : true,
         ARCMouseDownDisplay : false,
         ARCMouseDownColor : "none",
         ARCMouseDownArcOpacity : 1.0,
         ARCMouseDownArcStrokeColor : "#F26223",
         ARCMouseDownArcStrokeWidth : 1,
         ARCMouseEnterDisplay : false,
         ARCMouseEnterColor : "none",
         ARCMouseEnterArcOpacity : 1.0,
         ARCMouseEnterArcStrokeColor : "#F26223",
         ARCMouseEnterArcStrokeWidth : 1,
         ARCMouseLeaveDisplay : false,
         ARCMouseLeaveColor : "none",
         ARCMouseLeaveArcOpacity : 1.0,
         ARCMouseLeaveArcStrokeColor : "#F26223",
         ARCMouseLeaveArcStrokeWidth : 0,
         ARCMouseMoveDisplay : false,
         ARCMouseMoveColor : "none",
         ARCMouseMoveArcOpacity : 1.0,
         ARCMouseMoveArcStrokeColor : "#F26223",
         ARCMouseMoveArcStrokeWidth : 0,
         ARCMouseOutDisplay : true,
         ARCMouseOutAnimationTime : 500,
         ARCMouseOutColor : "none",
         ARCMouseOutArcOpacity : 1.0,
         ARCMouseOutArcStrokeColor : "red",
         ARCMouseOutArcStrokeWidth : 0,
         ARCMouseUpDisplay : false,
         ARCMouseUpColor : "grey",
         ARCMouseUpArcOpacity : 1.0,
         ARCMouseUpArcStrokeColor : "#F26223",
         ARCMouseUpArcStrokeWidth : 0,
         ARCMouseOverDisplay : true,
         ARCMouseOverColor : "none",
         ARCMouseOverArcOpacity : 1.0,
         ARCMouseOverArcStrokeColor : "red", //"none","#F26223"
         ARCMouseOverArcStrokeWidth : "none", //"none",3
         ARCMouseOverTooltipsHtml01 : "",
         ARCMouseOverTooltipsHtml02 : "<br>Position: ",
         ARCMouseOverTooltipsHtml03 : "AA - ",
         ARCMouseOverTooltipsHtml04 : "AA<br>Name: ",
         ARCMouseOverTooltipsHtml05 : "",
         ARCMouseOverTooltipsPosition : "absolute",
         ARCMouseOverTooltipsBackgroundColor : "white",
         ARCMouseOverTooltipsBorderStyle : "solid",
         ARCMouseOverTooltipsBorderWidth : 0,
         ARCMouseOverTooltipsPadding : "3px",
         ARCMouseOverTooltipsBorderRadius : "3px",
         ARCMouseOverTooltipsOpacity : 0.8,
         genomeFillColor: ["#999999"],
         ticks : {
            display : true,
            len : 5,
            color : "#000",
            textSize : 8,
            textColor : "#000",
            scale : 100
         },
         genomeLabel : {
            display : true,
            textSize : 18,
            textColor : "red",
            dx : 0.1,
            dy : "-0.95em"
         }
      });
      BioCircos01.draw_genome(BioCircos01.genomeLength);
    </script>
        </body>
    </html>

    3. Open the html file in the browser to see the following results.

    Download