PPI Circle 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

.graphCircle  {
	border: 1px solid #000;
	background-color: #E5E5EF;
}

.graphCircle path.arc {
  fill: #fff;
}

.graphCircle .node {
  font-size: 10px;
}

.graphCircle .node:hover {
  fill: #1f77b4;
}

.graphCircle .link {
  fill: none;
  stroke: #1f77b4;
  stroke-opacity: .4;
  pointer-events: none;
}

.graphCircle .link.source, .graphCircle .link.target {
  stroke-opacity: 1;
  stroke-width: 2px;
}

.graphCircle .node.target {
  fill: #d62728 !important;
}

.graphCircle .link.source {
  stroke: #d62728;
}

.graphCircle .node.source {
  fill: #2ca02c;
}

.graphCircle .link.target {
  stroke: #2ca02c;
}
.graphCircle .figure {
	fill: #46D;
}
.graphCircle .legend {
  stroke: transparent;
  pointer-events: none;
}
.graphCircle .mainLegend{
	font-size: 70%;
}

JavaScript

/* Create an instance of the component */
var instance = new Biojs.InteractionsBundleD3({
    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",...