v0.3

New To Version 0.3

• Arrow Glyph
  • add pics to each of these
• Line Glyph
• Spliced Glyph
• DAS Support
• 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### SHOW PICTURES OF THEM! ###Rect Glyph###

###Arrow Glyph###

The arrow glyph sits at a single point and shows direction

• Arrow Specific Attributes -
  • Thickness

arrow1 = chart1.addFeature( new Arrow('splice', 500, '+'));
arrow1.thickness = 2;

###Spliced Glyph### javascript Spliced( type, start, length, strand, [exons], {opts} )

The spliced 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 spliced glyph. So if the parent spliced 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 Spliced Gene                type, position, length, orientation, array of exons glyphs
gene1 = chart1.addFeature( new Spliced('splice', 1500, 8000, '+', [
  // add exons   type, relative-start, length (start is relative to the start of the 'parent' spliced glyph)
  new BlockArrow('splice',0, 500, '+'),
  new Rect('splice',3500, 2000), 
  new Arrow('splice',8000, '+')
]));

• Events & Attributes - the spliced 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 Spliced Gene                type, position, length, orientation, array of exons glyphs
gene1 = chart1.addFeature( new Spliced('splice', 1500, 8000, '+', [
  new BlockArrow('splice',0, 500, '+'),
  new Rect('splice',3500, 2000), 
  new Arrow('splice',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 Spliced('splice', 1500, 8000, '+', [ new Arrow('splice',8000, '+') ]));
gene1.line.thickness = 2;

• Color

gene1 = chart1.addFeature( new Spliced('splice', 1500, 8000, '+', [ new Arrow('splice',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