From 05e761abca3ff42dbba371af0560b82707dfe7c0 Mon Sep 17 00:00:00 2001 From: Pliable Pixels Date: Fri, 28 Oct 2016 13:31:36 -0700 Subject: updated vis --- .../examples/network/other/animationShowcase.html | 279 +++++++++++++++++++++ www/lib/vis/examples/network/other/clustering.html | 141 +++++++++++ .../examples/network/other/clusteringByZoom.html | 160 ++++++++++++ .../vis/examples/network/other/configuration.html | 83 ++++++ .../vis/examples/network/other/manipulation.html | 172 +++++++++++++ www/lib/vis/examples/network/other/navigation.html | 135 ++++++++++ .../vis/examples/network/other/performance.html | 91 +++++++ 7 files changed, 1061 insertions(+) create mode 100644 www/lib/vis/examples/network/other/animationShowcase.html create mode 100644 www/lib/vis/examples/network/other/clustering.html create mode 100644 www/lib/vis/examples/network/other/clusteringByZoom.html create mode 100644 www/lib/vis/examples/network/other/configuration.html create mode 100644 www/lib/vis/examples/network/other/manipulation.html create mode 100644 www/lib/vis/examples/network/other/navigation.html create mode 100644 www/lib/vis/examples/network/other/performance.html (limited to 'www/lib/vis/examples/network/other') diff --git a/www/lib/vis/examples/network/other/animationShowcase.html b/www/lib/vis/examples/network/other/animationShowcase.html new file mode 100644 index 00000000..d68ef75e --- /dev/null +++ b/www/lib/vis/examples/network/other/animationShowcase.html @@ -0,0 +1,279 @@ + + + + Network | Animation + + + + + + + + + + + + +

Camera animations

+
+ You can move the view around programmatically using the .moveTo(options) function. The options supplied to this function can + also be (partially) supplied to the .fit() and .focusOnNode() methods. These are explained in the docs. +

+ The buttons below take the fields from the table when they can. For instance, the "Animate with default settings." takes the position, scale and offset while using + the default animation values for duration and easing function. The focusOnNode takes everything except the position and the fit takes only the duration and easing function. +

+ Here you can see a full description of the options you can supply to moveTo: +
+
+var moveToOptions = {
+    position: {x:x, y:x},    // position to animate to (Numbers)
+    scale: 1.0,              // scale to animate to  (Number)
+    offset: {x:x, y:y},      // offset from the center in DOM pixels (Numbers)
+    animation: {             // animation object, can also be Boolean
+      duration: 1000,                 // animation duration in milliseconds (Number)
+      easingFunction: "easeInOutQuad" // Animation easing function, available are:
+    }                                   // linear, easeInQuad, easeOutQuad, easeInOutQuad,
+}                                       // easeInCubic, easeOutCubic, easeInOutCubic,
+                                        // easeInQuart, easeOutQuart, easeInOutQuart,
+                                        // easeInQuint, easeOutQuint, easeInOutQuint
+
+
+ + + + + + + + + + + + + + + + + + + + + + +
position x
position y
scale
offset x px
offset y px
duration ms
easingFunction + +
+
+
+ Examples: +
+
+
+
+
+
+
+
+
+ +

+

+
+ + diff --git a/www/lib/vis/examples/network/other/clustering.html b/www/lib/vis/examples/network/other/clustering.html new file mode 100644 index 00000000..2f2eb8eb --- /dev/null +++ b/www/lib/vis/examples/network/other/clustering.html @@ -0,0 +1,141 @@ + + + + Network | Clustering + + + + + + + + + + + +

+Click any of the buttons below to cluster the network. On every push the network will be reinitialized first. You can click on a cluster to open it. +

+ +
+
+
+
+
+ +
+ + + + + diff --git a/www/lib/vis/examples/network/other/clusteringByZoom.html b/www/lib/vis/examples/network/other/clusteringByZoom.html new file mode 100644 index 00000000..f7f8fa5a --- /dev/null +++ b/www/lib/vis/examples/network/other/clusteringByZoom.html @@ -0,0 +1,160 @@ + + + + Network | Clustering + + + + + + + + + + + +

+ You can zoom in and out to cluster/decluster. +

+Stabilize when clustering: +
+ + + + + diff --git a/www/lib/vis/examples/network/other/configuration.html b/www/lib/vis/examples/network/other/configuration.html new file mode 100644 index 00000000..74bf9e79 --- /dev/null +++ b/www/lib/vis/examples/network/other/configuration.html @@ -0,0 +1,83 @@ + + + + Network | Playing with Physics + + + + + + + + + + + + + + +

+ The configurator can be used to play with the options. In this example, all options that can be configured with this tool are shown. + You can also supply a custom filter function or filter string. You can press the generate options button below to have an options object printed. You can then use + this in the network. +

+

Note: The configurator is recreated in the dom tree on input change. This may cause undesired scrolls in your application. In order to avoid this, explicitly set the height of the configurator (see this example's source code). +

+
+
+ +

+ + diff --git a/www/lib/vis/examples/network/other/manipulation.html b/www/lib/vis/examples/network/other/manipulation.html new file mode 100644 index 00000000..c2b34cd9 --- /dev/null +++ b/www/lib/vis/examples/network/other/manipulation.html @@ -0,0 +1,172 @@ + + + + Network | Manipulation + + + + + + + + + + + +

Editing the nodes and edges (localized)

+

+ The localization is only relevant to the manipulation buttons. +

+ +

+ + +

+ +
+ node
+ + + + + +
id
label
+ + +
+
+
+ + + + diff --git a/www/lib/vis/examples/network/other/navigation.html b/www/lib/vis/examples/network/other/navigation.html new file mode 100644 index 00000000..3d7eda25 --- /dev/null +++ b/www/lib/vis/examples/network/other/navigation.html @@ -0,0 +1,135 @@ + + + + Network | Navigation + + + + + + + + + + + + +

Navigation controls and keyboad navigation

+
+ This example is the same as example 2, except for the navigation controls that have been activated. The navigation controls are described below.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Icons:
Keyboard shortcuts:
Up arrow
Down arrow
Left arrow
Right arrow
=
[
Page up
-
]
Page down
None
Description:Move upMove downMove leftMove rightZoom inZoom outZoom extent
+
+ Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above. + Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. To correctly display the navigation icons, the vis.css file must be included. + The user is free to alter or overload the CSS classes but without them the navigation icons are not visible. +
+ +
+ +

+ + diff --git a/www/lib/vis/examples/network/other/performance.html b/www/lib/vis/examples/network/other/performance.html new file mode 100644 index 00000000..4d67fcc5 --- /dev/null +++ b/www/lib/vis/examples/network/other/performance.html @@ -0,0 +1,91 @@ + + + + Network | Random nodes + + + + + + + + + + + +

+ Generate a random network with nodes and edges. +

+

+

+ + + +
+

+ +
+ + + -- cgit v1.2.3