#pViz.js: a dynamic JavaScript & SVG library for visualization of protein sequence features
##What is pViz.js?
pViz.js is a protein sequence features viewer for modern browsers, based on a JavaScript library, SVG and css.
Given sequence and a list of positioned features, it displays the sequence and the features aligning them on the sequence. Features are layed out not to overlaying each other, allowing zooming, interaction and a decent amount of customization.
Default sources can be explictely defined in JavaScript (limit is the sky), DAS servers, PEFF (PSI extended Fasta format) or a mix of them.
Warning! pViz target modern browsers, such as Firefox, Chrome and Safari. Do not expect it to work on IE7, just upgrade.
##Hello World
<head>
<link rel="stylesheet" type="text/css" href="../dist/pviz-core.css">
<script src="../dist/pviz-bundle-min.js"></script>
</head>
<body>
<div id="main"></div>
<script>
var pviz = this.pviz;
var seqEntry = new pviz.SeqEntry({sequence : 'ABCDEFGIJKLMNOPQRSTUVWXYZ'});
new pviz.SeqEntryAnnotInteractiveView({
model : seqEntry,
el : '#main'
}).render();
seqEntry.addFeatures([
{category : 'foo', type : 'bar', start : 5, end : 12, text : 'hello'},
{category : 'foo', type : 'bar', start : 9, end : 15, text : 'world'}]);
</script>
</body>
The rendered features. In practice, the widget is zoomable
##How does it works?
###Principles
A SeqEntry object contains a sequence, a list of features (and whatever you may find convenient for later display).
###Structure
Features are add to the model (if the view is already instanciated, it will be updated once the features are received, thanks to backbone.js). A feature is an JavaScript object (a plain hashmap, though), containing several fields
- groupSet [optional]: a group of categories information,allowing to have features with the same category name, to be regrouped at first into the same meta-group;
- category: all features from the same category will be handled in the same layer;
- categoryType [optional]: has not grouping purpose, but allows to define properties among different categories (track height, css);
- type: within a category, features can have different types, offering the possibility for custom render (basic is just a rectangle) or interaction;
- start: starting position (0 is the first amino acid of the sequence);
- end: an inclusive end position;
- text [optional]: text to be be displayed in the default rectangle;
- Whatever you may need for customized display or interaction.
###Third parties dependencies pViz library uses D3 for SVG generation, backbone.js framework for the model/view framework, Twitter Bootstrap for the css, underscore.js library for convenient utilities, and require.js for dependency management.
But do not worry, including the packaged distribution bundles all of them for you.
##Examples Easier than a full documentation, we bring some demonstration use cases:
NB: download the project locally, at least on your file system, to get javascript executed;
##And more ###A few comments on the code The JavaScript library relies on seom "modern" language components. It is not aimed at running on IE 7. That said, you can either use the bundled library (with all dependencies) or created you own application using require.js and checked out source code.
####Unit testing Via jasmine, either in the browser (test/index.html) or command line with phantom.js
####Continuous integration
test, distribution etc. can be launched in a CI environment via grunt tasks grunt test, dist...
###Authors This library was initiated by Alexandre Masselot ([email protected]) & Kiran Mukhyala ([email protected]) within Genentech Bioinformatics & Computational Biology Department.
###License The library is distributed under a BSD license. Full description can be found in LICENSE.txt