Scribl
Example
#
Find similar titles
- 최초 작성자
- 최근 업데이트
Structured data
- Category
- Programming
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;
}
그 결과는 다음과 같다.
Suggested Pages #
- 0.025 유전체
- 0.025 자바스크립트
- 0.013 Next-generation_sequencing
- More suggestions...