Display a LEGEND module step by step

0. Download all files in this tutorial.

Download LEGEND.zip and click *.html file(in LEGEND.zip) to open this demo in local browser!.

1. Including LEGEND configuration

    Example file: LEGEND01.js

    Data structure

    Users should prepare the input data in the following format (separated by tabs).

    var LEGEND1 = [ "LEGEND1" , {
       x: 300,
       y: -230,
       title: " ",
       titleSize: 16,
       titleWeight: "bold",
       GapBetweenGraphicText:5,
       GapBetweenLines:20
       } , [
          {type: "circle", color:"#1E77B4",opacity:"1.0",circleSize:"8",text: "C.CK", textSize: "14",textWeight:"normal"},
          {type: "circle", color:"#AEC7E8",opacity:"1.0",circleSize:"8",text: "C.NPK", textSize: "14",textWeight:"normal"},
          {type: "circle", color:"#FF7F0B",opacity:"1.0",circleSize:"8",text: "GC.CK", textSize: "14",textWeight:"normal"},
          {type: "circle", color:"#FFBB78",opacity:"1.0",circleSize:"8",text: "GC.NPK", textSize: "14",textWeight:"normal"},
          .....
          {type: "circle", color:"#BCBC22",opacity:"1.0",circleSize:"8",text: "Verrucomicrobia", textSize: "14",textWeight:"normal"},
          {type: "circle", color:"#DADB8D",opacity:"1.0",circleSize:"8",text: "Ascomycota", textSize: "14",textWeight:"normal"},
          {type: "circle", color:"#19BDCF",opacity:"1.0",circleSize:"8",text: "Basidiomycota", textSize: "14",textWeight:"normal"},
          {type: "circle", color:"#9ED9E5",opacity:"1.0",circleSize:"8",text: "Zygomycota", textSize: "14",textWeight:"normal"},
       ]];
    

2. Initialize LEGEND configuration with data tag : LEGEND01

    Prepare a <div> tag with “example” id to set the picture position your will draw in html, e.g.:

    NGCircos01 = new NGCircos(LEGEND01,NGCircosGenome,{ // Initialize with "LEGEND01" data tag

3. Source code

    When step 1 and 2 are finished, the configuration for NGCircos:

    <button class="svg-action-btn download-img" style="height: 18px;line-height: 18px;padding: 0 11px;background: #FFFFFF;border: 1px #D9D9D9 solid;border-radius: 3px;display: inline-block;font-size: 12px;outline: none;color: black">Download png ↓</button>
    <a href="javascript:(function () { var e = document.createElement('script');if (window.location.protocol === 'https:') { e.setAttribute('src', './lib/svg-crowbar.js'); } else { e.setAttribute('src', './lib/svg-crowbar.js'); } e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();" style="height: 18px;line-height: 18px;padding: 0 11px;background: #FFFFFF;border: 1px #D9D9D9 solid;border-radius: 3px;display: inline-block;font-size: 12px;outline: none;color: black" >Download svg ↓</a>
    <div id="NGCircos"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div id="NGCircos"></div>
                    </div>
                </div>
    <!-- Data configuration -->
    <script src="./lib/jquery.js"></script>
    <script src="./lib/d3.js"></script>
    <script src="./lib/NGCircos.js"></script>
    <script src="js/LEGEND01.js"></script>
    <!-- Genome configuration -->
    <script>
    var NGCircosGenome = [[
      ["EGFR",1211],
      ]];
      NGCircos01 = new NGCircos(LEGEND01, NGCircosGenome,{
      target:"NGCircos",
      svgWidth:900,
      svgHeight:600,
      svgClassName:"lollipop",
      chrPad:0.04,
      innerRadius:246,
      outerRadius:250,
      zoom:true,
      genomeFillColor:["#999999"],
      ticks:{
      display:false,
      len:5,
      color:"#000",
      textSize:10,
      textColor:"#000",
      scale:30000000,
      realLength:false,
      },
      genomeLabel:{
      display:true,
      textSize:15,
      textColor:"#000",
      dx:0.028,
      dy:"-0.55em",
      },
      genomeBorder:{
      display:true,
      borderColor:"#000",
      borderSize:0.5,
      },
      });
      NGCircos01.draw_genome(NGCircos01.genomeLength);
      NGCircos01.draw_genome(NGCircos01.genomeLength2);
    </script>
    <script src="./lib/saveSvgAsPng.js"></script>
    <script>
    
          (function(){
            var downloadImg = getEle(".download-img"),
              imgName = getEle("."+NGCircos01.svgClassName);
    
            //          imgScale = getEle(".img-scale");
    
            downloadImg.addEventListener("click",function(){
              var mySvg = getEle("."+NGCircos01.svgClassName),
                //iImgScale = parseInt(imgScale.value) || 1,
                oImgName = imgName.value || NGCircos01.svgClassName;
    
    //          saveSvgAsPng(mySvg, oImgName+".png", iImgScale);
              saveSvgAsPng(mySvg, oImgName+".png");
    
            })
    
            function getEle(obj){
              var d = document;
              return d.querySelector(obj);
            }
          })()
    </script>

4. Visualization of LEGEND data using NG-Circos

Download svg ↓