PPI Force-directed layout example

HTML

<script src="http://www.ebi.ac.uk/Tools/biojs/registry/src/Biojs.js"></script>
<link rel="stylesheet" href="http://www.ebi.ac.uk/Tools/biojs/biojs/css/biojs.InteractionsD3.css">
<script src="http://biosual.cbio.uct.ac.za/biosual/widgets/GraphWidget/Biojs.InteractionsD3.js"></script>
<script src="http://d3js.org/d3.v2.min.js"></script>
<script src="http://biosual.cbio.uct.ac.za/biosual/widgets/CircleGraphWidget/Biojs.InteractionsBundleD3.js"></script>
<div id="example" />

CSS

.node {
	stroke: #fff;
	stroke-width: 1.5px;
}
.figure{
  pointer-events: all;
  fill:	#89B;
}
.legend {
  pointer-events: none;
  font: 10px sans-serif;
  font-weight:normal; 
  stroke: #000; 
  stroke-width: 0px;
}
line.link {
	stroke: #999;
	stroke-opacity: .6;
}
.graphNetwork  svg{
	background-color: #FFF;
}
.graphNetwork  {
	border: 1px solid #000;
	background-color: #E5E5EF;
}

.clearBoth { clear:both; }

.mainLegend{
	font-size: 70%;
}

JavaScript

/* Create an instance of the component */
var instance = new Biojs.InteractionsD3({
    target: "example",
});


instance.addProtein({id: 'P72024', organism: "MTB", gene_name:"dapB",typeLegend:"gene_name"});
instance.addProtein({id: 'O05839', organism: "MTB", gene_name:"furB",typeLegend:"gene_name"});
instance.addProtein({id: 'P0A582', organism: "MTB", gene_name:"fur",typeLegend:"gene_name"});
instance.addProtein({id: 'P96880', organism: "MTB", gene_name:"purE",typeLegend:"gene_name"});
instance.addProtein({id: 'P65898', organism: "MTB", gene_name:"purK",typeLegend:"gene_name"});
instance.addProtein({id: 'O53166', organism: "MTB", gene_name:"acn",typeLegend:"gene_name"});
instance.addProtein({id: 'Q10530', organism: "MTB", gene_name:"gltA2",typeLegend:"gene_name"});
instance.addProtein({id: 'P67032', organism: "MTB", gene_name:"glyQS",typeLegend:"gene_name"});
instance.addProtein({id: 'O05840', organism: "MTB", gene_name:"MT2427",typeLegend:"gene_name"});
instance.addProtein({id: 'O69644', organism: "MTB", gene_name:"MT3777",typeLegend:"gene_name"});

instance.addInteraction("O05839", "P0A582", {id: "P0A582_P0A582"});
instance.addInteraction("O05839", "P96880", {id: "P0A582_P96880"});
instance.addInteraction("O05839", "P65898", {id: "P0A582_P65898"});
instance.addInteraction("P65898", "P96880", {id: "P0A582_P72024"});
instance.addInteraction("O05839", "O53166", {id: "P0A582_O53166"});
instance.addInteraction("O05839", "Q10530", {id: "P0A582_Q10530"});
instance.addInteraction("O53166", "Q10530", {id: "P0A582_P72024"});
instance.addInteraction("O05839", "P67032", {id: "P0A582_P67032"});
instance.addInteraction("O05839", "O05840", {id: "P0A582_O05840"});
instance.addInteraction("O05840", "P67032", {id: "P0A582_P67032"});
instance.addInteraction("O05839", "O69644", {id: "P0A582_O69644"});
instance.addInteraction("O05840", "O69644", {id: "P0A582_O69644"});
instance.addInteraction("O05839", "P72024", {id: "P0A582_P72024"});
instance.addInteraction("O53166", "Q10530",...