v0.3
- Arrow Glyph
- Line Glyph
- Complex Glyph
- BED Format Support
- Add Border Color to Glyphs
- Glyphs With Only Border (No Fill Color)
- add pics to each of these
Quick Start - Create a simple chart
// Get Canvas and Create Chart
var canvas = document.getElementById(canvasName);
// Create Chart
var chart = new Scribl(canvas, 500);
// Add Gene position, length, orientation
var gene = chart.addGene( 900, 750 , '-');
// Draw Chart
chart.draw();##Glyphs Glyphs are the symbols that can be added to a chart. There are currently 4 glyphs: BlockArrow, Arrow, Rect, and Line
###Common Glyph Attributes###
glyph.roundness = 1 // in pixels- Color *
glyph.color = 'rgb(120,0,255'glyph.text.align = 'left'; // aligns to the left side of the gene
glyph.text.align = 'center'; // aligns in the center
glyph.text.align = 'right'; // align to the right side// relative positioning - based on the strand the gene in on
glyph.text.align = 'start'; // aligned at the start of the gene - left for '+' strand genes and right for '-' strand genes
glyph.text.align = 'end'; // aligned at the end of the gene - opposite of start glyph.font.style = 'arial';glyph.font.size = '15'; // in pixels glyph.font.color = 'black';###Common Glyph Events###
- Click *
// open website
glyph.onClick = "http://www.google.com"
// Execute Function
glyph.onClick = function() {alert("I've been clicked");}glyph.onMouseover = "Moused Over"
###BlockArrow Glyph###
javascript
BlockArrow( type, start, length, strand, {opts} )
<a name="line_glyph"></a>
###[Line Glyph](#line_glyph)###
```javascript```
Line( type, start, length, {opts} )
var line = chart1.addFeature( new Line('arrow', 0, 500));
line.thickness = 2;
###Rect Glyph###
Rect( type, start, length, {opts} )rect1 = chart1.addFeature( new Rect('gene', 0, 1000, '+'));
###Arrow Glyph###
The arrow glyph sits at a single point and shows direction
javascript
Arrow( type, position, strand, {opts} )
* <a name="arrow_glyph_attributes"></a>[Arrow Specific Attributes](#arrow_glyph_attributes) -
* <a name="arrow_glyph_thickness">[Thickness](#arrow_glyph_thickness)
```javascript
arrow1 = chart1.addFeature( new Arrow('arrow', 500, '+'));
arrow1.thickness = 2;
###Complex Glyph###
javascript
Complex( type, start, length, strand, [exons], {opts} )
The complex glyph is made up of multiple subglyphs: ```Line``` (connecting line) and one or more other Exon glyphs (```Arrow```, ```Rect```, ... ). Exon glyph's start values are relative to the start value of the parent complex glyph. So if the parent complex glyph has a start value of 1500 and an exon glyph has a start value of 10, the exon glyph will start at 1500 + 10 or 1510
```javascript
// Add Complex Gene type, position, length, orientation, array of exons glyphs
gene1 = chart1.addFeature(
new Complex('gene', 1500, 8000, '+', [
// add exons type, relative-start, length ...
new BlockArrow('gene',0, 500, '+'),
new Rect('gene',3500, 2000),
new Arrow('gene',8000, '+')
])
);
-
Events & Attributes - the complex glyph contains the same common events and common attributes as any other glyph. The event/attribute will be applied to all subglyphs(line and exons) where applicable.
-
Exon Events and Attributes - since the exon is just another glyph, all common attributes and common events can be applied to them. Attributes/events on the exon override any attribute/event set on the entire gene
// Add complex Gene type, position, length, orientation, array of exons glyphs
gene1 = chart1.addFeature(
new Complex('gene', 1500, 8000, '+', [
new BlockArrow('exon',0, 500, '+'),
new Rect('exon',3500, 2000),
new Arrow('exon',8000, '+')
])
);
// set all exons' color
gene1.color = "red";
// override the parent color and set the second exon's color
gene1.exons[1].color = "green";gene1 = chart1.addFeature( new Complex('gene', 1500, 8000, '+', [ new Arrow('exon',8000, '+') ]));
gene1.line.thickness = 2;gene1 = chart1.addFeature( new Complex('gene', 1500, 8000, '+', [ new Arrow('exon',8000, '+') ]));
gene1.line.color = "black";// the last parameter for all glyphs is the opts hash {}, which can take 1 or more optional attributes
gene1 = chart1.addFeature( new Rect('gene',0,500, {'color':'black', 'onMouseover': 'Start 0'}) );gene1 = chart1.addFeature( new Rect('gene',0,500) );
gene1.color = 'black';
gene1.onMouseover = 'Start 0';The default for the common attributes can be changed
- Color *
var chart = new Scribl(canvas, 500);
chart.glyph.color = "black";var chart = new Scribl(canvas, 500);
chart.glyph.roundness = 1 // in pixels;##Types Types are a way of grouping glyphs so their attributes can be easily changed at once
- Color *
var gene = chart.addFeature( new Rect('human', 0, 1000, '+' );
chart.human.color = "black";var gene = chart.addFeature( new Rect('human', 0, 1000, '+' );
chart.human.roundness = 1 // in pixels;##File Formats Although not the best way to input data into scribl, for convenience several formats are supported
- Genbank (genes only)
- Bed Example
For most cases it's easier to let Scribl automatically manage your tracks by adding genes to the chart itself as in the Quick Start example. However, you may find it necessary to manually manage your tracks. For example, putting all genes on one track and proteins on another
// create tracks
var geneTrack = chart.addTrack();
var proteinTrack = chart.addTrack();
// add genes
var gene1 = geneTrack.addGene(0, 1000, '+');
// add proteins
var protein1 = proteinTrack.addProtein(10, 480, '+');
var protein2 = proteinTrack.addProtein(500, 480, '+');Scribl automagically determines an appropriate scale, but you can set the scale manually or turn it off completely
// Turn off pretty scale, which turns off all intelligent scaling
chart.scale.pretty = false;
// No scale
chart.scale.off = true;// create some genes
gene1 = chart.addGene( 7000, 1000 , '-');
gene2 = chart.addGene( 3500, 1500, '+');
gene3 = chart.addGene( 6000, 1000, '-');
// force scale to different min and max
chart.scale.min = 0;
chart.scale.max = 12000;// change tick distance and color
chart.tick.major.size = 1000;
chart.tick.major.color = "red";// change scale font color and size
chart.scale.font.color = "white";
chart.scale.font.size = 26;
// change size of tick marks
chart.scale.size = 7;