v0.3

New To Version 0.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

Glyphs

###Common Glyph Attributes###

• Roundness (if applicable)
• Color
• Text-Align
  • Left
  • Right
  • Center
  • Start
  • End
• Text
  • Font
  • Size
  • Color

###Common Glyph Events###

• Click
• Mouseover

###Setting Attributes/Events

• During Object Creation

// 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'}) );

• After Object Creation

gene1 = chart1.addFeature( new Rect('gene',0,500) );
gene1.color = 'black';
gene1.onMouseover = 'Start 0';

###BlockArrow Glyph###

###Line Glyph###

• Line Specific Attributes
  • Thickness

var line = chart1.addFeature( new Line('arrow', 0, 500));
line.thickness = 2;

###Rect Glyph###

###Arrow Glyph### The arrow glyph sits at a single point and shows direction

• Arrow Specific Attributes -
  • Thickness

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 (start is relative to the start of the 'parent' complex glyph)
    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";

• Line Attributes

  • Thickness

gene1 = chart1.addFeature( new Complex('gene', 1500, 8000, '+', [ new Arrow('exon',8000, '+') ]));
gene1.line.thickness = 2;

• Color

gene1 = chart1.addFeature( new Complex('gene', 1500, 8000, '+', [ new Arrow('exon',8000, '+') ]));
gene1.line.color = "black";

##Hierarchical Attributes##

File Formats

Although not the best way to input data into scribl, for convenience several formats are supported

• Genbank (genes only)
• Bed

##Add Custom Glyphs##

##Performance There are things you can do to increase the perfomance of Scribl

• Don't use gradient Colors
• Use either borderColor or color but not both