diff --git a/examples/network/34_circular_images.html b/examples/network/34_circular_images.html index 8161031c..c4a48f29 100644 --- a/examples/network/34_circular_images.html +++ b/examples/network/34_circular_images.html @@ -48,7 +48,7 @@ {id: 15, shape: 'circularImage', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png', label:"when images\nfail\nto load"} ]; - // create connetions between people + // create connections between people // value corresponds with the amount of contact between two people edges = [ {from: 1, to: 2}, @@ -64,8 +64,7 @@ {from: 10, to: 11}, {from: 11, to: 12}, {from: 12, to: 13}, - {from: 13, to: 14}, -// {from: 14, to: 15} + {from: 13, to: 14} ]; // create a network @@ -91,11 +90,10 @@ network = new vis.Network(container, data, options); } - + +
- -
diff --git a/examples/network/35_label_stroke.html b/examples/network/35_label_stroke.html index eb5a2fe8..1426fe63 100644 --- a/examples/network/35_label_stroke.html +++ b/examples/network/35_label_stroke.html @@ -14,16 +14,18 @@ background: #d1d1d1; } - + + +

The font, size, and stroke of labels is fully customizable.

- + +

diff --git a/examples/network/37_label_alignment.html b/examples/network/37_label_alignment.html index 6d8f078c..139fc103 100644 --- a/examples/network/37_label_alignment.html +++ b/examples/network/37_label_alignment.html @@ -1,7 +1,7 @@ - Network | Basic usage + Network | Label alignment @@ -13,10 +13,13 @@ border: 1px solid lightgray; } - + + +

Labels can be aligned to edges in various ways.

+
diff --git a/examples/network/38_node_as_icon.html b/examples/network/38_node_as_icon.html index 7c0b866b..6877c9ee 100644 --- a/examples/network/38_node_as_icon.html +++ b/examples/network/38_node_as_icon.html @@ -2,176 +2,182 @@ - - Network | node as icon - - - - - - - - + + + + + + + + - + }; + + // create an array with nodes + var nodesFA = [{ + id: 1, + label: 'User 1', + group: 'users' + }, { + id: 2, + label: 'User 2', + group: 'users' + }, { + id: 3, + label: 'Usergroup 1', + group: 'usergroups' + }, { + id: 4, + label: 'Usergroup 2', + group: 'usergroups' + }, { + id: 5, + label: 'Organisation 1', + shape: 'icon', + icon: { + face: 'FontAwesome', + code: '\uf1ad', + size: 50, + color: '#f0a30a' + } + }]; + + // create an array with edges + var edges = [{ + from: 1, + to: 3 + }, { + from: 1, + to: 4 + }, { + from: 2, + to: 4 + }, { + from: 3, + to: 5 + }, { + from: 4, + to: 5 + }]; + + // create a network + var containerFA = document.getElementById('mynetworkFA'); + var dataFA = { + nodes: nodesFA, + edges: edges + }; + + var networkFA = new vis.Network(containerFA, dataFA, optionsFA); + + /* + * Example for Ionicons + */ + var optionsIO = { + groups: { + usergroups: { + shape: 'icon', + icon: { + face: 'Ionicons', + code: '\uf47c', + size: 50, + color: '#57169a' + } + }, + users: { + shape: 'icon', + icon: { + face: 'Ionicons', + code: '\uf47e', + size: 50, + color: '#aa00ff' + } + } + } + }; + + // create an array with nodes + var nodesIO = [{ + id: 1, + label: 'User 1', + group: 'users' + }, { + id: 2, + label: 'User 2', + group: 'users' + }, { + id: 3, + label: 'Usergroup 1', + group: 'usergroups' + }, { + id: 4, + label: 'Usergroup 2', + group: 'usergroups' + }, { + id: 5, + label: 'Organisation 1', + shape: 'icon', + icon: { + face: 'Ionicons', + code: '\uf276', + size: 50, + color: '#f0a30a' + } + }]; + + + // create a network + var containerIO = document.getElementById('mynetworkIO'); + var dataIO = { + nodes: nodesIO, + edges: edges + }; + + var networkIO = new vis.Network(containerIO, dataIO, optionsIO); + } + + + -

- Use FontAwesome-icons for node

-
-

- Use Ionicons-icons for node

-
+

+ Use FontAwesome-icons for node

+
+

+ Use Ionicons-icons for node

+
diff --git a/examples/network/39_newClustering.html b/examples/network/39_newClustering.html index 2c666ed2..5c0278c7 100644 --- a/examples/network/39_newClustering.html +++ b/examples/network/39_newClustering.html @@ -1,7 +1,7 @@ - Network | Basic usage + Network | Clustering