Feature Viewer

This javascript tool based on the library D3, will allow you to display the features covering your sequence of DNA, protein, or others.

Step 1 - Initialize the Feature Viewer

You will first need to create the SVG that will contains the features.
To do so, give whithin the parameters, the sequence (or length) and the div in which the features will be display.
You can also adjust some rendering options :

showAxis (boolean) : Display or not the x-Axis
showSequence (boolean) : Display or not the sequence
brushActive (boolean) : Active or not the brush zoom
toolbar (boolean) : Add a header on top of the svg, showing level of zoom & the mouse position in the sequence.
bubbleHelp (boolean) : Add a bubble help in the header to indicate how to zoom. Requires the toolbar.
zoomMax (int) : Define the maximum range of the zoom. Must be a multiple of ten.
animation (boolean) : Animation during transition
offset (object) : Specify an offset : offset:{start:40,end:100}

The brush zoom will allow you to select a part of the sequence to zoom in.
It may happen that the div is too small to display the sequence, but a zoom will make it appears.
To zoom out, just do a right click.

Step 2 - Add some features

To add a feature to the SVG you have to pass an object as parameter.
This object will take :

data (array of objects) : An array of objects, each containing :

x (int) :
first position

y (int) :
last position (or a value for features of type "line")

id (string) :
an Id (Optionnal)

description (string) :
Small description (Optionnal)

color (string) :
a custom color (Optionnal)
name (string) : The name of theses features, which will be display as a label on the Y-axis
className (string) : a class name, for further personnal computing
height (int) : height of the feature (default: 12)
color (string) : The color of the features
type ("rect","path", "line") : The type of feature, for a specific rendering
interpolation ("basis","step","monotone",..) : Customize the layout of a the line
(Only for the "line" feature)

Note 1 : In case of "line" feature, you can add 2 arrays of data within an array (e.g. data:[dataArray1,dataArray2]), and 2 colors for each data within an array (e.g. color:["#C50063","#005572"])

Note 2 : Be carefull to specify different className for each type of feature

//Create a new Feature Viewer and add some rendering options
var ft2 = new FeatureViewer("FDSJKLFJDSFKLJDFHADJKLFHDSJKLFHDAFJKLDHFJKLDASFHDJKLFHDSAJKLFHDAKLFJDHSAFKLDLSNCDJKLFENFIUPERWDJKPCNVDFPIEHFDCFJDKOWFPDJWFKLXSJFDW9FIPUAENDCXAMSFNDUAFIDJFDLKSAFJDSAKFLJDSADJFDW9FIPUAENDCXAMSFNDAAAAAAAAAAAFJDSAKFL","#div2", {
    showAxis: true,
    showSequence: true,
    brushActive: true,
    toolbar:true,
    bubbleHelp:true,
    zoomMax:10
            });

//Add some features
ft2.addFeature({
    data: [{x:20,y:32},{x:46,y:100},{x:123,y:167}],
    name: "test feature 1",
    className: "test1",
    color: "#005572",
    type: "rect",
    filter: "type1"
});
ft2.addFeature({
    data: [{x:52,y:52},{x:92,y:92}],
    name: "test feature 2",
    className: "test2",
    color: "#006588",
    type: "rect",
    filter: "type2"
});
ft2.addFeature({
    data: [{x:130,y:184},{x:40,y:142},{x:80,y:110}],
    name: "test feature 3",
    className: "test3",
    color: "#eda64f",
    type: "path",
    filter: "type2"
});
ft2.addFeature({
    data: [{x:120,y:154},{x:21,y:163},{x:90,y:108},{x:10,y:25},{x:193,y:210},{x:78,y:85},{x:96,y:143},{x:14,y:65},{x:56,y:167}],
    name: "test feature 4",
    className: "test4",
    color: "#F4D4AD",
    type: "rect",
    height: 8,
    filter: "type1"
});
var dataDemo = [];
for (var i=1;i<100;i++) {
    var count = Math.floor((Math.random() * 20) + 1);
    dataDemo.push({
        x: i*2,
        y:count
    })
}
ft2.addFeature({
    data: dataDemo,
    name: "test feature 5",
    className: "test5",
    color: "#008B8D",
    type: "line",
    filter: "type2",
    height: "5"
});

//Beside positions of each element, you can also give a specific description, which will appears in the tooltip when mouse hover, and a specific ID, for example to link a click event on the feature with something else in your project.
ft2.addFeature({
    data: [{x:120,y:154,description:"aaaaa",id:"a1"},{x:22,y:163,description:"bbbbb",id:"b1"},
           {x:90,y:108,description:"ccccc",id:"c1"},{x:10,y:25,description:"ddddd",id:"d1"},
           {x:193,y:210,description:"eeeee",id:"e1"},{x:78,y:85,description:"fffff",id:"f1"},
           {x:96,y:143,description:"ggggg",id:"g1"},{x:14,y:65,description:"hhhhh",id:"h1", color:"#12E09D"},
           {x:56,y:167,description:"jjjjj",id:"j1"}],
    name: "test feature 6",
    className: "test6",
    color: "#81BEAA",
    type: "rect",
    filter: "type2"
});

Events

You can listen for a click on a feature, and get the specific positions of this feature with the listener onFeatureSelected.
This method take a custom function in parameter allowing you to link this event with the rest of your application.

//Create a new Feature Viewer and add some rendering options
var ft3 = new FeatureViewer("FDSJKLFJDSFKLJDFHADJKLFHDSJKLFHDAFJKLDHFJKLDASFHDJKLFHDSAJKLFHDAKLFJDHSAFKLDLSNCDJ"+
"KLFENFIUPERWDJKPCNVDFPIEHFDCFJDKOWFPDJWFKLXSJFDW9FIPUAENDCXAMSFNDUAFIDJFDLKSAFJDSAKFLJDSADJFDW9FIPUAENDCXAMSFNDAAAAAAAAAAAFJDSAKFL","#div3", {
showAxis: true,
showSequence: true,
brushActive: true,
toolbar:true,
bubbleHelp:true,
zoomMax:20
        });

//Add some features
ft3.addFeature({
    data: [{x:20,y:32},{x:46,y:100},{x:123,y:167}],
    name: "test feature 1",
    className: "test1",
    color: "#968D73",
    type: "rect"
});
ft3.addFeature({
    data: [{x:52,y:52},{x:92,y:92}],
    name: "test feature 2",
    className: "test2",
    color: "#4F4C41",
    type: "rect"
});
ft3.addFeature({
    data: [{x:130,y:184},{x:40,y:142},{x:80,y:110}],
    name: "test feature 3",
    className: "test3",
    color: "#667580",
    type: "path"
});
var dataDemo = [];
for (var i=1;i<100;i++) {
    var count = Math.floor((Math.random() * 20) + 1);
    dataDemo.push({
        x: i*2,
        y:count
    })
}
ft3.addFeature({
    data: dataDemo,
    name: "test feature 4",
    className: "test4",
    color: "#667580",
    type: "line",
    filter: "type2",
    height: "5"
});

ft3.addFeature({
    data: [{x:120,y:154},{x:22,y:163},{x:90,y:108},{x:10,y:25},{x:193,y:210},{x:78,y:85},{x:96,y:143},{x:14,y:65},{x:56,y:167}],
    name: "test feature 5",
    className: "test5",
    color: "#5C832F",
    height: 8,
    type: "rect"
});

//Get and print in the browser console the position of the feature selected
ft3.onFeatureSelected(function (d) {
    console.log(d.detail);
});

Use data

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
//please provide a name for your application
var applicationName = 'feature viewer app';
//please provide some information about you
var clientInfo='calipho group at sib'; 
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 };
                    
// Init nextprot feature viewer
nxFeatureViewer(nx, isoform, "#div4", options)
    .then(function(ff){
    //(ff is here an instance of the feature viewer with few more methods)
    // Add first custom feature
    ff.addFeature({
        data: [{x:20,y:32},{x:46,y:100}],
        name: "test feature 1",
        className: "test1",
        color: "#0F8292",
        type: "rect",
        filter: "type1"
    });
    // Add second custom feature
    ff.addFeature({
        data: [{x:10,y:40},{x:30,y:80},{x:90,y:100}],
        name: "test feature 2",
        className: "test2",
        color: "#6f920f",
        type: "rect",
        filter: "type1"
    });
    // Add third 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);

// Add fourth feature from nextprot
    var styles2 = [
        {name: "Variant",className: "variant",color: "rgba(0,255,154,0.3)",type: "unique",filter:"Variant"},
        {name: "Disulfide bond",className: "dsB",color: "#B3B3E1",type: "path",filter:"Modified Residue"}
     ];
    ff.addNxFeature(["variant","disulfide-bond"], styles2).then(function(ff) {
        // add fifth custom feature below fourth feature
        ff.addFeature({
            data: [{x:5,y:60},{x:20,y:20},{x:50,y:100}],
            name: "test feature 3",
            className: "test3",
            color: "#923c0f",
            type: "rect",
            filter: "type1"
        });
    });  
});