From 05e761abca3ff42dbba371af0560b82707dfe7c0 Mon Sep 17 00:00:00 2001 From: Pliable Pixels Date: Fri, 28 Oct 2016 13:31:36 -0700 Subject: updated vis --- .../network/layout/hierarchicalLayout.html | 114 ++++++++++++++++ .../network/layout/hierarchicalLayoutMethods.html | 108 +++++++++++++++ .../layout/hierarchicalLayoutUserdefined.html | 152 +++++++++++++++++++++ .../layout/hierarchicalLayoutWithoutPhysics.html | 89 ++++++++++++ .../vis/examples/network/layout/randomSeed.html | 60 ++++++++ 5 files changed, 523 insertions(+) create mode 100644 www/lib/vis/examples/network/layout/hierarchicalLayout.html create mode 100644 www/lib/vis/examples/network/layout/hierarchicalLayoutMethods.html create mode 100644 www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html create mode 100644 www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html create mode 100644 www/lib/vis/examples/network/layout/randomSeed.html (limited to 'www/lib/vis/examples/network/layout') diff --git a/www/lib/vis/examples/network/layout/hierarchicalLayout.html b/www/lib/vis/examples/network/layout/hierarchicalLayout.html new file mode 100644 index 00000000..d827814c --- /dev/null +++ b/www/lib/vis/examples/network/layout/hierarchicalLayout.html @@ -0,0 +1,114 @@ + + + + Network | Hierarchical layout + + + + + + + + + + + + + +

Hierarchical Layout - Scale-Free-Network

+ +
+ This example shows the randomly generated scale-free-network set of nodes and connected edges from example 2. + In this example, hierarchical layout has been enabled and the vertical levels are determined automatically. +
+
+ +
+ + + +
+

+ + + + + +

+ + +
+ +
+ +

+ + diff --git a/www/lib/vis/examples/network/layout/hierarchicalLayoutMethods.html b/www/lib/vis/examples/network/layout/hierarchicalLayoutMethods.html new file mode 100644 index 00000000..51f55267 --- /dev/null +++ b/www/lib/vis/examples/network/layout/hierarchicalLayoutMethods.html @@ -0,0 +1,108 @@ + + + + Network | Hierarchical layout difference + + + + + + + + + + + +

Hierarchical layout difference

+
+ This example shows a the effect of the different hierarchical layout methods. Hubsize is based on the amount of edges connected to a node. + The node with the most connections (the largest hub) is drawn at the top of the tree. The direction method is based on the direction of the edges. + Try switching between the methods with the dropdown box below. +
+Layout method: +
+
+ +
+ +

+ + + diff --git a/www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html b/www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html new file mode 100644 index 00000000..dd77bb6b --- /dev/null +++ b/www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html @@ -0,0 +1,152 @@ + + + + Network | Hierarchical Layout, userDefined + + + + + + + + + + + +

Hierarchical Layout - User-defined

+ +
+ This example shows a user-defined hierarchical layout. If the user defines levels for nodes but does not do so for + all nodes, an alert will show up and hierarchical layout will be disabled. Either all or none can be defined. + If the smooth curves appear to be inverted, the direction of the edge is not in the same direction as the network. +
+

+ + + + + +

+ +
+ +

+ + + diff --git a/www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html b/www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html new file mode 100644 index 00000000..27854810 --- /dev/null +++ b/www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html @@ -0,0 +1,89 @@ + + + + Hierarchical Layout without Physics + + + + + + +

Hierarchical Layout without Physics

+The hierarchical layout can now be controlled without the use of physics. This is much quicker. The options for this are:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
levelSeparationDistance between levels.
nodeSpacingMinimum distance between nodes on the free axis.
treeSpacingDistance between different trees (independent networks).
blockShiftingMethod for reducing whitespace. Can be used alone or together with edge minimization. Each node will check for whitespace and will shift + it's branch along with it for as far as it can, respecting the nodeSpacing on any level.
edgeMinimizationMethod for reducing whitespace. Can be used alone or together with block shifting. Enabling block shifting will usually speed up the layout process. + Each node will try to move along its free axis to reduce the total length of it's edges.
parentCentralizationWhen true, the parents nodes will be centered again after the the layout algorithm has been finished.
+

+Play with the settings below the network and see how the layout changes! +
+ + + \ No newline at end of file diff --git a/www/lib/vis/examples/network/layout/randomSeed.html b/www/lib/vis/examples/network/layout/randomSeed.html new file mode 100644 index 00000000..f2b6d131 --- /dev/null +++ b/www/lib/vis/examples/network/layout/randomSeed.html @@ -0,0 +1,60 @@ + + + + Network | Setting the random seed + + + + + + + + +

+ Create a simple network with some nodes and edges but with a fixed seed. This means the layout will be the same every time the nodes + are settled. +

+ +
+ + + + + + -- cgit v1.2.3