Component overview < BioJs

PLEASE NOTE: the above example is being affected by the CSS rules of this site. Click on 'view in window' to see the component by using its own CSS stylesheet(s) only.

View in window

Overview

This component uses the D3 library to visualise a wig formatted file as an area chart, with panning and zooming functionality.
Version 1.0.0.

To get the above Biojs.wigExplorer to work on your page, you need to do the following:

Include the file Biojs.wigExplorer.js and its dependencies to your page header.

Biojs scripts

<script language="JavaScript" type="text/javascript" src="src/Biojs.js">

External script(s)

<script src="http://d3js.org/d3.v2.min.js" type="text/javascript">

CSS stylesheet(s)

<link rel="stylesheet" href="../biojs/css/biojs.wigExplorer.css" />

Create a div tag which holds an unique identifier.

                                <body>
                                ...
                                <div id="YourOwnDivId" />
                                ...
                                </body>

Create a code snippet within a <script> tag and instance Biojs.wigExplorer into.

window.onload = function() {
var instance = new Biojs.wigExplorer({
     target: "YourOwnDivId",
     selectionBackgroundColor: '#99FF00',
     dataSet: "../biojs/data/wigExplorerDataSet.tsv"
});

};

Required Parameters

target | {string}

Identifier of the DIV tag where the component should be displayed.
dataSet | {string}

File in TSV format including input data. Example of TSV file ...
```
start    value
 10    34
 20    41
 30    46
 40    49
 ...
```

Optional Parameters

fontFamily | {string}

mono", courier, monospace'] Font list to be applied to the component content.
Default: '"Andale
fontColor | {string}

HTML color code for the font.
Default: "white"
backgroundColor | {string}

Background color for the entire div content.
Default: "#7BBFE9"
selectionFontColor | {Object}

This color will be used to change the font color of selected text.
Default: "white"
selectionBackgroundColor | {Object}

This color will be used to change the background of selected text.
Default: "yellow"

paintFeatures

Paint the features according to the values specified in the json object defined when creating the object. This method initializes the holder, paints the slider and print button depending on the options, and paints the features and legend.

Parameters:

{string} dataSet
Location of the file with the input data in TSV format.
```
start    value
 10    34
 20    41
 30    46
 40    49
 ...
```

Example :

instance.paintFeatures("../biojs/data/wigExplorerDataSet2.tsv");

Biojs.wigExplorer showcase