node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


neXtProt - The knowledge resource on human proteins

This is a code repository for the SIB - Swiss Institute of Bioinformatics CALIPHO group neXtProt project


neXtProt feature viewer

The feature viewer is a super easy javascript library to use in order to draw the different features covering a sequence for a better visualization.

Feature viewer

Live demo :

Getting Started

  1. You can get the library in your project using bower or npm
bower install feature-viewer
npm install feature-viewer

Or Include the feature-viewer JS and CSS from rawgit CDN in the header of your html

<link rel="stylesheet" type="text/css" href="">
<script src=""></script>

NOTE : If you already got the dependencies (D3, Bootstrap & Jquery) in your project, use the simple minified version instead of the bundle :

<script src=""></script>
  1. Specify a div in your html
<div id="fv1"></div>
  1. Create an instance of FeatureViewer in javascript with the sequence (or a length), the div in which it will be display and the rendering options of your choice.
//For Node add before : var FeatureViewer = require("feature-viewer"); 
                                showAxis: true,
                                showSequence: true,
                                brushActive: true, //zoom 
                                toolbar:true, //current zoom & mouse position 
                                zoomMax:50 //define the maximum range of the zoom 
//Instead of a sequence, you can also initialize the feature viewer with a length (integer) : 
var ft = new FeatureViewer(213,'#fv1');
  1. Finally, add the features

ft.addFeature({ data: [{x:20,y:32},{x:46,y:100},{x:123,y:167}], name: "test feature 1", className: "test1", //can be used for styling color: "#0F8292", type: "rect" // ['rect', 'path', 'line'] });

5) Et voila!
![Feature viewer](/assets/feature-viewer.png)
## Functionalities
* Zoom into the Feature-viewer by selecting a part of the sequence with your mouse. Zoom out with a right-click.    
You can also zoom programmatically with the methods **```zoom(start,end)```** and **```resetZoom()```**
* A tooltip appears when the mouse is over a feature, giving its exact positions, and optionally, a description.
* beside the positions for each element, you can also give a description & an ID, allowing you to link click event on the feature to the rest of your project.
## Options
* Show axis
* Show sequence
* Brush active (zoom)
* Toolbar (current zoom & position)
* Bubble help 
* Zoom max
* Features height
* Offset
## ClearInstance()
You may sometimes want to reload your feature-viewer with new parameters. To avoid memory leaks, the method **```clearInstance()```** will clear each element & listener for you before you delete the feature-viewer instance.
## Documentation
Check out this page for a better understanding of how to use the feature viewer and its possibilities :
## Use it with NeXtProt API
<img src="/assets/FVDemo.png" width="100%" />
It is possible to fill the feature viewer with protein features from [NeXtProt](, the human protein database.   
- First, find your protein of interest in NeXtProt and get the neXtProt accession (NX_...). (You can find your protein by entering an accession number of another database, like UniProt or Ensembl)   
- Then, check the type of feature in the [NeXtProt API]( that you would like to add to your viewer. For example, "propeptide" or "mature-protein".
- Include the feature viewer bundle with nextprot to your html  : feature-viewer.nextprot.js
- Finally, create your feature-viewer like this :
//initalize nextprot Client
var applicationName = 'demo app'; //please provide a name for your application
var clientInfo='calipho group at sib'; //please provide some information about you
var nx = new Nextprot.Client(applicationName, clientInfo);
//var entry = "NX_P01308";
var isoform = "NX_P01308-1";
// feature viewer options
var options = {showAxis: true, showSequence: true,
brushActive: true, toolbar:true,
bubbleHelp: true, zoomMax:20 };
// Create nextprot feature viewer
nxFeatureViewer(nx, isoform, "#div2", options).then(function(ff){
// Add first custom feature
 data: [{x:20,y:32},{x:46,y:100},{x:123,y:167}],
 name: "test feature 1",
 className: "test1",
 color: "#0F8292",
 type: "rect",
 filter: "type1"
// Add second feature from nextprot
var styles = [
 {name: "Propeptide",className: "pro",color: "#B3B3B3",type: "rect",filter:"Processing"}, 
 {name: "Mature protein",className: "mat",color: "#B3B3C2",type: "rect",filter:"Processing"}
ff.addNxFeature(["propeptide","mature-protein"], styles);



If you have any problem or suggestion please open an issue here.


git clone

npm install (will install the development dependencies)

bower install (will install the browser dependencies)

...make your changes and modifications...

npm run dist (will create the min & bundle versions in dist/)

npm run build (will create the bundle js & css in build/ for node)

grunt bump (will push and add a new release)

npm publish (will publish in npm)


Copyright (c) 2015, SIB Swiss Institute of Bioinformatics

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.