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/gallery/gallery09_BACKGROUND.js"></script>
<script src="./data/gallery/gallery09_HISTOGRAM.js"></script>
<!-- Genome configuration -->
<script>
  var BioCircosGenome = [
     ["2L" , 23011544],
     ["2R" , 21146708],
     ["3L" , 24543557],
     ["3R" , 27905053],
     ["X" , 22422827],
     ["4" , 1351857]
  ];
  BioCircos01 = new BioCircos(BACKGROUND01,BACKGROUND02,BACKGROUND03,BACKGROUND04,HISTOGRAM01,HISTOGRAM02,HISTOGRAM03,HISTOGRAM04,BioCircosGenome,{
     target : "biocircos",
     svgWidth : 960,
     svgHeight : 600,
     chrPad : 0.04,
     innerRadius: 246,
     outerRadius: 252,
     zoom : true,
     genomeFillColor: ["#999999"],
     HISTOGRAMMouseEvent : true,
     HISTOGRAMMouseClickDisplay : false,
     HISTOGRAMMouseClickColor : "red",            //"none","red"
     HISTOGRAMMouseClickOpacity : 1.0,            //"none",1.0
     HISTOGRAMMouseClickStrokeColor : "none",  //"none","#F26223"
     HISTOGRAMMouseClickStrokeWidth : "none",          //"none",3
     HISTOGRAMMouseDownDisplay : false,
     HISTOGRAMMouseDownColor : "red",            //"none","red"
     HISTOGRAMMouseDownOpacity : 1.0,            //"none",1.0
     HISTOGRAMMouseDownStrokeColor : "none",  //"none","#F26223"
     HISTOGRAMMouseDownStrokeWidth : "none",          //"none",3
     HISTOGRAMMouseEnterDisplay : false,
     HISTOGRAMMouseEnterColor : "red",            //"none","red"
     HISTOGRAMMouseEnterOpacity : 1.0,            //"none",1.0
     HISTOGRAMMouseEnterStrokeColor : "none",  //"none","#F26223"
     HISTOGRAMMouseEnterStrokeWidth : "none",          //"none",3
     HISTOGRAMMouseLeaveDisplay : false,
     HISTOGRAMMouseLeaveColor : "red",            //"none","red"
     HISTOGRAMMouseLeaveOpacity : 1.0,            //"none",1.0
     HISTOGRAMMouseLeaveStrokeColor : "none",  //"none","#F26223"
     HISTOGRAMMouseLeaveStrokeWidth : "none",          //"none",3
     HISTOGRAMMouseMoveDisplay : false,
     HISTOGRAMMouseMoveColor : "red",            //"none","red"
     HISTOGRAMMouseMoveOpacity : 1.0,            //"none",1.0
     HISTOGRAMMouseMoveStrokeColor : "none",  //"none","#F26223"
     HISTOGRAMMouseMoveStrokeWidth : "none",          //"none",3
     HISTOGRAMMouseOutDisplay : true,
     HISTOGRAMMouseOutAnimationTime : 500,
     HISTOGRAMMouseOutColor : "red",            //"none","red"
     HISTOGRAMMouseOutOpacity : 1.0,            //"none",1.0
     HISTOGRAMMouseOutStrokeColor : "none",  //"none","#F26223"
     HISTOGRAMMouseOutStrokeWidth : "none",          //"none",3
     HISTOGRAMMouseUpDisplay : true,
     HISTOGRAMMouseUpColor : "red",            //"none","red"
     HISTOGRAMMouseUpOpacity : 1.0,            //"none",1.0
     HISTOGRAMMouseUpStrokeColor : "none",  //"none","#F26223"
     HISTOGRAMMouseUpStrokeWidth : "none",          //"none",3
     HISTOGRAMMouseOverDisplay : true,
     HISTOGRAMMouseOverColor : "red",            //"none","red"
     HISTOGRAMMouseOverOpacity : 1.0,            //"none",1.0
     HISTOGRAMMouseOverStrokeColor : "none",  //"none","#F26223"
     HISTOGRAMMouseOverStrokeWidth : "none",          //"none",3
     HISTOGRAMMouseOverTooltipsHtml01 : "chr :",
     HISTOGRAMMouseOverTooltipsHtml02 : "<br>position: ",
     HISTOGRAMMouseOverTooltipsHtml03 : "-",
     HISTOGRAMMouseOverTooltipsHtml04 : "<br>name : ",
     HISTOGRAMMouseOverTooltipsHtml05 : "<br>value : ",
     HISTOGRAMMouseOverTooltipsHtml06 : "",
     HISTOGRAMMouseOverTooltipsPosition : "absolute",
     HISTOGRAMMouseOverTooltipsBackgroundColor : "white",
     HISTOGRAMMouseOverTooltipsBorderStyle : "solid",
     HISTOGRAMMouseOverTooltipsBorderWidth : 0,
     HISTOGRAMMouseOverTooltipsPadding : "3px",
     HISTOGRAMMouseOverTooltipsBorderRadius : "3px",
     HISTOGRAMMouseOverTooltipsOpacity : 0.8,
     genomeBorder : {
        display : true,
        borderColor : "#000",
        borderSize : 0.5
     },
     ticks : {
        display : true,
        len : 5,
        color : "#000",
        textSize : 10,
        textColor : "#000",
        scale : 2000000
     },
     genomeLabel : {
        display : true,
        textSize : 15,
        textColor : "#000",
        dx : 0.028,
        dy : "-0.55em"
     }
  });
  BioCircos01.draw_genome(BioCircos01.genomeLength);
</script>
    </body>
</html>
3. Open the html file in the browser to see the following results.
Download
Gallery09: Histogram test
