BioCircos.js

1. Configure the width and color 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>
<!-- Genome configuration -->
<script>
  var BioCircosGenome = [
     ["chr1" , 249250621],
     ["chr2" , 243199373],
     ["chr3" , 198022430],
     ["chr4" , 191154276],
     ["chr5" , 180915260],
     ["chr6" , 171115067]
  ];
  BioCircos01 = new BioCircos(BioCircosGenome,{
     target : "biocircos",
     svgWidth : 900,
     svgHeight : 600,
     innerRadius: 246,
     outerRadius: 250,
     genomeFillColor: ["#999999"]
  });
  BioCircos01.draw_genome(BioCircos01.genomeLength);
</script>
    </body>
</html>

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

Download

Gallery01: Genome width and color