Author: Nicolas Garcia Belmonte
Copyright: Copyright 2008-2009 by Nicolas Garcia Belmonte.
Homepage: http://thejit.org
Version: 1.0.8a
License: BSD License
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
THIS SOFTWARE IS PROVIDED BY Nicolas Garcia Belmonte ``AS IS’’ AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL Nicolas Garcia Belmonte BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
RGraph.js | Author: Nicolas Garcia Belmonte |
Complex | A multi-purpose Complex Class with common methods. |
Functions | |
Complex | Complex constructor. |
clone | Returns a copy of the current object. |
toPolar | Transforms cartesian to polar coordinates. |
norm | Calculates the complex norm. |
squaredNorm | Calculates the complex squared norm. |
add | Returns the result of adding two complex numbers. |
prod | Returns the result of multiplying two complex numbers. |
conjugate | Returns the conjugate por this complex. |
scale | Returns the result of scaling a Complex instance. |
equals | Comparison method. |
$add | Returns the result of adding two complex numbers. |
$prod | Returns the result of multiplying two complex numbers. |
$conjugate | Returns the conjugate for this complex. |
$scale | Returns the result of scaling a Complex instance. |
$div | Returns the division of two complex numbers. |
Polar | A multi purpose polar representation. |
Functions | |
Polar | Polar constructor. |
clone | Returns a copy of the current object. |
toComplex | Translates from polar to cartesian coordinates and returns a new Complex instance. |
add | Adds two Polar instances. |
scale | Scales a polar norm. |
equals | Comparison method. |
$add | Adds two Polar instances affecting the current object. |
$madd | Adds two Polar instances affecting the current object. |
$scale | Scales a polar instance affecting the object. |
interpolate | Calculates a polar interpolation between two points at a given delta moment. |
Config | RGraph global configuration object. |
Properties | |
labelContainer | Id for label container. |
levelDistance | The actual distance between levels |
nodeRadius | The radius of the nodes displayed |
allowVariableNodeDiameters | Set this to true if you want your node diameters to be proportional to you first dataset object value property (i.e data[0].value). |
nodeRangeDiameters | Diameters range. |
nodeRangeValues | The interval of the values of the first object of your dataSet. |
fps | animation frames per second |
animationTime | |
interpolation | |
GraphUtil | A multi purpose object to do graph traversal and processing. |
Functions | |
filter | For internal use only. |
getNode | Returns a graph’s node with a specified id. |
eachNode | Iterates over graph nodes performing an action. |
eachAdjacency | Iterates over a node adjacencies applying the action function. |
computeLevels | Performs a BFS traversal setting correct level for nodes. |
eachBFS | Performs a BFS traversal of a graph beginning by the node of id id and performing action on each node. |
eachSubnode | After a BFS traversal the depth property of each node has been modified. |
getSubnodes | Collects all subnodes for a specified node. |
getParents | Returns all nodes having a depth that is less than the node’s depth property. |
clean | Cleans flags from nodes (by setting the flag property to false). |
GraphOp | An object holding unary and binary graph operations such as removingNodes, removingEdges, adding two graphs and morphing. |
Functions | |
removeNode | Removes one or more nodes from the visualization. |
removeEdge | Removes one or more edges from the visualization. |
sum | Adds a new graph to the visualization. |
morph | This method will morph the current visualized graph into the new json representation passed in the method. |
GraphPlot | An object that performs specific radial layouts for a generic graph structure. |
Properties | |
labelsHidden | A flag value indicating if node labels are being displayed or not. |
labelContainer | Label DOM element |
labels | Label DOM elements hash. |
Functions | |
getLabelContainer | Lazy fetcher for the label container. |
getLabel | Lazy fetcher for the label DOM element. |
hideLabels | Hides all labels. |
clearLabels | Clears the label container. |
disposeLabel | Removes a label. |
animate | Animates the graph. |
sequence | Iteratively performs an action while refreshing the state of the visualization. |
plot | Plots a Graph. |
plotNode | Plots a graph node. |
plotLine | Plots a line connecting node and child nodes. |
hideLabel | Hides a label having node.id as id. |
plotLabel | Plots a label for a given node. |
fitsInCanvas | Returns true or false if the label for the node is contained on the canvas dom element or not. |
RGraph | An animated Graph with radial layout. |
Functions | |
RGraph | Creates a new RGraph instance. |
loadTree | Loads a Graph from a json tree object http://blog.thejit.org |
loadGraph | Loads a Graph from a json graph object http://blog.thejit.org |
refresh | Computes positions and then plots. |
flagRoot | Flags a node specified by id as root. |
unflagRoot | Unflags all nodes. |
getRoot | Returns the node flagged as root. |
loadTreeFromJSON | Loads a RGraph from a json object http://blog.thejit.org |
loadGraphFromJSON | Loads a RGraph from a json object http://blog.thejit.org |
plot | Plots the RGraph |
compute | Computes the graph nodes positions and stores this positions on property. |
computePositions | Performs the main algorithm for computing node positions. |
setAngularWidthForNodes | Sets nodes angular widths. |
setSubtreesAngularWidths | Sets subtrees angular widths. |
setSubtreeAngularWidth | Sets the angular width for a subtree. |
computeAngularWidths | Computes nodes and subtrees angular widths. |
getNodeAndParentAngle | Returns the parent of the given node, also calculating its angle span. |
tagChildren | Enumerates the children in order to mantain child ordering (second constraint of the paper). |
onClick | Performs all calculations and animation when clicking on a label specified by id. |
Graph | A generic Graph class. |
Functions and Properties | |
Graph | Creates a new Graph instance. |
nodes | graph nodes |
getNode | Returns a Graph.Node from a specified id. |
getAdjacence | Returns an array of Graph.Adjacence that connects nodes with id id and id2. |
addNode | Adds a node. |
addAdjacence | Connects nodes specified by obj and obj2. |
removeNode | Removes a Graph.Node from Graph that matches the specified id. |
removeAdjacence | Removes a Graph.Adjacence from Graph that matches the specified id1 and id2. |
hasNode | Returns a Boolean instance indicating if node belongs to graph or not. |
Graph.Node | Behaviour of the Graph node. |
Functions | |
Graph.Node | Node constructor. |
Properties | |
id | A node’s id |
name | A node’s name |
data | The dataSet object http://blog.thejit.org/?p=7 |
drawn | Node flag |
angle span | allowed angle span for adjacencies placement |
pos | node position |
startPos | node from position |
endPos | node to position |
alpha | node alpha |
startAlpha | node start alpha |
endAlpha | node end alpha |
adjacencies | node adjacencies |
Functions | |
adjacentTo | Indicates if the node is adjacent to the node indicated by the specified id |
getAdjacency | Returns a Graph.Adjacence that connects the current Graph.Node with the node having id as id. |
addAdjacency | Connects the node to the specified by id. |
removeAdjacency | Deletes the Graph.Adjacence by id. |
Graph. | Creates a new Graph adjacence. |
Properties | |
nodeFrom | One of the two Graph.Nodes connected by this edge. |
nodeTo | One of the two Graph.Nodes connected by this edge. |
data | A dataset object |
alpha | node alpha |
startAlpha | node start alpha |
endAlpha | node end alpha |
Trans | An object containing multiple type of transformations. |
Animation | An object that performs animations. |
A multi-purpose Complex Class with common methods.
Functions | |
Complex | Complex constructor. |
clone | Returns a copy of the current object. |
toPolar | Transforms cartesian to polar coordinates. |
norm | Calculates the complex norm. |
squaredNorm | Calculates the complex squared norm. |
add | Returns the result of adding two complex numbers. |
prod | Returns the result of multiplying two complex numbers. |
conjugate | Returns the conjugate por this complex. |
scale | Returns the result of scaling a Complex instance. |
equals | Comparison method. |
$add | Returns the result of adding two complex numbers. |
$prod | Returns the result of multiplying two complex numbers. |
$conjugate | Returns the conjugate for this complex. |
$scale | Returns the result of scaling a Complex instance. |
$div | Returns the division of two complex numbers. |
A multi purpose polar representation.
Functions | |
Polar | Polar constructor. |
clone | Returns a copy of the current object. |
toComplex | Translates from polar to cartesian coordinates and returns a new Complex instance. |
add | Adds two Polar instances. |
scale | Scales a polar norm. |
equals | Comparison method. |
$add | Adds two Polar instances affecting the current object. |
$madd | Adds two Polar instances affecting the current object. |
$scale | Scales a polar instance affecting the object. |
interpolate | Calculates a polar interpolation between two points at a given delta moment. |
toComplex: function()
Translates from polar to cartesian coordinates and returns a new Complex instance.
A new Complex instance.
$add: function( polar )
Adds two Polar instances affecting the current object.
The changed object.
$madd: function( polar )
Adds two Polar instances affecting the current object. The resulting theta angle is modulo 2pi.
The changed object.
RGraph global configuration object. Contains important properties to enable customization and proper behavior for the RGraph.
Properties | |
labelContainer | Id for label container. |
levelDistance | The actual distance between levels |
nodeRadius | The radius of the nodes displayed |
allowVariableNodeDiameters | Set this to true if you want your node diameters to be proportional to you first dataset object value property (i.e data[0].value). |
nodeRangeDiameters | Diameters range. |
nodeRangeValues | The interval of the values of the first object of your dataSet. |
fps | animation frames per second |
animationTime | |
interpolation |
A multi purpose object to do graph traversal and processing.
Functions | |
filter | For internal use only. |
getNode | Returns a graph’s node with a specified id. |
eachNode | Iterates over graph nodes performing an action. |
eachAdjacency | Iterates over a node adjacencies applying the action function. |
computeLevels | Performs a BFS traversal setting correct level for nodes. |
eachBFS | Performs a BFS traversal of a graph beginning by the node of id id and performing action on each node. |
eachSubnode | After a BFS traversal the depth property of each node has been modified. |
getSubnodes | Collects all subnodes for a specified node. |
getParents | Returns all nodes having a depth that is less than the node’s depth property. |
clean | Cleans flags from nodes (by setting the flag property to false). |
An object holding unary and binary graph operations such as removingNodes, removingEdges, adding two graphs and morphing.
Functions | |
removeNode | Removes one or more nodes from the visualization. |
removeEdge | Removes one or more edges from the visualization. |
sum | Adds a new graph to the visualization. |
morph | This method will morph the current visualized graph into the new json representation passed in the method. |
removeNode: function( viz, node, opt )
Removes one or more nodes from the visualization. It can also perform several animations like fading sequentially, fading concurrently, iterating or replotting.
viz | The visualization object (an RGraph instance in this case). |
node | The node’s id. Can also be an array having many ids. |
opt | Animation options. It’s an object with two properties: type, which can be nothing, replot, fade:seq, fade:con or iter. The other property is the duration in milliseconds. |
removeEdge: function( viz, vertex, opt )
Removes one or more edges from the visualization. It can also perform several animations like fading sequentially, fading concurrently, iterating or replotting.
viz | The visualization object (an RGraph instance in this case). |
vertex | An array having two strings which are the ids of the nodes connected by this edge: [‘id1’, ‘id2’]. Can also be a two dimensional array holding many edges: [[‘id1’, ‘id2’], [‘id3’, ‘id4’], ...]. |
opt | Animation options. It’s an object with two properties: type, which can be nothing, replot, fade:seq, fade:con or iter. The other property is the duration in milliseconds. |
sum: function( viz, json, opt )
Adds a new graph to the visualization. The json graph (or tree) must at least have a common node with the current graph plotted by the visualization. The resulting graph can be defined as follows: http://mathworld.wolfram.com/GraphSum.html
viz | The visualization object (an RGraph instance in this case). |
json | A json tree http://blog.thejit.org |
opt | Animation options. It’s an object with two properties: type, which can be nothing, replot, fade:seq, or fade:con. The other property is the duration in milliseconds. |
morph: function( viz, json, opt )
This method will morph the current visualized graph into the new json representation passed in the method. Can also perform multiple animations. The json object must at least have the root node in common with the current visualized graph.
viz | The visualization object (an RGraph instance in this case). |
json | A json tree http://blog.thejit.org |
opt | Animation options. It’s an object with two properties: type, which can be nothing, replot, or fade. The other property is the duration in milliseconds. |
An object that performs specific radial layouts for a generic graph structure.
Properties | |
labelsHidden | A flag value indicating if node labels are being displayed or not. |
labelContainer | Label DOM element |
labels | Label DOM elements hash. |
Functions | |
getLabelContainer | Lazy fetcher for the label container. |
getLabel | Lazy fetcher for the label DOM element. |
hideLabels | Hides all labels. |
clearLabels | Clears the label container. |
disposeLabel | Removes a label. |
animate | Animates the graph. |
sequence | Iteratively performs an action while refreshing the state of the visualization. |
plot | Plots a Graph. |
plotNode | Plots a graph node. |
plotLine | Plots a line connecting node and child nodes. |
hideLabel | Hides a label having node.id as id. |
plotLabel | Plots a label for a given node. |
fitsInCanvas | Returns true or false if the label for the node is contained on the canvas dom element or not. |
An animated Graph with radial layout.
Go to http://blog.thejit.org to know what kind of JSON structure feeds this object.
Go to http://blog.thejit.org/?p=8 to know what kind of controller this class accepts.
Refer to the Config object to know what properties can be modified in order to customize this object.
var canvas= new Canvas('infovis', {}); var rgraph= new RGraph(canvas, controller); rgraph.loadTreeFromJSON(json); rgraph.compute(); rgraph.plot();
A user should only interact with the Canvas, RGraph and Config objects/classes. By implementing RGraph controllers you can also customize the RGraph behavior.
Functions | |
RGraph | Creates a new RGraph instance. |
loadTree | Loads a Graph from a json tree object http://blog.thejit.org |
loadGraph | Loads a Graph from a json graph object http://blog.thejit.org |
refresh | Computes positions and then plots. |
flagRoot | Flags a node specified by id as root. |
unflagRoot | Unflags all nodes. |
getRoot | Returns the node flagged as root. |
loadTreeFromJSON | Loads a RGraph from a json object http://blog.thejit.org |
loadGraphFromJSON | Loads a RGraph from a json object http://blog.thejit.org |
plot | Plots the RGraph |
compute | Computes the graph nodes positions and stores this positions on property. |
computePositions | Performs the main algorithm for computing node positions. |
setAngularWidthForNodes | Sets nodes angular widths. |
setSubtreesAngularWidths | Sets subtrees angular widths. |
setSubtreeAngularWidth | Sets the angular width for a subtree. |
computeAngularWidths | Computes nodes and subtrees angular widths. |
getNodeAndParentAngle | Returns the parent of the given node, also calculating its angle span. |
tagChildren | Enumerates the children in order to mantain child ordering (second constraint of the paper). |
onClick | Performs all calculations and animation when clicking on a label specified by id. |
var RGraph = function( canvas, controller )
Creates a new RGraph instance.
canvas | A Canvas instance. |
controller | optional a RGraph controller http://blog.thejit.org/?p=8 |
loadTree: function( json )
Loads a Graph from a json tree object http://blog.thejit.org
loadGraph: function( json )
Loads a Graph from a json graph object http://blog.thejit.org
loadTreeFromJSON: function( json )
Loads a RGraph from a json object http://blog.thejit.org
loadGraphFromJSON: function( json, i )
Loads a RGraph from a json object http://blog.thejit.org
A generic Graph class.
Functions and Properties | |
Graph | Creates a new Graph instance. |
nodes | graph nodes |
getNode | Returns a Graph.Node from a specified id. |
getAdjacence | Returns an array of Graph.Adjacence that connects nodes with id id and id2. |
addNode | Adds a node. |
addAdjacence | Connects nodes specified by obj and obj2. |
removeNode | Removes a Graph.Node from Graph that matches the specified id. |
removeAdjacence | Removes a Graph.Adjacence from Graph that matches the specified id1 and id2. |
hasNode | Returns a Boolean instance indicating if node belongs to graph or not. |
getNode: function( id )
Returns a Graph.Node from a specified id.
getAdjacence: function ( id, id2 )
Returns an array of Graph.Adjacence that connects nodes with id id and id2.
addAdjacence: function ( obj, obj2, weight )
Connects nodes specified by obj and obj2. If not found, nodes are created.
obj | a Graph.Node object. |
obj2 | Another Graph.Node object. |
data | A DataSet object. |
removeNode: function( id )
Removes a Graph.Node from Graph that matches the specified id.
removeAdjacence: function( id1, id2 )
Removes a Graph.Adjacence from Graph that matches the specified id1 and id2.
Behaviour of the Graph node.
Functions | |
Graph.Node | Node constructor. |
Properties | |
id | A node’s id |
name | A node’s name |
data | The dataSet object http://blog.thejit.org/?p=7 |
drawn | Node flag |
angle span | allowed angle span for adjacencies placement |
pos | node position |
startPos | node from position |
endPos | node to position |
alpha | node alpha |
startAlpha | node start alpha |
endAlpha | node end alpha |
adjacencies | node adjacencies |
Functions | |
adjacentTo | Indicates if the node is adjacent to the node indicated by the specified id |
getAdjacency | Returns a Graph.Adjacence that connects the current Graph.Node with the node having id as id. |
addAdjacency | Connects the node to the specified by id. |
removeAdjacency | Deletes the Graph.Adjacence by id. |
Graph.Node = function( id, name, data )
Node constructor.
id | The node unique identifier id. |
name | A node’s name. |
data | Place to store some extra information (can be left to null). |
A new Graph.Node instance.
The dataSet object http://blog.thejit.org/?p=7
getAdjacency: function( id )
Returns a Graph.Adjacence that connects the current Graph.Node with the node having id as id.
id | A node id. |
Creates a new Graph adjacence.
Properties | |
nodeFrom | One of the two Graph.Nodes connected by this edge. |
nodeTo | One of the two Graph.Nodes connected by this edge. |
data | A dataset object |
alpha | node alpha |
startAlpha | node start alpha |
endAlpha | node end alpha |
One of the two Graph.Nodes connected by this edge.
One of the two Graph.Nodes connected by this edge.
An object containing multiple type of transformations. Based on the mootools library http://mootools.net.
Complex constructor.
var Complex= function()
Returns a copy of the current object.
clone: function()
Transforms cartesian to polar coordinates.
toPolar: function()
Calculates the complex norm.
norm: function ()
Calculates the complex squared norm.
squaredNorm: function ()
Returns the result of adding two complex numbers.
add: function( pos )
Returns the result of multiplying two complex numbers.
prod: function( pos )
Returns the conjugate por this complex.
conjugate: function()
Returns the result of scaling a Complex instance.
scale: function( factor )
Comparison method.
equals: function( c )
Returns the result of adding two complex numbers.
$add: function( pos )
Returns the result of multiplying two complex numbers.
$prod:function( pos )
Returns the conjugate for this complex.
$conjugate: function()
Returns the result of scaling a Complex instance.
$scale: function( factor )
Returns the division of two complex numbers.
$div: function( pos )
Polar constructor.
var Polar = function( theta, rho )
Returns a copy of the current object.
clone: function()
Translates from polar to cartesian coordinates and returns a new Complex instance.
toComplex: function()
Adds two Polar instances.
add: function( polar )
Scales a polar norm.
scale: function( number )
Comparison method.
equals: function( c )
Adds two Polar instances affecting the current object.
$add: function( polar )
Adds two Polar instances affecting the current object.
$madd: function( polar )
Scales a polar instance affecting the object.
$scale: function( number )
Calculates a polar interpolation between two points at a given delta moment.
interpolate: function( elem, delta )
For internal use only.
filter: function( param )
Returns a graph’s node with a specified id.
getNode: function( graph, id )
Iterates over graph nodes performing an action.
eachNode: function( graph, action, flags )
Iterates over a node adjacencies applying the action function.
eachAdjacency: function( node, action, flags )
Performs a BFS traversal setting correct level for nodes.
computeLevels: function( graph, id, flags )
Performs a BFS traversal of a graph beginning by the node of id id and performing action on each node.
eachBFS: function( graph, id, action, flags )
After a BFS traversal the depth property of each node has been modified.
eachSubnode: function( node, action, flags )
Collects all subnodes for a specified node.
getSubnodes: function( graph, id, level, flags )
Returns all nodes having a depth that is less than the node’s depth property.
getParents: function( graph, node )
Cleans flags from nodes (by setting the flag property to false).
clean: function( graph )
Removes one or more nodes from the visualization.
removeNode: function( viz, node, opt )
Removes one or more edges from the visualization.
removeEdge: function( viz, vertex, opt )
Adds a new graph to the visualization.
sum: function( viz, json, opt )
This method will morph the current visualized graph into the new json representation passed in the method.
morph: function( viz, json, opt )
Lazy fetcher for the label container.
getLabelContainer: function()
Lazy fetcher for the label DOM element.
getLabel: function( id )
Hides all labels.
hideLabels: function ( hide )
Clears the label container.
clearLabels: function( viz )
Removes a label.
disposeLabel: function( id )
Animates the graph.
animate: function( viz, opt )
Iteratively performs an action while refreshing the state of the visualization.
sequence: function( viz, options )
Plots a Graph.
plot: function( viz, opt )
Plots a graph node.
plotNode: function( node, canvas )
Plots a line connecting node and child nodes.
plotLine: function( adj, canvas )
Hides a label having node.id as id.
hideLabel: function( node )
Plots a label for a given node.
plotLabel: function( canvas, node, controller )
Returns true or false if the label for the node is contained on the canvas dom element or not.
fitsInCanvas: function( pos, canvas )
Creates a new RGraph instance.
var RGraph = function( canvas, controller )
Loads a Graph from a json tree object http://blog.thejit.org
loadTree: function( json )
Loads a Graph from a json graph object http://blog.thejit.org
loadGraph: function( json )
Computes positions and then plots.
refresh: function()
Flags a node specified by id as root.
flagRoot: function( id )
Unflags all nodes.
unflagRoot: function()
Returns the node flagged as root.
getRoot: function()
Loads a RGraph from a json object http://blog.thejit.org
loadTreeFromJSON: function( json )
Loads a RGraph from a json object http://blog.thejit.org
loadGraphFromJSON: function( json, i )
Plots the RGraph
plot: function()
Computes the graph nodes positions and stores this positions on property.
compute: function( property )
Performs the main algorithm for computing node positions.
computePositions: function( property )
Sets nodes angular widths.
setAngularWidthForNodes: function()
Sets the angular width for a subtree.
setSubtreeAngularWidth: function( elem )
Computes nodes and subtrees angular widths.
computeAngularWidths: function ()
Returns the parent of the given node, also calculating its angle span.
getNodeAndParentAngle: function( id )
Enumerates the children in order to mantain child ordering (second constraint of the paper).
tagChildren: function( par, id )
Performs all calculations and animation when clicking on a label specified by id.
onClick: function( id )
Creates a new Graph instance.
var Graph= function()
Returns a Graph.Node from a specified id.
getNode: function( id )
Returns an array of Graph.Adjacence that connects nodes with id id and id2.
getAdjacence: function ( id, id2 )
Adds a node.
addNode: function( obj )
Connects nodes specified by obj and obj2.
addAdjacence: function ( obj, obj2, weight )
Removes a Graph.Node from Graph that matches the specified id.
removeNode: function( id )
Removes a Graph.Adjacence from Graph that matches the specified id1 and id2.
removeAdjacence: function( id1, id2 )
Returns a Boolean instance indicating if node belongs to graph or not.
hasNode: function( id )
Node constructor.
Graph.Node = function( id, name, data )
Indicates if the node is adjacent to the node indicated by the specified id
adjacentTo: function( node )
Returns a Graph.Adjacence that connects the current Graph.Node with the node having id as id.
getAdjacency: function( id )
Connects the node to the specified by id.
addAdjacency: function( node, data )
Deletes the Graph.Adjacence by id.
removeAdjacency: function( id )