Biojs.InteractionsD3 showcase
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 windowOverview
This component uses the D3 library and specifically its implementation of the force algorithm to
represent a network of protein interactions.
Version
0.9.0_alpha.
To get the above Biojs.InteractionsD3 to work on your page, you need to do the following:
- Include the file Biojs.InteractionsD3.js and its dependencies to your page header.
Biojs scripts
<script language="JavaScript" type="text/javascript" src="src/Biojs.js">
External script(s)
<script language="JavaScript" type="text/javascript" src="../biojs/dependencies/jquery/jquery-1.7.2.min.js">
CSS stylesheet(s)
<link rel="stylesheet" href="../biojs/css/biojs.InteractionsD3.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.InteractionsD3 into.
window.onload = function() { var instance = new Biojs.InteractionsD3({ target: "YourOwnDivId", }); var pid=1; instance.addProtein({id:'p'+pid++,group:1}); instance.addProtein({id:'p'+pid++,group:1}); instance.addProtein({id:'p'+pid++,group:1}); instance.addInteraction("p"+(pid-1),"p"+(pid-2),{id:"p"+(pid-1)+"_p"+(pid-2),feature1:"value"}); instance.restart(); };
Required Parameters
-
target | {string}
Identifier of the DIV tag where the component should be displayed.
Optional Parameters
addInteraction
Adds an interaction between 2 proteins that are already in the graphic using their IDs
Parameters:
-
{string} proteinId1
Id of the first protein in the interaction -
{string} proteinId2
Id of the second protein in the interaction -
{Object} extraAtributes
Optional, Default: {}
An object containing meta information of the interaction to be stored in the interaction itself. useful for triggered events
Example :
instance.addInteraction("p"+(pid-1),"p"+(pid-2),{id:"p"+(pid-1)+"_p"+(pid-2),feature1:"new"});
instance.restart();
addProtein
Adds a protein to the graphic
Parameters:
-
{Object} protein
An object containing information of the protein
Example :
instance.addProtein({id:'p'+pid++,group:2});
instance.restart();
getInteraction
gets the interaction object by the id of its proteins
Parameters:
-
{string} proteinId1
The id of the first protein -
{string} proteinId2
The id of the second protein
Example :
instance.getInteraction('p1','p3');
Returns:
- {Object} An object containing information of the interaction
getInteractionIndex
Parameters:
-
proteinId1
-
proteinId2
getProtein
gets the protein object by its id
Parameters:
-
{string} proteinId
The id of the protein
Example :
instance.getProtein('p3');
Returns:
- {Object} protein An object containing information of the protein
hide
Hides the elements on the graphic that match the selector. Check the CSS3 selectors documentation to build a selector string
Parameters:
-
{string} selector
a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string
Example :
instance.hide("[id = node_p"+(pid-1)+"]");
hideLegend
Shows/Hide the legend(id) of the protein
Parameters:
-
{string} protein
the id of the protein to swap the visibility of the legend
Example :
instance.swapShowLegend("#node_p"+(pid-1)+" .legend");
highlight
Highlight the elements on the graphic that match the selector. Check the CSS3 selectors documentation to build a selector string
Parameters:
-
{string} selector
a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string
Example :
instance.highlight("[id = node_p"+(pid-1)+"]");
removeInteraction
removes from the graphic the interaction by the id of its proteins
Parameters:
-
{string} proteinId1
The id of the first protein -
{string} proteinId2
The id of the second protein
Example :
instance.removeInteraction('p2','p3');
removeProtein
removes a protein from the graphic with all the interactions unless the interactor is also interacting with another protein that is visible.
Parameters:
-
{string} proteinId
The id of the protein to delete -
excludelist
Example :
instance.removeProtein('p2');
resetGraphic
Resets the graphic to zero proteins zero interactions
Example :
instance.resetGraphic();
restart
Restart the graphic to materialize the changes don on it(e.g. add/remove proteins)
Example :
instance.restart();
setColor
Set the stroke's color of the elements on the graphic that match the selector. Check the CSS3 selectors documentation to build a selector string
Parameters:
-
{string} selector
a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string -
{string} color
a color in web format eg. #FF0000
Example :
instance.setColor("[id = node_p"+(pid-1)+"]","#FF0000");
setFillColor
Set the fill's color of the elements on the graphic that match the selector. Check the CSS3 selectors documentation to build a selector string
Parameters:
-
{string} selector
a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string -
{string} color
a color in web format eg. #FF0000
Example :
instance.setFillColor("[id = node_p"+(pid-1)+"]","#FF0000");
show
Shows the elements on the graphic that match the selector. Check the CSS3 selectors documentation to build a selector string
Parameters:
-
{string} selector
a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string
Example :
instance.show("[id = node_p"+(pid-1)+"]");
showLegend
Shows/Hide the legend(id) of the protein
Parameters:
-
{string} protein
the id of the protein to swap the visibility of the legend -
typeLegend
Example :
instance.swapShowLegend("#node_p"+(pid-1)+" .legend");
swapFixed
If the protein has a fixed position in the graphic it gets released, or viceversa other wise
Parameters:
-
{string} protein
the id of the protein to swap is position on the graphic
Example :
instance.swapFixed("p"+(pid-1));
swapShowLegend
Shows/Hide the legend(id) of the protein
Parameters:
-
{string} protein
the id of the protein to swap the visibility of the legend
Example :
instance.swapShowLegend("#node_p"+(pid-1)+" .legend");
interactionClick
Parameters:
-
{function} actionPerformed
A function which receives an Biojs.Event object as argument.
Returned data in the Biojs.Event object:
-
{Object}
source
The component which did triggered the event. -
{Object}
interaction
the information of the interaction that has been clicked.
Example :
instance.interactionClick(
function( objEvent ) {
alert("Click on the interaction " + objEvent.interaction.id);
}
);
interactionMouseOver
Parameters:
-
{function} actionPerformed
A function which receives an Biojs.Event object as argument.
Returned data in the Biojs.Event object:
-
{Object}
source
The component which did triggered the event. -
{Object}
interaction
the information of the interaction that has been mouseover.
Example :
instance.interactionMouseOver(
function( objEvent ) {
alert("The mouse is over the interaction " + objEvent.interaction.id);
}
);
proteinClick
Parameters:
-
{function} actionPerformed
A function which receives an Biojs.Event object as argument.
Returned data in the Biojs.Event object:
-
{Object}
source
The component which did triggered the event. -
{Object}
protein
the information of the protein that has been clicked.
Example :
instance.proteinClick(
function( objEvent ) {
alert("The protein " + objEvent.protein.id + " was clicked.");
}
);
proteinMouseOver
Parameters:
-
{function} actionPerformed
A function which receives an Biojs.Event object as argument.
Returned data in the Biojs.Event object:
-
{Object}
source
The component which did triggered the event. -
{Object}
protein
the information of the protein that has been mouseover.
Example :
instance.proteinMouseOver(
function( objEvent ) {
alert("The mouse is over the protein " + objEvent.protein.id);
}
);