Skip to content

V1.0

Jump to bottom Edit New page
chmille4 edited this page Sep 14, 2011 · 19 revisions

New To Version 1.0

  • Finer Track Control - the way Scribl::Track behaves has changed to more closely replicate genome browsers. A track now contains multiple Scribl::Lanes. A Track relates to a specific entity (e.g. UCSC Build HG18 SNPs Chromosome1) but can contain many Lanes so that features do not overlap.
  • Addition of Scribl::Lane - this works in much the same way Scribl::Track worked in previous versions
  • Chart.slice()
  • Major Performance Increase - large chart are much faster now
  • Mouse Event Performance Increase - only the lane the event takes place on is redrawn opposed to the whole chart
  • Setting Text API Changed - Now you set default text attributes (e.g. chart.text.color) the same way you set individual features text attirbutes (e.g. feature.text.color)
  • Accessing Attributes Has Changed - the way attributes are retrieved has been simplified by the addition of a glyph.getAttr('attr') method, which greatly simplifies the internals of how attributes work. getAttr bubbles through the correct order to determine the correct value for the attribute. For example glyph.getAttr('color') would first checks to see if the color attribute has a value with the glyph itself (i.e. glyph.color) then it checks if it is part of a complex glyph and it's parent has a value (i.e. glyph.parent.color) then it checks if its type has a value (glyph.chart.type.color) and if none of those are set then it returns the default set at the top of Scribl.js (scribl.glyph.color).

Quick Start - Create a simple chart

// Get Canvas and Create Chart
var canvas = document.getElementById(canvasName);  		
// Create Chart        canvas, width in pixels
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 Attributes###

  • Roundness

    glyph.roundness = 1 // in pixels

  • Color

    glyph.color = 'rgb(120,0,255)'

  • Text-Align

    • Absolute

      ```javascript
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

      ```javascript
// 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 
```

  • Text

    • Font

      ```javascript
glyph.text.font = 'arial';
```

    • Size

      ```javascript
glyph.text.size = '15'; // in pixels 
```

    • Color

      ```javascript
glyph.text.color = 'black';
```

###Common Events###

  • Click

    // open website
glyph.onClick = "http://www.google.com"
// Execute Function
glyph.onClick = function() {alert("I've been clicked");}

  • Mouseover

    glyph.onMouseover = "Moused Over"

###BlockArrow Glyph### blockarrow glyph

BlockArrow( type, position, length, strand, {opts} )

blockArrow = chart.addFeature( new BlockArrow('gene', 0, 1000, '+') );

###Line Glyph### line glyph

Line( type, position, length, {opts} )

line = chart.addFeature( new Line('gene', 0, 1000) );

###Rect Glyph### rect glyph

Rect( type, position, length, {opts} )

rect = chart.addFeature( new Rect('gene', 0, 1000) );

###Arrow Glyph### arrow glyph

Arrow( type, position, strand, {opts} )

arrow = chart.addFeature( new Arrow('human', 0, '+') );

###Complex Glyph### complex glyph

Complex( type, start, length, strand, [subfeatures], {opts} )

gene1 = chart1.addFeature( new Complex('gene', 1500, 8000, '+', []) );

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

// 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.subfeatures[1].color = "green";

  • Line Attributes

    • Thickness

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

    • Color

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

###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';

Adding Tracks

Tracks are used to segregate data, which may prove useful when dealing with different types of data, data from different sources, or in other situations. If no tracks are explicitly added, all features will reside on a single track.

// add a track
var track1 = chart.addTrack();
var gene1 = track1.addFeature( new BlockArrow('gene', 0, 1000, '+') );

Default Attributes

The default values for any of the common attributes and common events can be set for all glyphs. Set the default the same way that you would for a single glyph, but apply it to the chart.glyph object. For example:

var chart = new Scribl(canvas, 500);
// set the default color to black for all glyphs
chart.glyph.color = "black";

##Types Types are a way of grouping glyphs so their attributes can be easily changed at once. Change any of the common attributes of all glyphs that share a type the same way that you would for a single glyph but apply it to the chart.<insert type> object. For example:

var gene1 = chart.addFeature( new Rect('human', 0, 1000, '+' );
var gene2 = chart.addFeature( new Rect('human', 0, 1000, '+' );
// set all glyphs of the 'human' type to black
chart.human.color = "black";

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

Managing Lanes

For most cases it's easier to let Scribl automatically manage your lanes by adding features to the chart itself as in the Quick Start example. However, you may find it necessary to manually manage your lanes. For example, to save space you could collapse all features onto a single lane even if they overlap

// create lane
var lane = chart.addTrack().addLane();
// add genes
var gene1 = lane.addGene(0, 1000, '+');
var gene2 = lane.addGene(10, 480, '+');
var gene3 = lane.addGene(500, 480, '+');

Scale

Scribl automatically determines an appropriate scale, but you can set the scale manually or turn it off completely

Manipulate Scale

// Turn off pretty scale, which turns off all intelligent scaling
chart.scale.pretty = false;
// Only turn off intelligent tick intervals
chart.tick.auto = false;
// Only turn off intelligent scale start and stop points
chart.scale.auto = false;

// No scale
chart.scale.off = true;

Change Scale Position

/*  ** ONLY WORKS IN v1.0.1**  */

// set lane and track buffer to the same size
// uncomment if you want the scale to be the 
// same distance from tracks above and below
/* chart.laneBuffer = 5;
   chart.trackBuffer = 5; */

// Create Track 1
track1 = chart.addTrack();	
gene1 = track1.addFeature( new BlockArrow('track1', 5, 750 , '-') ); 

// Create Track 2
track2 = chart.addTrack();
gene2 = track2.addFeature( new BlockArrow('track2', 100, 1000, '-') );

// add scale
chart.addScale(); // turns off the default, top scale on first call

// Create Track with 1 lane
track3 = chart.addTrack();
gene3 = track3.addFeature( new BlockArrow('track3', 2230, 1000, '+') );

// add scale
chart.addScale();

Force Scale Min, Scale Max

// 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;

Major Ticks

// change tick distance and color
chart.tick.major.size = 1000;
chart.tick.major.color = "red";

Scale Attributes

// 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;

Lane Size and Buffer

// change size of all lanes
chart.laneSizes = 30; // in pixels;

// change size of individual lane;
var lane = chart.addTrack().addLane();
lane.height = 20;

// change the number of pixels between lanes and tracks
chart.laneBuffer = 2;
chart.trackBuffer = 20;

Export

Add a custom footer
Add a custom sidebar
Clone this wiki locally