v0.2.0

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 as a whole represent anything you can add to a Scribl chart. Currently there are 3 glyphs Gene, Protein, and Rect, which are made up of 2 primitive shapes BlockArrow and Rect

Adding Glyphs

// add gene with helper method
var gene1 = chart.addGene(pos, length, strand);
// add gene with low level method
var gene1 = chart.addFeature( new BlockArrow("gene", pos, length, strand) );

// add protein with helper method
var protein1 = chart.addProtein(pos, length, strand);
// add protein with low level method
var protein1 = chart.addFeature( new BlockArrow("protein", pos, length, strand) );

// add rectangle
var rect1 = chart.addFeature( new Rect("exon", pos, length) );

Create Glyphs From Primitive Shapes - to be implemented

Make Glyph With New Shape - to be implemented

Glyph Attributes

set attributes of individual glyphs (e.g. a single gene)

Color - sets color of a glyph

// create gene to play with
var gene1 = chart.addGene( 900,    750 , '-');

// solid colors
gene1.color = "black";
gene1.color = "rgb(123, 145, 23)";
gene1.color = "#C3D3E4";

// color gradients
gene1.linearGradient = ["rgb(170, 170, 170)", "rgb(100, 100, 100"]; // use two colors to create texture
gene1.linearGradient = ["black", "white", "black"]; // use three or more!

Roundness - sets roundness of glyph if appropriate

gene1.roundness = "0"; // make glyphs sharp
gene1.roundness = "10"; // in pixels, make glyphs more round

Text - sets the attributes for the text inside glyphs

gene1.font.style = 'arial';
gene1.font.size = '15'; // in pixels 
gene1.font.color = 'black';

Type Attributes

set attributes for all glyphs of a certain type (e.g. all genes)
Types are used to group glyphs together. Certain helper methods automatically add a type to a glyph. However using the lower level addFeature method allows the use of custom types

// create genes with addGene() helper method
var gene1 = chart.addGene(pos, length, strand);
var gene2 = chart.addGene(pos, length, strand);
// create protein with addProtein() helper method
var protein1 = chart.addProtein(pos, length, strand);
// set roundness for all genes (but not proteins)
chart.gene.roundness = 0;
 
// equivalent to above but using lower level methods
var gene1 = chart.addFeature( new BlockArrow("gene", pos, length, strand);
var gene2 = chart.addFeature( new BlockArrow("gene", pos, length, strand);
var protein1 = chart.addFeature( new BlockArrow("protein", pos, length, strand);
// set roundness for all genes (but not proteins)
chart.gene.roundness = 0;

// use custom "type"
var gene4 = chart.addFeature( new BlockArrow("human", pos, length, strand);
chart.human.color = "red";  // Note here that the order of these two lines matter, as Scribl doesn't know about the "human" type until after it has been added as a feature

Roundness - set roundness of glyphs of a certain type (e.g. gene) if appropriate

var gene1 = chart.addGene(pos, length, strand);
chart.gene.roundness = "0"; // 

Color - color of all glyphs of a type (e.g. 'gene')

// create genes to change the color of
var gene1 = chart.addGene(pos, length, strand);
var gene2 = chart.addGene(pos, length, strand);

// solid color
chart.gene.color = "black"; // this overrides linearGradient
chart.gene.color = "rgb(120, 60, 80)"; // can use RGB

// gradient
chart.gene.linearGradient = ["rgb(170, 170, 170)", "rgb(100, 100, 100"]; // use two colors to create texture
chart.gene.linearGradient = ["black", "white", "black"]; // use three or more!

Text - sets the attributes for the text inside glyphs

// create gene
var gene1 = chart.addGene(pos, length, strand);

// change text attributes for all 'genes
chart.gene.text.font = "arial";
chart.gene.text.color = "red";
chart.gene.text.size = "15"; // in pixels
chart.gene.text.align = "left";

// align text
// absolute positioning
chart.gene.text.align = 'left'; // aligns to the left side of the gene
chart.gene.text.align = 'center'; // aligns in the center
chart.gene.text.align = 'right'; // align to the right side

// relative positioning - based on the strand the gene in on
chart.gene.text.align = 'start'; // aligned at the start of the gene - left for '+' strand genes and right for '-' strand genes
chart.gene.text.align = 'end'; // aligned at the end of the gene - opposite of start 

Chart Attributes

attributes that apply to the entire chart and all glyphs

// create genes
var gene1 = chart.addGene(pos, length, strand);
var gene2 = chart.addGene(pos, length, strand);

// create protein
var protein1 = chart.addProtein(pos, length, strand);

// set roundness for all glyphs (both genes and proteins)
chart.glyph.roundness = 0;

Roundness - set roundness of all glyphs if appropriate

var gene1 = chart.addGene(pos, length, strand);
chart.glyph.roundness = "0"; // 

Color - set color of all glyphs

// create gene
var gene1 = chart.addGene(pos, length, strand);

// solid color
chart.glyph.color = "black"; // this overrides linearGradient
chart.glyph.color = "rgb(120, 60, 80)"; // can use RGB

// gradient
chart.glyph.linearGradient = ["rgb(170, 170, 170)", "rgb(100, 100, 100"]; // use two colors to create texture
chart.glyph.linearGradient = ["black", "white", "black"]; // use three or more!

Text - sets the attributes for the text inside glyphs

// create gene
var gene1 = chart.addGene(pos, length, strand);
var protein1 = chart.addProtein(pos, length, strand);

// change text attributes for all glyphs
chart.glyph.text.font = "arial";
chart.glyph.text.color = "red";
chart.glyph.text.size = "15"; // in pixels
chart.glyph.text.align = "left";

Track Size - sets height of all tracks

chart.trackSize = 15 // in pixels

Events

Scribl supports Click events and Mouseover events

// Add Gene      position, length, orientation
gene1 = chart1.addGene( 900,    750 , '-');
// Add mouseover event
gene1.onMouseover = "Start:900 Length:750";
// Add click event
gene1.onClick = "http://www.google.com";

Managing Tracks

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, '+');

Scale

Scribl automagically 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;
// No scale
chart.scale.off = true;

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;

Export

• Export as PNG
• Export as SVG