Scribl Example #
Find similar titles

Structured data

Category: Programming

Scribl 예제
Suggested Pages

Scribl 예제 #

(HTML5 canvas genomics graphic library) Scribl은 자바스크립트 언어의 canbas-based graphics library 로 생물 데이터를 그래픽하게 보여줄 수 있다.이는 genome regions, alignments 및 어셈블 데이터를 보여줄 수 있다.

기본 사용법 #

간단히 사용법은 다음과 같다.

// Get Canvas
var canvas = document.getElementById(canvasName);
// Create Chart with canvas, width
chart = new Scribl(canvas, 500);
// Add Gene with position, length, orientation
gene1 = chart.addGene( 5, 750 , '+');
// Draw Chart
chart.draw();

기본 문법을 따져보면 먼저 html문서의 ID=canvasName를 찾아서 빈 캔버스를 하나 생성한다. 이후 500 픽셀의 챠트를 생성하고 여기에 + 방향으로 유전자를 생성하는 예제이다

Attribute #

이미지의 기본 속성 정의는 간단히 몇가지로 분류할 수 있다.

Roundness(라운딩처리)
- glyph.roundness = 1 // in pixels
Color(색상)
- glyph.color = 'rgb(120,0,255)'
Semantic zoom level(줌))
- // display as nucleotide when you have at least 4 pixels per nucleotide glyph.ntLevel = 4 // in pixels // turn off nucleotide semantic zoom glyph.ntLevel = undefined;
Text-Align(정렬)
- absolute 예)glyph.text.align = 'left'; // aligns to the left side of the gene
- Relative 예)glyph.text.align = 'start'; // aligned at the start of the gene - left for '+' strand genes and right for '-' strand genes
Text(폰트 설정 및 크기)
- Font 예)glyph.text.font = 'arial';
- Size 예)glyph.text.size = '15'; // in pixels
- Color 예) glyph.text.color = 'black';

event #

이미지의 이벤트 정의는 다음과 같다.

Click 예) glyph.onClick = "http://www.google.com"
Mouseover 예)glyph.onMouseover = "Moused Over"

Glyph #

Glyph의 종류는 다음과 같다

BlockArrow glyph
Line glyph
Rect glyph
Arrow glyph
Seq glyph
Complex glyph

예제 #

function draw(canvasName) {  
   // Get Canvas and Create Chart
   var canvas = document.getElementById(canvasName);

   // Create Chart
   chart1 = new Scribl(canvas, 500);

   // Add Genes      position, length, orientation
   gene1 = chart1.addGene( 900,    750 , '-');
   gene2 = chart1.addGene( 3500, 2500, '+');
   gene3 = chart1.addGene( 8100, 1000, '-');
   gene4 = chart1.addGene( 6200, 1500, '+');
   gene5 = chart1.addGene( 1000,  1000, '-');       
   gene6 = chart1.addGene( 3500, 1500, '-');        
   gene7 = chart1.addGene( 2230, 1000, '+');
   gene8 = chart1.addGene( 4500, 1500, '+');                
   gene9 = chart1.addGene( 7230, 1000, '-');

   // add name
   gene3.name = "Gene 2";

   // Draw Chart
   chart1.draw();

   // Create image of chart1
   var img = chart1.canvas.toDataURL("image/png");
   // Add link to download image
   document.getElementById('export').href = img;
}

그 결과는 다음과 같다.