BioCircos.js

1. Prepare data.

64 are OncomiRs (pink, gallery04_SCATTER01.js).

537 are known cancer genes (red, gallery04_SCATTER03.js).

1463 are candidate cancer genes (yellow, gallery04_SCATTER02.js).

<script>
var SCATTER01 = [ "SCATTER01" , {
  SCATTERRadius: 220,
  innerCircleSize: 1,
  outerCircleSize: 7,
  innerCircleColor: "red",
  outerCircleColor: "#CC3399",
  random_data: 0
} , [
  {chr: "9", start: "96938239" , end: "96938318", name: "hsa-let-7a-1" , des: "leukemia, leiomyoma, urothelial, ovarian, stomach, colon, cervical, prostate, lung, breast, gastric"},
  {chr: "11", start: "122017230" , end: "122017301", name: "hsa-let-7a-2" , des: "leukemia, leiomyoma, urothelial, ovarian, stomach, colon, cervical, prostate, lung, breast, gastric"},
......
  {chr: "7", start: "99691391" , end: "99691470", name: "hsa-mir-93" , des: "neuroblastoma, colon, myeloma, prostate, gastric"},
  {chr: "X", start: "53583184" , end: "53583302", name: "hsa-mir-98" , des: "leukemia, leiomyoma, urothelial, ovarian, stomach, colon, cervical, prostate, lung, breast, gastric"},
]];
</script>

2. Configure the width of 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/gallery04_SCATTER01.js"></script>
<script src="./data/gallery/gallery04_SCATTER02.js"></script>
<script src="./data/gallery/gallery04_SCATTER03.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(SCATTER01,SCATTER02,SCATTER03,BioCircosGenome,{
     target : "biocircos",
     svgWidth : 900,
     svgHeight : 600,
     chrPad : 0.04,
     innerRadius: 246,
     outerRadius: 270,
     zoom : true,
     genomeFillColor: ["#FFFFCC", "#CCFFFF", "#FFCCCC", "#CCCC99","#0099CC", "#996699", "#336699", "#FFCC33","#66CC00"],
     SCATTERMouseOverDisplay : true,
     SCATTERMouseOverTooltipsHtml01 : "chr : ",
     SCATTERMouseOverTooltipsHtml02 : "<br>start : ",
     SCATTERMouseOverTooltipsHtml03 : "<br>end : ",
     SCATTERMouseOverTooltipsHtml04 : "<br>name : ",
     SCATTERMouseOverTooltipsHtml05 : "<br>cancer : ",
     SCATTERMouseOverTooltipsHtml06 : "",
     SCATTERMouseOverTooltipsPosition : "absolute",
     SCATTERMouseOverTooltipsBackgroundColor : "#D1EEEE",
     SCATTERMouseOverTooltipsBorderStyle : "solid",
     SCATTERMouseOverTooltipsBorderWidth : 0,
     SCATTERMouseOverTooltipsPadding : "3px",
     SCATTERMouseOverTooltipsBorderRadius : "5px",
     SCATTERMouseOverTooltipsOpacity : 0.7,
     SCATTERMouseOutDisplay : true,
     SCATTERMouseOutAnimationTime : 800,
     SCATTERMouseOutColor : "none",
     SCATTERMouseOutCircleSize : "none",
     SCATTERMouseOutCircleStrokeWidth : 0,
  });
  BioCircos01.draw_genome(BioCircos01.genomeLength);
</script>
    </body>
</html>

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

Download

Gallery04: Cancer diver genes/miRNAs