From 5f472d65718419fe440d0de3c10403c83fb4db34 Mon Sep 17 00:00:00 2001 From: josdejong Date: Wed, 29 Jan 2014 11:38:12 +0100 Subject: [PATCH 1/3] Restructured Graph docs --- docs/graph.html | 1014 ++++++++++++++++++++++++++--------------------- 1 file changed, 565 insertions(+), 449 deletions(-) diff --git a/docs/graph.html b/docs/graph.html index 866e171a..cf12c068 100644 --- a/docs/graph.html +++ b/docs/graph.html @@ -21,20 +21,27 @@
  • Example
  • Loading
  • - Data Format + Data format
    • -
  • Configuration Options
    • -
  • Clustering
    • -
  • Navigation GUI
    • -
  • Keyboard Navigation
    • +
  • + Configuration options + +
  • Methods
  • Events
    • -
  • Data Policy
    • +
  • Data policy

    • Overview

    @@ -150,7 +157,7 @@ The constructor accepts three parameters: -

    Data Format

    +

    Data format

    The data parameter of the Graph constructor is an object which can contain different types of data. @@ -608,7 +615,7 @@ var graph = new vis.Graph(container, data); -

    Configuration Options

    +

    Configuration options

    Options can be used to customize the graph. Options are defined as a JSON object. @@ -631,239 +638,353 @@ var options = {

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDefaultDescription
    edges.colorString"#2B7CE9"The default color of a edge.
    edges.dashObjectObject - Object containing default properties for dashed lines. - Available properties: length, gap, - altLength. -
    edges.dash.altLengthnumbernoneDefault length of the alternated dash in pixels on a dashed line. - Specifying dash.altLength allows for creating - a dashed line with a dash-dot style, for example when - dash.length=10 and dash.altLength=5. - See also the option dahs.length. - Only applicable when the line style is dash-line.
    edges.dash.lengthnumber10Default length of a dash in pixels on a dashed line. - Only applicable when the line style is dash-line.
    edges.dash.gapnumber5Default length of a gap in pixels on a dashed line. - Only applicable when the line style is dash-line.
    edges.lengthNumber100The default length of a edge.
    edges.styleString"line"The default style of a edge. - Choose from line (default), arrow, - arrow-center, dash-line.
    edges.widthNumber1The default width of a edge.
    groupsObjectnoneIt is possible to specify custom styles for groups. - Each node assigned a group gets the specified style. - See Groups for an overview of the available styles - and an example. -
    heightString"400px"The height of the graph in pixels or as a percentage.
    nodes.colorString | ObjectObjectDefault color of the nodes. When color is a string, the color is applied - to both background as well as the border of the node.
    nodes.color.backgroundString"#97C2FC"Default background color of the nodes
    nodes.color.borderString"#2B7CE9"Default border color of the nodes
    nodes.color.highlightString | ObjectObjectDefault color of the node when the node is selected. Applied to - both border and background of the node.
    nodes.color.highlight.backgroundString"#D2E5FF"Default background color of the node when selected.
    nodes.color.highlight.borderString"#2B7CE9"Default border color of the node when selected.
    nodes.fontColorString"black"Default font color for the text label in the nodes.
    nodes.fontFaceString"sans"Default font face for the text label in the nodes, for example "verdana" or "arial".
    nodes.fontSizeNumber14Default font size in pixels for the text label in the nodes.
    nodes.groupStringnoneDefault group for the nodes.
    nodes.imageStringnoneDefault image url for the nodes. only applicable with shape image.
    nodes.widthMinNumber16The minimum width for a scaled image. Only applicable with shape image.
    nodes.widthMaxNumber64The maximum width for a scaled image. Only applicable with shape image.
    nodes.shapeString"ellipse"The default shape for all nodes. - Choose from - ellipse (default), circle, box, - database, image, label, dot, - star, triangle, triangleDown, and square. - This shape can be overridden by a group shape, or by a shape of an individual node.
    nodes.radiusNumber5The default radius for a node. Only applicable with shape dot.
    nodes.radiusMinNumber5The minimum radius for a scaled node. Only applicable with shape dot.
    nodes.radiusMaxNumber20The maximum radius for a scaled node. Only applicable with shape dot.
    selectableBooleantrueIf true, nodes in the graph can be selected by clicking them. - Long press can be used to select multiple nodes.
    stabilizeBooleantrueIf true, the graph is stabilized before displaying it. If false, - the nodes move to a stabe position visibly in an animated way.
    widthString"400px"The width of the graph in pixels or as a percentage.
    NameTypeDefaultDescription
    clusteringObjectnone + Clustering configuration. Clustering is turned off by default. See section Clustering for an overview of the available options. +
    edgesObjectnone + Configuration options applied to all edges. See section Edges configuration for an overview of the available options. +
    groupsObjectnoneIt is possible to specify custom styles for groups. + Each node assigned a group gets the specified style. + See Groups configuration for an overview of the available styles + and an example. +
    heightString"400px"The height of the graph in pixels or as a percentage.
    keyboardNavigationObjectnone + Configuration options for shortcuts keys. Sortcut keys are turned off by default. See section Keyboard navigation for an overview of the available options. +
    navigationUIObjectnone + Configuration options for the navigation controls. See section Navigation controls for an overview of the available options. +
    nodesObjectnone + Configuration options applied to all nodes. See section Nodes configuration for an overview of the available options. +
    selectableBooleantrueIf true, nodes in the graph can be selected by clicking them. + Long press can be used to select multiple nodes.
    stabilizeBooleantrueIf true, the graph is stabilized before displaying it. If false, + the nodes move to a stabe position visibly in an animated way.
    widthString"400px"The width of the graph in pixels or as a percentage.

    -

    Groups

    +

    Nodes configuration

    +

    + Nodes can be configured with different styles and shapes. To configure nodes, provide an object named nodes in the options for the Graph. +

    + +

    + For example to give the nodes a custom color, shape, and size: +

    +
    +var options = {
+  // ...
+  nodes: {
+    color: {
+      background: 'white',
+      border: 'red',
+      highlight: {
+        background: 'pink',
+        border: 'red'
+      }
+    },
+    shape: 'star',
+    radius: 24
+  }
+};
+
    + +

    + The following options are available for nodes. These options must be created + inside an object nodes in the graphs options object.

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    colorString | ObjectObjectDefault color of the nodes. When color is a string, the color is applied + to both background as well as the border of the node.
    color.backgroundString"#97C2FC"Default background color of the nodes
    color.borderString"#2B7CE9"Default border color of the nodes
    color.highlightString | ObjectObjectDefault color of the node when the node is selected. Applied to + both border and background of the node.
    color.highlight.backgroundString"#D2E5FF"Default background color of the node when selected.
    color.highlight.borderString"#2B7CE9"Default border color of the node when selected.
    fontColorString"black"Default font color for the text label in the nodes.
    fontFaceString"sans"Default font face for the text label in the nodes, for example "verdana" or "arial".
    fontSizeNumber14Default font size in pixels for the text label in the nodes.
    groupStringnoneDefault group for the nodes.
    imageStringnoneDefault image url for the nodes. only applicable to shape image.
    widthMinNumber16The minimum width for a scaled image. Only applicable to shape image.
    widthMaxNumber64The maximum width for a scaled image. Only applicable to shape image.
    shapeString"ellipse"The default shape for all nodes. + Choose from + ellipse (default), circle, box, + database, image, label, dot, + star, triangle, triangleDown, and square. + This shape can be overridden by a group shape, or by a shape of an individual node.
    radiusNumber5The default radius for a node. Only applicable to shapes dot, + star, triangle, triangleDown, and square.
    radiusMinNumber5The minimum radius for a scaled node. Only applicable to shapes dot, + star, triangle, triangleDown, and square.
    radiusMaxNumber20The maximum radius for a scaled node. Only applicable to shapes dot, + star, triangle, triangleDown, and square.
    + + +

    Edges configuration

    + +

    + Edges can be configured with different length and styling. To configure edges, provide an object named edges in the options for the Graph. +

    + +

    + For example to set the width of all edges to 2 pixels and give them a red color: +

    +
    +var options = {
+  // ...
+  edges: {
+    color: 'red',
+    width: 2
+  }
+};
+
    + +

    + The following options are available for edges. These options must be created + inside an object edges in the graphs options object. +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDefaultDescription
    colorString"#2B7CE9"The default color of a edge.
    dashObjectObject + Object containing default properties for dashed lines. + Available properties: length, gap, + altLength. +
    dash.altLengthnumbernoneDefault length of the alternated dash in pixels on a dashed line. + Specifying dash.altLength allows for creating + a dashed line with a dash-dot style, for example when + dash.length=10 and dash.altLength=5. + See also the option dahs.length. + Only applicable when the line style is dash-line.
    dash.lengthnumber10Default length of a dash in pixels on a dashed line. + Only applicable when the line style is dash-line.
    dash.gapnumber5Default length of a gap in pixels on a dashed line. + Only applicable when the line style is dash-line.
    lengthNumber100The default length of a edge.
    styleString"line"The default style of a edge. + Choose from line (default), arrow, + arrow-center, dash-line.
    widthNumber1The default width of a edge.
    + +

    Groups configuration

    It is possible to specify custom styles for groups of nodes. Each node having assigned to this group gets the specified style. @@ -998,22 +1119,22 @@ var nodes = [ -

    Clustering

    +

    Clustering

    - The graph now supports dynamic clustering of nodes. This allows a user to view a very large dataset (> 50.000 nodes) without - sacrificing performance. When loading a large dataset, the nodes are clustered initially (this may take a small while) to have a - responsive visualization to work with. The clustering is both outside-in and inside-out. Outside-in means that nodes with only one - connection will be contained, or clustered, in the node it is connected to. Inside-out clustering first determines which nodes are hubs. - Hubs are defined as the nodes with the top 3% highest amount of connections (assuming normal distribution). These hubs then "grow", meaning - they contain the nodes they are connected to within themselves. The edges that were connected to the nodes that are absorbed will be reconnected to the cluster. -
    -
    - A cluster is just a node that has references to the nodes and edges it contains. It has an internal counter to keep track of its size, which is then used - to calculate the required forces. The contained nodes are removed from the global nodes index, greatly speeding up the system. -
    -
    - The clustering has the following user-configurable settings. The default values have been tested with the Graph examples and work well. - The default state for clustering is off. + The graph now supports dynamic clustering of nodes. This allows a user to view a very large dataset (> 50.000 nodes) without + sacrificing performance. When loading a large dataset, the nodes are clustered initially (this may take a small while) to have a + responsive visualization to work with. The clustering is both outside-in and inside-out. Outside-in means that nodes with only one + connection will be contained, or clustered, in the node it is connected to. Inside-out clustering first determines which nodes are hubs. + Hubs are defined as the nodes with the top 3% highest amount of connections (assuming normal distribution). These hubs then "grow", meaning + they contain the nodes they are connected to within themselves. The edges that were connected to the nodes that are absorbed will be reconnected to the cluster. +
    +
    + A cluster is just a node that has references to the nodes and edges it contains. It has an internal counter to keep track of its size, which is then used + to calculate the required forces. The contained nodes are removed from the global nodes index, greatly speeding up the system. +
    +
    + The clustering has the following user-configurable settings. The default values have been tested with the Graph examples and work well. + The default state for clustering is off. 

    @@ -1021,136 +1142,135 @@ var nodes = [
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDefaultDescription
    enabledBooleanfalseOn/off switch for clustering. It is assumed clustering is enabled in the descriptions below.
    initialMaxNumberOfNodesNumber100If the initial amount of nodes is larger than this value, clustering starts until the total number of nodes is less than this value.
    absoluteMaxNumberOfNodesNumber500While zooming in and out, clusters can open up. Once there are more than absoluteMaxNumberOfNodes nodes, - clustering starts until reduceToMaxNumberOfNodes nodes are left. This is done to ensure performance is continiously fluid.
    reduceToMaxNumberOfNodesNumber300While zooming in and out, clusters can open up. Once there are more than absoluteMaxNumberOfNodes nodes, - clustering starts until reduceToMaxNumberOfNodes nodes are left. This is done to ensure performance is continiously fluid.
    chainThresholdNumber0.4Because of the clustering methods used, long chains of nodes can be formed. To reduce these chains, this threshold is used. - A chainThreshold of 0.4 means that no more than 40% of all nodes are allowed to be a chain node (two connections). - If there are more, they are clustered together.
    clusterEdgeThresholdNumber20This is the absolute edge length threshold in pixels. If the edge is smaller on screen (that means zooming out reduces this length) - the node will be clustered. This is triggered when zooming out.
    sectorThresholdInteger50If a cluster larger than sectorThreshold is opened, a seperate instance called a sector, will be created. All the simulation of - nodes outside of this instance will be paused. This is to maintain performance and clarity when examining large clusters. - A sector is collapsed when zooming out far enough. Also, when opening a cluster, if this cluster is smaller than this value, it is fully unpacked.
    screenSizeThresholdNumber0.2When zooming in, the clusters become bigger. A screenSizeThreshold of 0.2 means that if the width or height of this cluster - becomes bigger than 20% of the width or height of the canvas, the cluster is opened. If a sector has been created, if the sector is smaller than - 20%, we collapse this sector.
    fontSizeMultiplierNumber4.0This parameter denotes the increase in fontSize of the cluster when a single node is added to it.
    forceAmplificationNumber0.6This factor is used to calculate the increase of the repulsive force of a cluster. It is calculated by the following - formula: repulsingForce *= 1 + (clusterSize * forceAmplification).
    distanceAmplificationNumber0.2This factor is used to calculate the increase in effective range of the repulsive force of the cluster. - A larger cluster has a longer range. It is calculated by the following - formula: minDistance *= 1 + (clusterSize * distanceAmplification).
    edgeGrowthNumber11This factor determines the elongation of edges connected to a cluster.
    clusterSizeWidthFactorNumber10This factor determines how much the width of a cluster increases in pixels per added node.
    clusterSizeHeightFactorNumber10This factor determines how much the height of a cluster increases in pixels per added node.
    clusterSizeRadiusFactorNumber10This factor determines how much the radius of a cluster increases in pixels per added node.
    activeAreaBoxSizeNumber100Imagine a square with an edge length of activeAreaBoxSize pixels around your cursor. - If a cluster is in this box as you zoom in, the cluster can be opened in a seperate sector. - This is regardless of the zoom level.
    NameTypeDefaultDescription
    enabledBooleanfalseOn/off switch for clustering. It is assumed clustering is enabled in the descriptions below.
    initialMaxNumberOfNodesNumber100If the initial amount of nodes is larger than this value, clustering starts until the total number of nodes is less than this value.
    absoluteMaxNumberOfNodesNumber500While zooming in and out, clusters can open up. Once there are more than absoluteMaxNumberOfNodes nodes, + clustering starts until reduceToMaxNumberOfNodes nodes are left. This is done to ensure performance is continuously fluid.
    reduceToMaxNumberOfNodesNumber300While zooming in and out, clusters can open up. Once there are more than absoluteMaxNumberOfNodes nodes, + clustering starts until reduceToMaxNumberOfNodes nodes are left. This is done to ensure performance is continiously fluid.
    chainThresholdNumber0.4Because of the clustering methods used, long chains of nodes can be formed. To reduce these chains, this threshold is used. + A chainThreshold of 0.4 means that no more than 40% of all nodes are allowed to be a chain node (two connections). + If there are more, they are clustered together.
    clusterEdgeThresholdNumber20This is the absolute edge length threshold in pixels. If the edge is smaller on screen (that means zooming out reduces this length) + the node will be clustered. This is triggered when zooming out.
    sectorThresholdInteger50If a cluster larger than sectorThreshold is opened, a seperate instance called a sector, will be created. All the simulation of + nodes outside of this instance will be paused. This is to maintain performance and clarity when examining large clusters. + A sector is collapsed when zooming out far enough. Also, when opening a cluster, if this cluster is smaller than this value, it is fully unpacked.
    screenSizeThresholdNumber0.2When zooming in, the clusters become bigger. A screenSizeThreshold of 0.2 means that if the width or height of this cluster + becomes bigger than 20% of the width or height of the canvas, the cluster is opened. If a sector has been created, if the sector is smaller than + 20%, we collapse this sector.
    fontSizeMultiplierNumber4.0This parameter denotes the increase in fontSize of the cluster when a single node is added to it.
    forceAmplificationNumber0.6This factor is used to calculate the increase of the repulsive force of a cluster. It is calculated by the following + formula: repulsingForce *= 1 + (clusterSize * forceAmplification).
    distanceAmplificationNumber0.2This factor is used to calculate the increase in effective range of the repulsive force of the cluster. + A larger cluster has a longer range. It is calculated by the following + formula: minDistance *= 1 + (clusterSize * distanceAmplification).
    edgeGrowthNumber11This factor determines the elongation of edges connected to a cluster.
    clusterSizeWidthFactorNumber10This factor determines how much the width of a cluster increases in pixels per added node.
    clusterSizeHeightFactorNumber10This factor determines how much the height of a cluster increases in pixels per added node.
    clusterSizeRadiusFactorNumber10This factor determines how much the radius of a cluster increases in pixels per added node.
    activeAreaBoxSizeNumber100Imagine a square with an edge length of activeAreaBoxSize pixels around your cursor. + If a cluster is in this box as you zoom in, the cluster can be opened in a seperate sector. + This is regardless of the zoom level.
    - +

    - As of 0.4.0, a node-based navigation GUI system has been added to vis.js. - It can be configured with the following user-configurable settings. - The default state for the GUI navigation elements is off. + Graph has a menu with navigation controls, which is disabled by default. + It can be configured with the following settings. 

     // These variables must be defined in an options object named navigationUI.
 // If a variable is not supplied, the default value is used.
-options: {
+var options: {
     navigationUI: {
       enabled: false,
       initiallyVisible: true,
@@ -1161,52 +1281,52 @@ options: {
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDefaultDescription
    enabledBooleanfalseOn/off switch for the navigation UI elements.
    initiallyVisibleBooleantrueThe UI elements can be toggled by pressing the "u" key. If initiallyVisible is false, the UI is hidden - until "u" is pressed on the keyboard. -
    enableTogglingBooleantrueEnable or disable the option to press "u" to toggle the UI elements. If the UI is initially hidden and the toggling is off, the UI cannot be used!
    iconPathstring[path to vis.js]/UI_icons/The path to the icon images can be defined here. If custom icons are used, they have to have the same filename as the ones originally packaged with vis.js.
    NameTypeDefaultDescription
    enabledBooleanfalseOn/off switch for the navigation UI elements.
    initiallyVisibleBooleantrueThe UI elements can be toggled by pressing the "u" key. If initiallyVisible is false, the UI is hidden + until "u" is pressed on the keyboard. +
    enableTogglingBooleantrueEnable or disable the option to press "u" to toggle the UI elements. If the UI is initially hidden and the toggling is off, the UI cannot be used!
    iconPathstring[path to vis.js]/UI_icons/The path to the icon images can be defined here. If custom icons are used, they have to have the same filename as the ones originally packaged with vis.js.
    -

    Keyboard Navigation

    +

    Keyboard navigation

    - As of 0.4.0, keyboard navigation has been added to vis.js. - It can be configured with the following user-configurable settings. - The default state for the keyboard navigation is off. The predefined keys can be found in the UI example. + The graph can be navigated using shortcut keys. + It can be configured with the following user-configurable settings. + The default state for the keyboard navigation is off. The predefined keys can be found in the UI example. 

     // These variables must be defined in an options object named keyboardNavigation.
 // If a variable is not supplied, the default value is used
-options: {
+var options: {
     keyboardNavigation: {
       enabled: false,
       xMovementSpeed: 10,
@@ -1217,38 +1337,38 @@ options: {
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDefaultDescription
    enabledBooleanfalseOn/off switch for the keyboard navigation.
    xMovementSpeedNumber10This defines the speed of the camera movement in the x direction when using the keyboard navigation. -
    yMovementSpeedBoolean10This defines the speed of the camera movement in the y direction when using the keyboard navigation.
    zoomMovementSpeedstring0.02This defines the zoomspeed when using the keyboard navigation.
    NameTypeDefaultDescription
    enabledBooleanfalseOn/off switch for the keyboard navigation.
    xMovementSpeedNumber10This defines the speed of the camera movement in the x direction when using the keyboard navigation. +
    yMovementSpeedBoolean10This defines the speed of the camera movement in the y direction when using the keyboard navigation.
    zoomMovementSpeedstring0.02This defines the zoomspeed when using the keyboard navigation.

    Methods

    @@ -1278,7 +1398,7 @@ options: { setOptions(options) none Set options for the graph. The available options are described in - the section Configuration Options. + the section Configuration Options. @@ -1341,10 +1461,6 @@ vis.events.addListener(graph, 'select', onSelect);

    - - - - @@ -1364,7 +1480,7 @@ vis.events.addListener(graph, 'select', onSelect);
    name Description
    -

    Data Policy

    +

    Data policy

    All code and data is processed and rendered in the browser. No data is sent to any server. From b127cb81b8cf6339e69ec6302634e66ccdc8c27e Mon Sep 17 00:00:00 2001 From: josdejong Date: Wed, 29 Jan 2014 11:42:44 +0100 Subject: [PATCH 2/3] Some more updates in the docs --- docs/graph.html | 43 +++++++++++++++++++++++-------------------- docs/timeline.html | 20 ++++++++++---------- 2 files changed, 33 insertions(+), 30 deletions(-) diff --git a/docs/graph.html b/docs/graph.html index cf12c068..1ce8d7f4 100644 --- a/docs/graph.html +++ b/docs/graph.html @@ -15,7 +15,26 @@

    Graph documentation

    +

    Overview

    +

    + Graph is a visualization to display graphs and networks consisting of nodes + and edges. The visualization is easy to use and supports custom shapes, + styles, colors, sizes, images, and more. +

    + +

    + The graph visualization works smooth on any modern browser for up to a + few hundred nodes and edges. +

    + +

    + To get started with Graph, install or download the + vis.js library. +

    + +

    Contents

    + -

    Overview

    -

    - Graph is a visualization to display graphs and networks consisting of nodes - and edges. The visualization is easy to use and supports custom shapes, - styles, colors, sizes, images, and more. -

    - -

    - The graph visualization works smooth on any modern browser for up to a - few hundred nodes and edges. -

    - -

    - To get started with Graph, install or download the - vis.js library. -

    -

    Example

    Here a basic graph example. Note that unlike the @@ -789,7 +791,7 @@ var options = { color.highlight String | Object Object - Default color of the node when the node is selected. Applied to + Default color of the node when the node is selected. In case of a string, the color is applied to both border and background of the node. @@ -1056,9 +1058,10 @@ var nodes = [ color.highlight - String + String | Object "#D2E5FF" - Color of the node when selected. + Default color of the node when the node is selected. In case of a string, the color is applied to + both border and background of the node. color.highlight.background diff --git a/docs/timeline.html b/docs/timeline.html index c2335c60..93dfc599 100644 --- a/docs/timeline.html +++ b/docs/timeline.html @@ -14,6 +14,16 @@

    Timeline documentation

    +

    Overview

    +

    + The Timeline is an interactive visualization chart to visualize data in time. + The data items can take place on a single date, or have a start and end date (a range). + You can freely move and zoom in the timeline by dragging and scrolling in the + Timeline. Items can be created, edited, and deleted in the timeline. + The time scale on the axis is adjusted automatically, and supports scales ranging + from milliseconds to years. +

    +

    Contents

    -

    Overview

    -

    - The Timeline is an interactive visualization chart to visualize data in time. - The data items can take place on a single date, or have a start and end date (a range). - You can freely move and zoom in the timeline by dragging and scrolling in the - Timeline. Items can be created, edited, and deleted in the timeline. - The time scale on the axis is adjusted automatically, and supports scales ranging - from milliseconds to years. -

    -

    Example

    The following code shows how to create a Timeline and provide it with data. From fea3517180f7f0a575dc135d9fe1d77ec0c1946c Mon Sep 17 00:00:00 2001 From: Alex de Mulder Date: Thu, 30 Jan 2014 10:24:22 +0100 Subject: [PATCH 3/3] added code example for clustering --- docs/graph.html | 23 ++++++++++++++++++++++- examples/timeline/01_basic.html | 2 ++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/docs/graph.html b/docs/graph.html index 1ce8d7f4..79e8b196 100644 --- a/docs/graph.html +++ b/docs/graph.html @@ -1142,6 +1142,27 @@ var nodes = [ 

     // These variables must be defined in an options object named clustering.
+// If a variable is not supplied, the default value is used.
+var options = {
+    clustering: {
+      enabled: false,
+      initialMaxNumberOfNodes: 100,
+      absoluteMaxNumberOfNodes:500,
+      reduceToMaxNumberOfNodes:300,
+      chainThreshold: 0.4,
+      clusterEdgeThreshold: 20,
+      sectorThreshold: 50,
+      screenSizeThreshold: 0.2,
+      fontSizeMultiplier:  4.0,
+      forceAmplification:  0.6,
+      distanceAmplification: 0.2,
+      edgeGrowth: 11,
+      clusterSizeWidthFactor:  10,
+      clusterSizeHeightFactor: 10,
+      clusterSizeRadiusFactor: 10,
+      activeAreaBoxSize: 100
+    }
+}
    @@ -1279,7 +1300,7 @@ var options: { initiallyVisible: true, enableToggling: true, iconPath: this._getIconURL() // automatic loading of the default icons - }, + } } diff --git a/examples/timeline/01_basic.html b/examples/timeline/01_basic.html index 514eefd1..9efa0301 100644 --- a/examples/timeline/01_basic.html +++ b/examples/timeline/01_basic.html @@ -7,6 +7,8 @@ body, html { font-family: sans-serif; } + +