V1.1
- Nucleotide Level Display - can display nucleotide level data with the Seq glyph
- Semantic Zooming - intelligently display data depending on the zoom level
- Draw Hooks - add and remove functions to a glyph that fire before the glyph is drawn and can be used to change the way a glyph is drawn in different environments. Semantic Zooming uses the standard draw hooks api.
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, Line, and Seq
###Common Attributes###
-
glyph.roundness = 1 // in pixels
-
glyph.color = 'rgb(120,0,255)'
-
Semantic Nucleotide Zoom Level
determines whether a glyph should be displayed as an icon or as nucleotides depending on the px/nt ratio
// 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;
-
-
```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 ``` -
```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 ```
-
###Common Events###
-
// open website glyph.onClick = "http://www.google.com" // Execute Function glyph.onClick = function() {alert("I've been clicked");}
-
glyph.onMouseover = "Moused Over"
###Common Methods###
-
Check the annotated source code for all methods
-
Add functions to be fired before a glyph is drawn. Can be used to change the way a glyph is drawn depending on environment.
// if a glyph is on the reverse strand and there are at least 6 pixels/nt, draw a rectangle var id = glyph.addDrawHook(function(glyph) { if(glyph.strand == '-' && glyph.lane.chart.ntsToPixels() < 6) { // create rectange with the same characteristics and attach it to the same chart var r = new Rect(theGlyph.type, theGlyph.position, theGlyph.length, theGlyph.opts); r.lane = theGlyph.lane; r.ctx = theGlyph.ctx; r._draw(); // return true to stop normal drawing of glyph return true; } // return false to allow normal drawing return false }); // a specific id can be chosen by passing an optional second parameter glyph.addDrawHook(function(glyph){...}, customId);
-
Remove a draw hook
var id = glyph.addDrawHook(function(glyph){...}); // remove draw hook by using it's id glyph.removeDrawHook(id);
###BlockArrow Glyph###
BlockArrow( type, position, length, strand, {opts} )
blockArrow = chart.addFeature( new BlockArrow('gene', 0, 1000, '+') );
###Line Glyph###
Line( type, position, length, {opts} )
line = chart.addFeature( new Line('gene', 0, 1000) );-
Line Specific Attributes
-
var line = chart1.addFeature( new Line('arrow', 0, 500)); line.thickness = 2;
-
###Rect Glyph###
Rect( type, position, length, {opts} )
rect = chart.addFeature( new Rect('gene', 0, 1000) );
###Arrow Glyph###
Arrow( type, position, strand, {opts} )
arrow = chart.addFeature( new Arrow('human', 0, '+') );-
Arrow Specific Attributes -
-
```javascript arrow1 = chart1.addFeature( new Arrow('arrow', 500, '+')); arrow1.thickness = 2; ```
-
###Seq Glyph###
Seq( type, position, length, nucleotides, {opts} )
seq = chart.addFeature( new seq('human', 0, 1000, seqNts) );
###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"; -
-
```javascript gene1 = chart1.addFeature( new Complex('gene', 1500, 8000, '+', [ new Arrow('exon',8000, '+') ])); gene1.line.thickness = 2; ``` -
```javascript 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';
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, '+') );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 roundness for all glyphs to 0
chart.glyph.roundness = 0;-
// color has some helper functions to make things easier // simple color chart.glyph.color = 'black'; //simple gradient with colors placed evenly chart.glyph.color = ['white', 'black', 'white']; // complex gradient that requires more control chart.glyph.color = function(lineargradient) { lineargradient.addColorStop(0, 'rgb(120,120,120)'); lineargradient.addColorStop(0.48, 'rgb(110,110,110)'); lineargradient.addColorStop(0.52, 'rgb(70,70,70)'); lineargradient.addColorStop(0.6, 'rgb(60,60,60)'); }
##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
- Genbank (genes only)
- Bed Example
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, '+');Scribl automatically 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;
// 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;/* ** 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 between track 2 and 3
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 at bottom of chart
chart.addScale();// 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;// 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;