BioCircos.js

1. Prepare data.
2. Configure genome.
<!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.0.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/karyotype.human.hg19.js"></script>
<script src="./data/gallery/gallery08_LINE01.js"></script>
<script src="./data/gallery/gallery08_LINE02.js"></script>
<!-- Genome configuration -->
<script>
  var BioCircosGenome = [
     ["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]
  ];
  BioCircos01 = new BioCircos(ARC_hg19,BACKGROUND01,BACKGROUND02,LINE01,LINE02,BioCircosGenome,{
     target : "biocircos",
     svgWidth : 900,
     svgHeight : 600,
     chrPad : 0.04,
     innerRadius: 246,
     outerRadius: 270,
     zoom : true,
     LINEMouseEvent : true,
     LINEMouseClickDisplay : false,
     LINEMouseClickLineOpacity : 1,           //"none"
     LINEMouseClickLineStrokeColor : "red",   //"none"
     LINEMouseClickLineStrokeWidth : "none",  //"none"
     LINEMouseDownDisplay : false,
     LINEMouseDownLineOpacity : 1,           //"none"
     LINEMouseDownLineStrokeColor : "red",   //"none"
     LINEMouseDownLineStrokeWidth : "none",  //"none"
     LINEMouseEnterDisplay : false,
     LINEMouseEnterLineOpacity : 1,           //"none"
     LINEMouseEnterLineStrokeColor : "red",   //"none"
     LINEMouseEnterLineStrokeWidth : "none",  //"none"
     LINEMouseLeaveDisplay : false,
     LINEMouseLeaveLineOpacity : 1,           //"none"
     LINEMouseLeaveLineStrokeColor : "red",   //"none"
     LINEMouseLeaveLineStrokeWidth : "none",  //"none"
     LINEMouseMoveDisplay : false,
     LINEMouseMoveLineOpacity : 1,           //"none"
     LINEMouseMoveLineStrokeColor : "red",   //"none"
     LINEMouseMoveLineStrokeWidth : "none",  //"none"
     LINEMouseOutDisplay : true,
     LINEMouseOutAnimationTime : 500,
     LINEMouseOutLineOpacity : 1.0,   //"none"
     LINEMouseOutLineStrokeColor : "red",    //"none"
     LINEMouseOutLineStrokeWidth : "none",    //"none"
     LINEMouseUpDisplay : false,
     LINEMouseUpLineOpacity : 1,           //"none"
     LINEMouseUpLineStrokeColor : "red",   //"none"
     LINEMouseUpLineStrokeWidth : "none",  //"none"
     LINEMouseOverDisplay : false,
     LINEMouseOverLineOpacity : 1,           //"none"
     LINEMouseOverLineStrokeColor : "red",   //"none"
     LINEMouseOverLineStrokeWidth : "none",  //"none"
     LINEMouseOverTooltipsHtml01 : "Line",
     LINEMouseOverTooltipsPosition : "absolute",
     LINEMouseOverTooltipsBackgroundColor : "white",
     LINEMouseOverTooltipsBorderStyle : "solid",
     LINEMouseOverTooltipsBorderWidth : 0,
     LINEMouseOverTooltipsPadding : "3px",
     LINEMouseOverTooltipsBorderRadius : "3px",
     LINEMouseOverTooltipsOpacity : 0.8,
  });
  BioCircos01.draw_genome(BioCircos01.genomeLength);
</script>
    </body>
</html>
3. Open the html file in the browser to see the following results.
Download
Gallery08: Line test(hg19)
