Colors, layers and other attributes can be customized as needed by modifying the first lines in the file CerebralWeb

Parameter	Default	Description
layer_attribute_name	localization	Ordered list of layers from top to bottom
layers	['Extracellular', 'Cell surface', 'Plasma membrane', 'Cytoplasm', 'Nucleus', 'Unknown']	Ordered list of layers from top to bottom
colors	{"Nucleus": "#33CC33", "Plasma membrane": "#FF9900", "Cytoplasm": "#9999FF", "Extracellular": "#FFCC11", "Cell surface": "#3366FF", "Unknown": "#8e8e8e"}	Map with the color of each layer
highLighColor	red	Color of highlighted elements
backgroundColor	#FFFFFF	Background color
gridLineWidth	0.2px	Width of the line between layers
gridColor	#323232	Color of the line between layers
font	12pt Arial	Font of the labels of each layer
edgeColor	#5f5f5f	Edges color
edgeWidth	0.8px	Edges width
edgeLabel	black	Edges label color
nodeLabel	white	Nodes label color
borderNodeLabel	black	Border Nodes label color

Source code ( + )

// Map with the color of each layer ({layer1:color1, layer2:color2})
var colors = {
  "Nucleus": "#33CC33",
  "Plasma membrane": "#FF9900",
  "Cytoplasm": "#9999FF",
  "Extracellular": "#FFCC11",
  "Cell surface": "#3366FF",
  "Unknown": "#8e8e8e"
}
// Ordered list of layers from top to bottom 
var  = ['Extracellular', 'Cell surface', 'Plasma membrane', 'Cytoplasm', 'Nucleus', 'Unknown'];

// Name of the attribute that contains the information of the node layer
var layer_attribute_name = "localization";

// Color of hihglighted elements
var highLighColor = "red";

// Background color
var backgroundColor = "#FFFFFF";

// Widht of the line between layers
var gridLineWidth = 0.2px;

// Color of the line between layers
var gridColor = '#323232';

// Font of the labels of each layer
var font = "12pt Arial";

//Edges color, width and label color
var edgeColor = '#5f5f5f';
var edgeWidth = '0.2px';
var edgeLabel = 'black';

// Node label color
var nodeLabel = 'white';
var borderNodeLabel = 'black';
                

Method	Default	Description
filterTable(filter)	Null	This method is called after a filter event is fired in the graph. It is initially empty, you can write the code you need to make the graph filter interact with any other component in your web page.

Source code ( + )

function filterTable(filter) {
    //REWRITE THIS METHOD TO EXTEND THE FILTERING
}
                

You can add to your JSON elements as much information as you need but the mandatory info for nodes and edges is:

 {
   "data": {
     "id": "node_id",
     "name": "node_name",
     "[layer_attribute_name]": "layer_x"
   },
   "group": "nodes"
 },
 {
   "data": {
     "id": "edge_id",
     "name": "info you want to popup on mouseover (interaction type, interactor types, ...)",
     "source": "node_idA",
     "target": "node_idB",
     "idgroup": "edge_id"
   },
   "group": "edges"
 }