BioCircos.js

1. Prepare data.
EGFR protein domain and mutation data from IntOGen
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.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/gallery06_SNP01.js"></script>
<script src="./data/gallery/gallery06_SCATTER01.js"></script>
<script src="./data/gallery/gallery06_ARC01.js"></script>
<script src="./data/gallery/gallery06_ARC02.js"></script>
<!-- Genome configuration -->
<script>
var TEXT01 = [ "TEXT01" , {
   x: -10,
   y: 0,
   textSize: 10,
   textWeight: "bold", //normal,bold,bolder,lighter,100,200,300,400,500,600,700,800,900
   textColor: "red",
   textOpacity: 1.0,
   text: "EGFR"
}];
  var BioCircosGenome = [
     ["EGFR" , 1211],
  ];
  BioCircos01 = new BioCircos(TEXT01,ARC01,ARC02,BACKGROUND01,SCATTER01,SNP01,BioCircosGenome,{
     target : "biocircos",
     svgWidth : 900,
     svgHeight : 600,
     innerRadius: 246,
     outerRadius: 250,
     zoom : false,
     ARCMouseOnDisplay: true,
     SNPMouseEvent : true,
     SNPMouseClickDisplay : true,
     SNPMouseClickColor : "red",
     SNPMouseClickCircleSize : 4,
     SNPMouseClickCircleOpacity : 1.0,
     SNPMouseClickCircleStrokeColor : "#F26223",
     SNPMouseClickCircleStrokeWidth : 0,
     SNPMouseClickTextFromData : "second",   //first,second,third,fourth column
     SNPMouseClickTextOpacity : 1,
     SNPMouseClickTextColor : "red",
     SNPMouseClickTextSize : 8,
     SNPMouseClickTextPostionX : 1.0,
     SNPMouseClickTextPostionY : 10,
     SNPMouseClickTextDrag : true,
     ARCMouseEvent : true,
     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,
     SCATTERMouseEvent : true,
     SCATTERMouseClickDisplay : true,
     SCATTERMouseClickColor : "none", //"none","red"
     SCATTERMouseClickCircleSize : "none", //"none",4
     SCATTERMouseClickCircleOpacity : 1.0,
     SCATTERMouseClickCircleStrokeColor : "#F26223",
     SCATTERMouseClickCircleStrokeWidth : 0,
     SCATTERMouseClickTextFromData : "fourth",   //first,second,third,fourth/fifth column
     SCATTERMouseClickTextOpacity : 1,
     SCATTERMouseClickTextColor : "red",
     SCATTERMouseClickTextSize : 8,
     SCATTERMouseClickTextPostionX : 10.0,
     SCATTERMouseClickTextPostionY : 10.0,
     SCATTERMouseClickTextDrag : true,
     genomeFillColor: ["#999999"],
     ticks : {
        display : true,
        len : 5,
        color : "#000",
        textSize : 8,
        textColor : "#000",
        scale : 20
     },
     genomeLabel : {
        display : false,
        textSize : 16,
        textColor : "red",
        dx : 3.14,
        dy : "-0.95em"
     }
  });
  BioCircos01.draw_genome(BioCircos01.genomeLength);
</script>
    </body>
</html>
2. Open the html file in the browser to see the following results.
Download
Gallery06: EGFR targeted drugs and the distribution of the observed cancer mutations
