You may be interested in Cytoscape.js, a newer HTML5-based JavaScript library with an updated API and new features.

Layout

Layouts are just untyped objects.

name {String} : The layout name. This field is mandatory and must be one of:

  • ForceDirected
  • Circle
  • Radial
  • Tree
  • Preset
  • CompoundSpringEmbedder: use this option when the network is a compound graph

options {Object} : The available options for each layout type are:

  1. ForceDirected:
    • mass {Number}: The default mass value for nodes.
    • gravitation {Number}: The gravitational attraction (or repulsion, for negative values) between nodes.
    • tension {Number}: The default spring tension for edges.
    • restLength {Number}: The default spring rest length for edges.
    • drag {Number}: The co-efficient for frictional drag forces.
    • iterations {Number}: The number of iterations to run the simulation.
    • maxTime {Number}: The maximum time to run the simulation, in milliseconds.
    • minDistance {Number}: The minimum effective distance over which forces are exerted. Any lesser distances will be treated as the minimum.
    • maxDistance {Number}: The maximum distance over which forces are exerted. Any greater distances will be ignored.
    • seed {Number}: Optional positive integer which is used to set the random seed for generating the initial node positions. Force-directed layouts are non-deterministic by nature, but this option can be used to reproduce the same topology. Just leave this property undefined or set 0 if you want to keep the layout non-deterministic (i.e. a random seed is used).
    • autoStabilize {Boolean}: A common problem with force-directed layouts is that they can be highly unstable. If this parameter is true and the edges are being stretched too much between each iteration, Cytoscape Web automatically tries to stabilize the network. The stabilization attempt is executed after the determined number of iterations, until each edge length seems constant or until the maxTime is reached. Set false if you think the results look worse than expected, or if the layout is taking too long to execute.
    • weightAttr {String}: The name of the edge attribute that contains the weights. The default value is null, which means that the layout is unweighted with respect to edges. If you want to generate an edge-weighted layout, you just need to provide the name of the data attribute that should be used as weight.
    • weightNorm {String}: The normalization method that is applied to the weight values when using a weighted layout (i.e. weightAttr != null). Possible values are: "linear", "invlinear" and "log". The default value is "linear".
    • minWeight {Number}: The minimum edge weight to consider, if the layout is set to be weighted. Do not specify any value if you want the layout to get the minimum weight from the rendered edges data (filtered-out edges are ignored). Any edge with a weight bellow the minimum will be laid out the same as an edge with the minimum weight.
    • maxWeight {Number}: The maximum edge weight to consider, if the layout is set to be weighted. Do not specify any value if you want the layout to get the maximum weight from the rendered edges data (filtered-out edges are ignored). Any edge with a weight above the maximum will be laid out the same as an edge with maximum weight.
  2. Circle:
    • angleWidth {Number}: The angular width of the layout, in degrees.
    • tree {Boolean}: Flag indicating if any tree-structure in the data should be used to inform the layout. The default value is false.
  3. Radial:
    • angleWidth {Number}: The angular width of the layout, in degrees.
    • radius {Number}: The radius increment between depth levels.
  4. Tree:
    • orientation {String}: The orientation of the tree. One of: "leftToRight", "rightToLeft", "topToBottom", "bottomToTop".
    • depthSpace {Number}: The space between depth levels in the tree.
    • breadthSpace {Number}: The space between siblings in the tree.
    • subtreeSpace {Number}: The space between different sub-trees.
  5. CompoundSpringEmbedder:
    • layoutQuality {String}: Can be one of the following: "default", "draft", "proof". A better quality layout requires more iterations, taking longer.
    • incremental {Boolean}: If true, layout is applied incrementally by taking current positions of nodes into account.
    • tension {Number}: The default spring tension (spring constant) for edges.
    • restLength {Number}: The default spring rest length (desired length) for edges.
    • smartRestLength {Boolean}: Whether or not smart calculation of ideal rest length should be performed for inter-graph edges. When this is enabled, we calculate the number of nesting levels each edge spans and calculate the desired edge length accordingly.
    • gravitation {Number}: The gravitational attraction (or repulsion, for negative values) force between nodes.
    • smartDistance {Boolean}: If true, gravitational repulsion forces are calculated only when node pairs are in a certain range, resulting in faster layout at the relatively minimal cost of layout quality.
    • centralGravitation {Number}: All nodes are assumed to be pulled slightly towards the center of the network by a central gravitational force (gravitational constant) during layout. This is done to avoid arbitrary separation of disconnected parts of a network.
    • centralGravityDistance {Number}: The radius of the region in the center of the drawing, in which central gravitation is not exerted.
    • compoundCentralGravitation {Number}: The central gravitational constant for compound nodes. Contents of each compound node have a separate center of gravity.
    • compoundCentralGravityDistance {Number}: The radius of the region in the center of a compound node, over which central gravity force is exerted.
    • multiLevelScaling {Boolean}: If true, multi-level scaling algorithm is applied both to better capture the overall structure of the network and to save time on large networks.
    • uniformLeafNodeSizes {Boolean}: If true, leaf (non-compound or simple) node dimensions are assumed to be uniform, resulting in faster layout.
  6. Preset:
    • fitToScreen {Boolean}: If true, the network is centered, and can be zoomed out to fit the screen.
    • points {Array}: A list of plain objects containing the node id and the x/y coordinates. Example:
      var options = {
          fitToScreen: false,
          points: [ { id: "1", x:  10, y:  60 },
                    { id: "2", x: -54, y:  32 },
                    { id: "3", x: 120, y: -12 } ]
      };
var layout = {
    name:    "Radial",
    options: { angleWidth: 180, radius: 80 }
};