vis-network
Version:
A dynamic, browser-based visualization library.
1,324 lines (1,228 loc) • 982 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Vis Network Examples</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
margin: 50px auto 200px;
min-width: calc(200px + 2em);
width: calc(100vw - 200px);
}
a {
color: #2b7ce9;
}
a:visited {
color: #46417a;
}
.example-link {
position: relative;
margin: 1em;
width: 200px;
display: inline-block;
text-align: center;
}
.example-link .example-image {
position: relative;
margin-top: 1ex;
width: 200px;
height: 200px;
}
.example-link .example-image > img {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
border: 1px solid #2b7ce9;
transition: transform 0.5s ease 0s, z-index 0.5s linear 0s;
z-index: 1;
}
.example-link:hover .example-image > img {
transform: translate(0px, 95px) scale(2, 2);
z-index: 100;
}
.playgrounds {
margin-left: 1em;
white-space: nowrap;
}
.playgrounds form {
display: inline-block;
margin: 0px;
}
.icon {
width: 2em;
height: 2em;
background: none;
border: none;
cursor: pointer;
}
.icon.jsfiddle {
background-size: contain;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%232b7ce9' d='M16.45,17.5C17.45,17.5 18.3,17.15 19,16.5C19.67,15.8 20,15 20,14C20,13.05 19.66,12.22 18.96,11.53C18.26,10.84 17.41,10.5 16.41,10.5C15.47,10.5 14.64,10.83 13.92,11.5L9.14,15.56C8.7,16 8.17,16.22 7.55,16.22C6.92,16.22 6.39,16 5.95,15.56C5.5,15.13 5.3,14.61 5.3,14C5.3,13.42 5.5,12.91 5.95,12.47C6.39,12.03 6.92,11.81 7.55,11.81C8.14,11.81 8.69,12.03 9.19,12.47L9.94,13.13L10.92,12.23L10.08,11.53C9.39,10.84 8.55,10.5 7.55,10.5C6.58,10.5 5.74,10.84 5.04,11.53C4.34,12.22 4,13.05 4,14C4,15 4.34,15.8 5.04,16.5C5.74,17.15 6.59,17.5 7.59,17.5C8.53,17.5 9.36,17.16 10.08,16.5L14.86,12.42C15.27,12 15.8,11.81 16.45,11.81C17.08,11.81 17.61,12.03 18.05,12.47C18.5,12.91 18.7,13.42 18.7,14C18.7,14.61 18.5,15.13 18.05,15.56C17.61,16 17.08,16.22 16.45,16.22C15.89,16.22 15.34,16 14.81,15.5L14.06,14.86L13.08,15.75L13.92,16.45C14.61,17.14 15.45,17.5 16.45,17.5M19.36,10.03C20.64,10.13 21.73,10.65 22.64,11.6C23.55,12.55 24,13.69 24,15C24,16.38 23.5,17.55 22.5,18.54C21.54,19.5 20.36,20 19,20H6C4.34,20 2.93,19.43 1.76,18.26C0.59,17.09 0,15.67 0,14C0,12.55 0.5,11.23 1.57,10.05C2.62,8.88 3.88,8.22 5.34,8.06C6,6.84 6.92,5.86 8.11,5.11C9.3,4.36 10.59,4 12,4C13.69,4 15.26,4.58 16.71,5.77C18.16,6.95 19.05,8.38 19.36,10.03Z' /%3E%3C/svg%3E");
}
.icon.codepen {
background-size: contain;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%232b7ce9' d='M15.09,12L12,14.08V14.09L8.91,12L12,9.92V9.92L15.09,12M12,2C11.84,2 11.68,2.06 11.53,2.15L2.5,8.11C2.27,8.22 2.09,8.43 2,8.67V14.92C2,15.33 2,15.33 2.15,15.53L11.53,21.86C11.67,21.96 11.84,22 12,22C12.16,22 12.33,21.95 12.47,21.85L21.85,15.5C22,15.33 22,15.33 22,14.92V8.67C21.91,8.42 21.73,8.22 21.5,8.1L12.47,2.15C12.32,2.05 12.16,2 12,2M16.58,13L19.59,15.04L12.83,19.6V15.53L16.58,13M19.69,8.9L16.58,11L12.83,8.47V4.38L19.69,8.9M20.33,10.47V13.53L18.07,12L20.33,10.47M7.42,13L11.17,15.54V19.6L4.41,15.04L7.42,13M4.31,8.9L11.17,4.39V8.5L7.42,11L4.31,8.9M3.67,10.5L5.93,12L3.67,13.54V10.5Z' /%3E%3C/svg%3E");
}
</style>
</head>
<body>
<div>
<div>
<h1>Vis Network</h1>
<div>
<span class="example-link"
><div>
<a href="network/basicUsage.html">Basic usage</a
><span class="playgrounds"
><form
action="http://jsfiddle.net/api/post/library/pure/"
method="post"
target="_blank"
>
<button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
 </button
><input
type="hidden"
name="js"
value='// create an array with nodes
var nodes = new vis.DataSet([
{ id: 1, label: "Node 1" },
{ id: 2, label: "Node 2" },
{ id: 3, label: "Node 3" },
{ id: 4, label: "Node 4" },
{ id: 5, label: "Node 5" }
]);
// create an array with edges
var edges = new vis.DataSet([
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 },
{ from: 3, to: 3 }
]);
// create a network
var container = document.getElementById("mynetwork");
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
'
/><input
type="hidden"
name="css"
value="#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
"
/><input
type="hidden"
name="html"
value='<p>
Create a simple network with some nodes and edges.
</p>
<div id="mynetwork"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-network/dist/vis-network.min.css,https://visjs.github.io/vis-network/dist/vis-network.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Vis Network | Basic usage"
/>
</form>
<form
action="https://codepen.io/pen/define"
method="post"
target="_blank"
>
<button class="icon codepen" alt="CodePen" title="CodePen">
 </button
><input
type="hidden"
name="data"
value='{"css":"#mynetwork {\n width: 600px;\n height: 400px;\n border: 1px solid lightgray;\n}\n","css_external":"https://visjs.github.io/vis-network/dist/vis-network.min.css","html":"<p>\n Create a simple network with some nodes and edges.\n</p>\n\n<div id=\"mynetwork\"></div>\n","js":"// create an array with nodes\nvar nodes = new vis.DataSet([\n { id: 1, label: \"Node 1\" },\n { id: 2, label: \"Node 2\" },\n { id: 3, label: \"Node 3\" },\n { id: 4, label: \"Node 4\" },\n { id: 5, label: \"Node 5\" }\n]);\n\n// create an array with edges\nvar edges = new vis.DataSet([\n { from: 1, to: 3 },\n { from: 1, to: 2 },\n { from: 2, to: 4 },\n { from: 2, to: 5 },\n { from: 3, to: 3 }\n]);\n\n// create a network\nvar container = document.getElementById(\"mynetwork\");\nvar data = {\n nodes: nodes,\n edges: edges\n};\nvar options = {};\nvar network = new vis.Network(container, data, options);\n","js_external":"https://visjs.github.io/vis-network/dist/vis-network.min.js","title":"Vis Network | Basic usage"}'
/><input
type="hidden"
name="js"
value='// create an array with nodes
var nodes = new vis.DataSet([
{ id: 1, label: "Node 1" },
{ id: 2, label: "Node 2" },
{ id: 3, label: "Node 3" },
{ id: 4, label: "Node 4" },
{ id: 5, label: "Node 5" }
]);
// create an array with edges
var edges = new vis.DataSet([
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 },
{ from: 3, to: 3 }
]);
// create a network
var container = document.getElementById("mynetwork");
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
'
/><input
type="hidden"
name="css"
value="#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
"
/><input
type="hidden"
name="html"
value='<p>
Create a simple network with some nodes and edges.
</p>
<div id="mynetwork"></div>
'
/></form
></span>
</div>
<a href="network/basicUsage.html"
><div class="example-image">
<img
src="./thumbnails/4607b73c2988979a66b460b3b460f7d789d8fcdbea172c6bf5944195569981fd.png"
alt="Basic usage"
/></div></a
></span>
</div>
<div>
<h2>Data</h2>
<div>
<span class="example-link"
><div>
<a href="network/data/scalingCustom.html">Custom Scaling</a
><span class="playgrounds"
><form
action="http://jsfiddle.net/api/post/library/pure/"
method="post"
target="_blank"
>
<button
class="icon jsfiddle"
alt="JSFiddle"
title="JSFiddle"
>
 </button
><input
type="hidden"
name="js"
value='var nodes = null;
var edges = null;
var network = null;
function draw() {
// create people.
// value corresponds with the age of the person
nodes = [
{ id: 1, value: 2, label: "Algie" },
{ id: 2, value: 31, label: "Alston" },
{ id: 3, value: 12, label: "Barney" },
{ id: 4, value: 16, label: "Coley" },
{ id: 5, value: 17, label: "Grant" },
{ id: 6, value: 15, label: "Langdon" },
{ id: 7, value: 6, label: "Lee" },
{ id: 8, value: 5, label: "Merlin" },
{ id: 9, value: 30, label: "Mick" },
{ id: 10, value: 18, label: "Tod" }
];
// create connections between people
// value corresponds with the amount of contact between two people
edges = [
{ from: 2, to: 8, value: 3 },
{ from: 2, to: 9, value: 5 },
{ from: 2, to: 10, value: 1 },
{ from: 4, to: 6, value: 8 },
{ from: 5, to: 7, value: 2 },
{ from: 4, to: 5, value: 1 },
{ from: 9, to: 10, value: 2 },
{ from: 2, to: 3, value: 6 },
{ from: 3, to: 9, value: 4 },
{ from: 5, to: 3, value: 1 },
{ from: 2, to: 7, value: 4 }
];
// Instantiate our network object.
var container = document.getElementById("mynetwork");
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: "dot",
scaling: {
customScalingFunction: function(min, max, total, value) {
return value / total;
},
min: 5,
max: 150
}
}
};
network = new vis.Network(container, data, options);
}
window.addEventListener("load", () => {
draw();
});
'
/><input
type="hidden"
name="css"
value="html,
body {
font: 10pt arial;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
"
/><input
type="hidden"
name="html"
value='<p>
Scale nodes and edges depending on their value. Hover over nodes and edges to
get more information.
</p>
<div id="mynetwork"></div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-network/dist/vis-network.min.css,https://visjs.github.io/vis-network/dist/vis-network.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Vis Network | Data | Custom Scaling"
/>
</form>
<form
action="https://codepen.io/pen/define"
method="post"
target="_blank"
>
<button class="icon codepen" alt="CodePen" title="CodePen">
 </button
><input
type="hidden"
name="data"
value='{"css":"html,\nbody {\n font: 10pt arial;\n}\n#mynetwork {\n width: 600px;\n height: 600px;\n border: 1px solid lightgray;\n}\n","css_external":"https://visjs.github.io/vis-network/dist/vis-network.min.css","html":"<p>\n Scale nodes and edges depending on their value. Hover over nodes and edges to\n get more information.\n</p>\n<div id=\"mynetwork\"></div>\n","js":"var nodes = null;\nvar edges = null;\nvar network = null;\n\nfunction draw() {\n // create people.\n // value corresponds with the age of the person\n nodes = [\n { id: 1, value: 2, label: \"Algie\" },\n { id: 2, value: 31, label: \"Alston\" },\n { id: 3, value: 12, label: \"Barney\" },\n { id: 4, value: 16, label: \"Coley\" },\n { id: 5, value: 17, label: \"Grant\" },\n { id: 6, value: 15, label: \"Langdon\" },\n { id: 7, value: 6, label: \"Lee\" },\n { id: 8, value: 5, label: \"Merlin\" },\n { id: 9, value: 30, label: \"Mick\" },\n { id: 10, value: 18, label: \"Tod\" }\n ];\n\n // create connections between people\n // value corresponds with the amount of contact between two people\n edges = [\n { from: 2, to: 8, value: 3 },\n { from: 2, to: 9, value: 5 },\n { from: 2, to: 10, value: 1 },\n { from: 4, to: 6, value: 8 },\n { from: 5, to: 7, value: 2 },\n { from: 4, to: 5, value: 1 },\n { from: 9, to: 10, value: 2 },\n { from: 2, to: 3, value: 6 },\n { from: 3, to: 9, value: 4 },\n { from: 5, to: 3, value: 1 },\n { from: 2, to: 7, value: 4 }\n ];\n\n // Instantiate our network object.\n var container = document.getElementById(\"mynetwork\");\n var data = {\n nodes: nodes,\n edges: edges\n };\n var options = {\n nodes: {\n shape: \"dot\",\n scaling: {\n customScalingFunction: function(min, max, total, value) {\n return value / total;\n },\n min: 5,\n max: 150\n }\n }\n };\n network = new vis.Network(container, data, options);\n}\n\nwindow.addEventListener(\"load\", () => {\n draw();\n});\n","js_external":"https://visjs.github.io/vis-network/dist/vis-network.min.js","title":"Vis Network | Data | Custom Scaling"}'
/><input
type="hidden"
name="js"
value='var nodes = null;
var edges = null;
var network = null;
function draw() {
// create people.
// value corresponds with the age of the person
nodes = [
{ id: 1, value: 2, label: "Algie" },
{ id: 2, value: 31, label: "Alston" },
{ id: 3, value: 12, label: "Barney" },
{ id: 4, value: 16, label: "Coley" },
{ id: 5, value: 17, label: "Grant" },
{ id: 6, value: 15, label: "Langdon" },
{ id: 7, value: 6, label: "Lee" },
{ id: 8, value: 5, label: "Merlin" },
{ id: 9, value: 30, label: "Mick" },
{ id: 10, value: 18, label: "Tod" }
];
// create connections between people
// value corresponds with the amount of contact between two people
edges = [
{ from: 2, to: 8, value: 3 },
{ from: 2, to: 9, value: 5 },
{ from: 2, to: 10, value: 1 },
{ from: 4, to: 6, value: 8 },
{ from: 5, to: 7, value: 2 },
{ from: 4, to: 5, value: 1 },
{ from: 9, to: 10, value: 2 },
{ from: 2, to: 3, value: 6 },
{ from: 3, to: 9, value: 4 },
{ from: 5, to: 3, value: 1 },
{ from: 2, to: 7, value: 4 }
];
// Instantiate our network object.
var container = document.getElementById("mynetwork");
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: "dot",
scaling: {
customScalingFunction: function(min, max, total, value) {
return value / total;
},
min: 5,
max: 150
}
}
};
network = new vis.Network(container, data, options);
}
window.addEventListener("load", () => {
draw();
});
'
/><input
type="hidden"
name="css"
value="html,
body {
font: 10pt arial;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
"
/><input
type="hidden"
name="html"
value='<p>
Scale nodes and edges depending on their value. Hover over nodes and edges to
get more information.
</p>
<div id="mynetwork"></div>
'
/></form
></span>
</div>
<a href="network/data/scalingCustom.html"
><div class="example-image">
<img
src="./thumbnails/156974012457784b755a6bfc3e8a255cf1957786b78a8f5ebb8a0d3c8a1f2985.png"
alt="Custom Scaling"
/></div></a></span
><span class="example-link"
><div>
<a href="network/data/dynamicData.html">DataSet</a
><span class="playgrounds"
><form
action="http://jsfiddle.net/api/post/library/pure/"
method="post"
target="_blank"
>
<button
class="icon jsfiddle"
alt="JSFiddle"
title="JSFiddle"
>
 </button
><input
type="hidden"
name="js"
value='var nodes, edges, network;
// convenience method to stringify a JSON object
function toJSON(obj) {
return JSON.stringify(obj, null, 4);
}
function addNode() {
try {
nodes.add({
id: document.getElementById("node-id").value,
label: document.getElementById("node-label").value
});
} catch (err) {
alert(err);
}
}
function updateNode() {
try {
nodes.update({
id: document.getElementById("node-id").value,
label: document.getElementById("node-label").value
});
} catch (err) {
alert(err);
}
}
function removeNode() {
try {
nodes.remove({ id: document.getElementById("node-id").value });
} catch (err) {
alert(err);
}
}
function addEdge() {
try {
edges.add({
id: document.getElementById("edge-id").value,
from: document.getElementById("edge-from").value,
to: document.getElementById("edge-to").value
});
} catch (err) {
alert(err);
}
}
function updateEdge() {
try {
edges.update({
id: document.getElementById("edge-id").value,
from: document.getElementById("edge-from").value,
to: document.getElementById("edge-to").value
});
} catch (err) {
alert(err);
}
}
function removeEdge() {
try {
edges.remove({ id: document.getElementById("edge-id").value });
} catch (err) {
alert(err);
}
}
function draw() {
// create an array with nodes
nodes = new vis.DataSet();
nodes.on("*", function() {
document.getElementById("nodes").innerHTML = JSON.stringify(
nodes.get(),
null,
4
);
});
nodes.add([
{ id: "1", label: "Node 1" },
{ id: "2", label: "Node 2" },
{ id: "3", label: "Node 3" },
{ id: "4", label: "Node 4" },
{ id: "5", label: "Node 5" }
]);
// create an array with edges
edges = new vis.DataSet();
edges.on("*", function() {
document.getElementById("edges").innerHTML = JSON.stringify(
edges.get(),
null,
4
);
});
edges.add([
{ id: "1", from: "1", to: "2" },
{ id: "2", from: "1", to: "3" },
{ id: "3", from: "2", to: "4" },
{ id: "4", from: "2", to: "5" }
]);
// create a network
var container = document.getElementById("mynetwork");
var data = {
nodes: nodes,
edges: edges
};
var options = {};
network = new vis.Network(container, data, options);
}
window.addEventListener("load", () => {
draw();
});
'
/><input
type="hidden"
name="css"
value='html,
body {
font: 11pt arial;
}
h1 {
font-size: 150%;
margin: 5px 0;
}
h2 {
font-size: 100%;
margin: 5px 0;
}
table.view {
width: 100%;
}
table td {
vertical-align: top;
}
table table {
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
}
table table td {
vertical-align: middle;
}
input[type="text"],
pre {
border: 1px solid lightgray;
}
pre {
margin: 0;
padding: 5px;
font-size: 10pt;
}
#mynetwork {
width: 100%;
height: 400px;
border: 1px solid lightgray;
}
'
/><input
type="hidden"
name="html"
value='<p>
This example demonstrates dynamically adding, updating and removing nodes and
edges using a DataSet.
</p>
<h1>Adjust</h1>
<table>
<tbody>
<tr>
<td>
<h2>Node</h2>
<table>
<tbody>
<tr>
<td></td>
<td><label for="node-id">Id</label></td>
<td><input id="node-id" type="text" value="6" /></td>
</tr>
<tr>
<td></td>
<td><label for="node-label">Label</label></td>
<td><input id="node-label" type="text" value="Node 6" /></td>
</tr>
<tr>
<td></td>
<td>Action</td>
<td>
<button id="node-add" onclick="addNode();">Add</button>
<button id="node-update" onclick="updateNode();">Update</button>
<button id="node-remove" onclick="removeNode();">Remove</button>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<h2>Edge</h2>
<table>
<tbody>
<tr>
<td></td>
<td><label for="edge-id">Id</label></td>
<td><input id="edge-id" type="text" value="5" /></td>
</tr>
<tr>
<td></td>
<td><label for="edge-from">From</label></td>
<td><input id="edge-from" type="text" value="3" /></td>
</tr>
<tr>
<td></td>
<td><label for="edge-to">To</label></td>
<td><input id="edge-to" type="text" value="4" /></td>
</tr>
<tr>
<td></td>
<td>Action</td>
<td>
<button id="edge-add" onclick="addEdge();">Add</button>
<button id="edge-update" onclick="updateEdge();">Update</button>
<button id="edge-remove" onclick="removeEdge();">Remove</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<h1>View</h1>
<table class="view">
<colgroup>
<col width="25%" />
<col width="25%" />
<col width="50%" />
</colgroup>
<tbody>
<tr>
<td>
<h2>Nodes</h2>
<pre id="nodes"></pre>
</td>
<td>
<h2>Edges</h2>
<pre id="edges"></pre>
</td>
<td>
<h2>Network</h2>
<div id="mynetwork"></div>
</td>
</tr>
</tbody>
</table>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-network/dist/vis-network.min.css,https://visjs.github.io/vis-network/dist/vis-network.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Vis Network | Data | DataSet"
/>
</form>
<form
action="https://codepen.io/pen/define"
method="post"
target="_blank"
>
<button class="icon codepen" alt="CodePen" title="CodePen">
 </button
><input
type="hidden"
name="data"
value='{"css":"html,\nbody {\n font: 11pt arial;\n}\n\nh1 {\n font-size: 150%;\n margin: 5px 0;\n}\n\nh2 {\n font-size: 100%;\n margin: 5px 0;\n}\n\ntable.view {\n width: 100%;\n}\n\ntable td {\n vertical-align: top;\n}\n\ntable table {\n background-color: #f5f5f5;\n border: 1px solid #e5e5e5;\n}\n\ntable table td {\n vertical-align: middle;\n}\n\ninput[type=\"text\"],\npre {\n border: 1px solid lightgray;\n}\n\npre {\n margin: 0;\n padding: 5px;\n font-size: 10pt;\n}\n\n#mynetwork {\n width: 100%;\n height: 400px;\n border: 1px solid lightgray;\n}\n","css_external":"https://visjs.github.io/vis-network/dist/vis-network.min.css","html":"<p>\n This example demonstrates dynamically adding, updating and removing nodes and\n edges using a DataSet.\n</p>\n\n<h1>Adjust</h1>\n<table>\n <tbody>\n <tr>\n <td>\n <h2>Node</h2>\n <table>\n <tbody>\n <tr>\n <td></td>\n <td><label for=\"node-id\">Id</label></td>\n <td><input id=\"node-id\" type=\"text\" value=\"6\" /></td>\n </tr>\n <tr>\n <td></td>\n <td><label for=\"node-label\">Label</label></td>\n <td><input id=\"node-label\" type=\"text\" value=\"Node 6\" /></td>\n </tr>\n <tr>\n <td></td>\n <td>Action</td>\n <td>\n <button id=\"node-add\" onclick=\"addNode();\">Add</button>\n <button id=\"node-update\" onclick=\"updateNode();\">Update</button>\n <button id=\"node-remove\" onclick=\"removeNode();\">Remove</button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n <td>\n <h2>Edge</h2>\n <table>\n <tbody>\n <tr>\n <td></td>\n <td><label for=\"edge-id\">Id</label></td>\n <td><input id=\"edge-id\" type=\"text\" value=\"5\" /></td>\n </tr>\n <tr>\n <td></td>\n <td><label for=\"edge-from\">From</label></td>\n <td><input id=\"edge-from\" type=\"text\" value=\"3\" /></td>\n </tr>\n <tr>\n <td></td>\n <td><label for=\"edge-to\">To</label></td>\n <td><input id=\"edge-to\" type=\"text\" value=\"4\" /></td>\n </tr>\n <tr>\n <td></td>\n <td>Action</td>\n <td>\n <button id=\"edge-add\" onclick=\"addEdge();\">Add</button>\n <button id=\"edge-update\" onclick=\"updateEdge();\">Update</button>\n <button id=\"edge-remove\" onclick=\"removeEdge();\">Remove</button>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n </tbody>\n</table>\n\n<h1>View</h1>\n<table class=\"view\">\n <colgroup>\n <col width=\"25%\" />\n <col width=\"25%\" />\n <col width=\"50%\" />\n </colgroup>\n <tbody>\n <tr>\n <td>\n <h2>Nodes</h2>\n <pre id=\"nodes\"></pre>\n </td>\n\n <td>\n <h2>Edges</h2>\n <pre id=\"edges\"></pre>\n </td>\n\n <td>\n <h2>Network</h2>\n\n <div id=\"mynetwork\"></div>\n </td>\n </tr>\n </tbody>\n</table>\n","js":"var nodes, edges, network;\n\n// convenience method to stringify a JSON object\nfunction toJSON(obj) {\n return JSON.stringify(obj, null, 4);\n}\n\nfunction addNode() {\n try {\n nodes.add({\n id: document.getElementById(\"node-id\").value,\n label: document.getElementById(\"node-label\").value\n });\n } catch (err) {\n alert(err);\n }\n}\n\nfunction updateNode() {\n try {\n nodes.update({\n id: document.getElementById(\"node-id\").value,\n label: document.getElementById(\"node-label\").value\n });\n } catch (err) {\n alert(err);\n }\n}\nfunction removeNode() {\n try {\n nodes.remove({ id: document.getElementById(\"node-id\").value });\n } catch (err) {\n alert(err);\n }\n}\n\nfunction addEdge() {\n try {\n edges.add({\n id: document.getElementById(\"edge-id\").value,\n from: document.getElementById(\"edge-from\").value,\n to: document.getElementById(\"edge-to\").value\n });\n } catch (err) {\n alert(err);\n }\n}\nfunction updateEdge() {\n try {\n edges.update({\n id: document.getElementById(\"edge-id\").value,\n from: document.getElementById(\"edge-from\").value,\n to: document.getElementById(\"edge-to\").value\n });\n } catch (err) {\n alert(err);\n }\n}\nfunction removeEdge() {\n try {\n edges.remove({ id: document.getElementById(\"edge-id\").value });\n } catch (err) {\n alert(err);\n }\n}\n\nfunction draw() {\n // create an array with nodes\n nodes = new vis.DataSet();\n nodes.on(\"*\", function() {\n document.getElementById(\"nodes\").innerHTML = JSON.stringify(\n nodes.get(),\n null,\n 4\n );\n });\n nodes.add([\n { id: \"1\", label: \"Node 1\" },\n { id: \"2\", label: \"Node 2\" },\n { id: \"3\", label: \"Node 3\" },\n { id: \"4\", label: \"Node 4\" },\n { id: \"5\", label: \"Node 5\" }\n ]);\n\n // create an array with edges\n edges = new vis.DataSet();\n edges.on(\"*\", function() {\n document.getElementById(\"edges\").innerHTML = JSON.stringify(\n edges.get(),\n null,\n 4\n );\n });\n edges.add([\n { id: \"1\", from: \"1\", to: \"2\" },\n { id: \"2\", from: \"1\", to: \"3\" },\n { id: \"3\", from: \"2\", to: \"4\" },\n { id: \"4\", from: \"2\", to: \"5\" }\n ]);\n\n // create a network\n var container = document.getElementById(\"mynetwork\");\n var data = {\n nodes: nodes,\n edges: edges\n };\n var options = {};\n network = new vis.Network(container, data, options);\n}\n\nwindow.addEventListener(\"load\", () => {\n draw();\n});\n","js_external":"https://visjs.github.io/vis-network/dist/vis-network.min.js","title":"Vis Network | Data | DataSet"}'
/><input
type="hidden"
name="js"
value='var nodes, edges, network;
// convenience method to stringify a JSON object
function toJSON(obj) {
return JSON.stringify(obj, null, 4);
}
function addNode() {
try {
nodes.add({
id: document.getElementById("node-id").value,
label: document.getElementById("node-label").value
});
} catch (err) {
alert(err);
}
}
function updateNode() {
try {
nodes.update({
id: document.getElementById("node-id").value,
label: document.getElementById("node-label").value
});
} catch (err) {
alert(err);
}
}
function removeNode() {
try {
nodes.remove({ id: document.getElementById("node-id").value });
} catch (err) {
alert(err);
}
}
function addEdge() {
try {
edges.add({
id: document.getElementById("edge-id").value,
from: document.getElementById("edge-from").value,
to: document.getElementById("edge-to").value
});
} catch (err) {
alert(err);
}
}
function updateEdge() {
try {
edges.update({
id: document.getElementById("edge-id").value,
from: document.getElementById("edge-from").value,
to: document.getElementById("edge-to").value
});
} catch (err) {
alert(err);
}
}
function removeEdge() {
try {
edges.remove({ id: document.getElementById("edge-id").value });
} catch (err) {
alert(err);
}
}
function draw() {
// create an array with nodes
nodes = new vis.DataSet();
nodes.on("*", function() {
document.getElementById("nodes").innerHTML = JSON.stringify(
nodes.get(),
null,
4
);
});
nodes.add([
{ id: "1", label: "Node 1" },
{ id: "2", label: "Node 2" },
{ id: "3", label: "Node 3" },
{ id: "4", label: "Node 4" },
{ id: "5", label: "Node 5" }
]);
// create an array with edges
edges = new vis.DataSet();
edges.on("*", function() {
document.getElementById("edges").innerHTML = JSON.stringify(
edges.get(),
null,
4
);
});
edges.add([
{ id: "1", from: "1", to: "2" },
{ id: "2", from: "1", to: "3" },
{ id: "3", from: "2", to: "4" },
{ id: "4", from: "2", to: "5" }
]);
// create a network
var container = document.getElementById("mynetwork");
var data = {
nodes: nodes,
edges: edges
};
var options = {};
network = new vis.Network(container, data, options);
}
window.addEventListener("load", () => {
draw();
});
'
/><input
type="hidden"
name="css"
value='html,
body {
font: 11pt arial;
}
h1 {
font-size: 150%;
margin: 5px 0;
}
h2 {
font-size: 100%;
margin: 5px 0;
}
table.view {
width: 100%;
}
table td {
vertical-align: top;
}
table table {
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
}
table table td {
vertical-align: middle;
}
input[type="text"],
pre {
border: 1px solid lightgray;
}
pre {
margin: 0;
padding: 5px;
font-size: 10pt;
}
#mynetwork {
width: 100%;
height: 400px;
border: 1px solid lightgray;
}
'
/><input
type="hidden"
name="html"
value='<p>
This example demonstrates dynamically adding, updating and removing nodes and
edges using a DataSet.
</p>
<h1>Adjust</h1>
<table>
<tbody>
<tr>
<td>
<h2>Node</h2>
<table>
<tbody>
<tr>
<td></td>
<td><label for="node-id">Id</label></td>
<td><input id="node-id" type="text" value="6" /></td>
</tr>
<tr>
<td></td>
<td><label for="node-label">Label</label></td>
<td><input id="node-label" type="text" value="Node 6" /></td>
</tr>
<tr>
<td></td>
<td>Action</td>
<td>
<button id="node-add" onclick="addNode();">Add</button>
<button id="node-update" onclick="updateNode();">Update</button>
<button id="node-remove" onclick="removeNode();">Remove</button>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<h2>Edge</h2>
<table>
<tbody>
<tr>
<td></td>
<td><label for="edge-id">Id</label></td>
<td><input id="edge-id" type="text" value="5" /></td>
</tr>
<tr>
<td></td>
<td><label for="edge-from">From</label></td>
<td><input id="edge-from" type="text" value="3" /></td>
</tr>
<tr>
<td></td>
<td><label for="edge-to">To</label></td>
<td><input id="edge-to" type="text" value="4" /></td>
</tr>
<tr>
<td></td>
<td>Action</td>
<td>
<button id="edge-add" onclick="addEdge();">Add</button>
<button id="edge-update" onclick="updateEdge();">Update</button>
<button id="edge-remove" onclick="removeEdge();">Remove</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<h1>View</h1>
<table class="view">
<colgroup>
<col width="25%" />
<col width="25%" />
<col width="50%" />
</colgroup>
<tbody>
<tr>
<td>
<h2>Nodes</h2>
<pre id="nodes"></pre>
</td>
<td>
<h2>Edges</h2>
<pre id="edges"></pre>
</td>
<td>
<h2>Network</h2>
<div id="mynetwork"></div>
</td>
</tr>
</tbody>
</table>
'
/></form
></span>
</div>
<a href="network/data/dynamicData.html"
><div class="example-image">
<img
src="./thumbnails/4e3a5e012e7e8141bfb659fe968779e05229c15fdf2b645c45d812cc4580e1c8.png"
alt="DataSet"
/></div></a></span
><span class="example-link"
><div>
<a href="network/data/dotLanguage/dotEdgeStyles.html"
>DOT edge styles</a
><span class="playgrounds"
><form
action="http://jsfiddle.net/api/post/library/pure/"
method="post"
target="_blank"
>
<button
class="icon jsfiddle"
alt="JSFiddle"
title="JSFiddle"
>
 </button
><input
type="hidden"
name="js"
value='var dotDefault =
"digraph {\n" +
" // Parent nodes\n" +
' lines[label="LINES"]; \n' +
' ahs[label="ARROW HEADS"]; \n' +
"\n" +
" // Children nodes\n" +
' dot[label="both dot"]; \n' +
' vee[label="back vee"]; \n' +
' diamond[label="diamond and box"]; \n' +
"\n" +
" // Line styles\n" +
' lines -- solid[label="solid pink", color="pink"]; \n' +
' lines -- penwidth[label="penwidth=5", penwidth=5]; \n' +
' lines -- dashed[label="dashed green", style="dashed", color="green"]; \n' +
' lines -- dotted[label="dotted purple", style="dotted", color="purple"]; \n' +
"\n" +
" // Arrowhead styles\n" +
' ahs -> box[label="box", arrowhead=box]; \n' +
' ahs -> crow[label="crow", arrowhead=crow]; \n' +
' ahs -> curve[label="curve", arrowhead=curve]; \n' +
' ahs -> icurve[label="icurve", arrowhead=icurve]; \n' +
' ahs -> normal[label="normal", arrowhead=normal]; \n' +
' ahs -> inv[label="inv", arrowhead=inv]; \n' +
' ahs -> diamond[label="diamond and box", dir=both, arrowhead=diamond, arrowtail=box]; \n' +
' ahs -> dot[label="both dot", dir=both, arrowhead=dot, arrowtail=dot]; \n' +
' ahs -> tee[label="tee", arrowhead=tee]; \n' +
' ahs -> vee[label="back vee", dir=back, arrowtail=vee]; \n' +
"}";
// create a network
var container = document.getElementById("mynetwork");
var options = {
physics: {
stabilization: false,
barnesHut: {
springLength: 200
}
}
};
var data = {};
var network = new vis.Network(container, data, options);
$("#draw").click(draw);
$("#reset").click(reset);
$(window).resize(resize);
$(window).load(draw);
$("#data").keydown(function(event) {
if (event.ctrlKey && event.keyCode === 13) {
// Ctrl+Enter
draw();
event.stopPropagation();
event.preventDefault();
}
});
function resize() {
$("#contents").height($("body").height() - $("#header").height() - 30);
}
function draw() {
try {
resize();
$("#error").html("");
// Provide a string with data in DOT language
data = vis.network.convertDot($("#data").val());
network.setData(data);
} catch (err) {
// set the cursor at the position where the error occurred
var match = /\(char (.*)\)/.exec(err);
if (match) {
var pos = Number(match[1]);
var textarea = $("#data")[0];
if (textarea.setSelectionRange) {
textarea.focus();
textarea.setSelectionRange(pos, pos);
}
}
// show an error message
$("#error").html(err.toString());
}
}
function reset() {
$("#data").val(dotDefault);
draw();
}
window.onload = function() {
reset();
};
'
/><input
type="hidden"
name="css"
value="body,
html {
font: 10pt sans;
line-height: 1.5em;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #4d4d4d;
box-sizing: border-box;
overflow: hidden;
}
#header {
margin: 0;
padding: 10px;
box-sizing: border-box;
}
#contents {
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
#left,
#right {
position: absolute;
margin: 0;
padding: 10px;
box-sizing: border-box;
display: inline-block;
}
#left {
width: 40%;
height: 80%;
top: 0;
left: 0;
}
#right {
width: 60%;
height: 100%;
top: 0;
right: 0;
}
#error {
color: red;
}
#data {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
resize: none;
}
#draw,
#reset {
padding: 5px 15px;
}
#mynetwork {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
}
a:hover {
color: red;
}
"
/><input
type="hidden"
name="html"
value='<div id="header">
<h1>DOT edge styles</h1>
<div>
<p>
Example of edge styles support.
</p>
<table border="1">
<tbody>
<tr>
<th>Attributes</th>
<th>Desriptions</th>
</tr>
<tr>
<td align="center">label</td>
<td>Text displayed on the edge</td>
</tr>
<tr>
<td align="center">color</td>
<td>Edge color</td>
</tr>
<tr>
<td align="center">style</td>
<td>
Edge style (&quot;solid&quot;, &quot;dashed&quot;,
&quot;dotted&quot;)
</td>
</tr>
<tr>
<td align="center">dir</td>
<td>
Arrow direction (&quot;forward&quot;, &quot;both&quot;,
&quot;back&quot;, &quot;none&quot;), default is &quot;forward&quot;
</td>
</tr>
<tr>
<td align="center">arrowhead, arrowtail</td>
<td>
Arrow style (&quot;dot&quot;, &quot;box&quot;, &quot;crow&quot;,
&quot;curve&quot;, &quot;icurve&quot;, &quot;normal&quot;,
&quot;inv&quot;, &quot;diamond&quot;, &quot;tee&quot;,
&quot;vee&quot;)
</td>
</tr>
<tr>
<td align="center">width or penwidth</td>
<td>Edge width</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="contents">
<div id="left">
<textarea id="data"> </textarea>
<div>
<button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
<button id="reset" title="Reset the DOT graph">Reset</button>
</div>
<div>
<span id="error"></span>
</div>
</div>
<div id="right">
<div id="mynetwork"></div>
</div>
</div>
'
/><input
type="hidden"
name="resources"
value="https://visjs.github.io/vis-network/dist/vis-network.min.css,https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js,https://visjs.github.io/vis-network/dist/vis-network.min.js"
/><input type="hidden" name="wrap" value="b" /><input
type="hidden"
name="title"
value="Vis Network | Data | DOT edge styles"
/>
</form>
<form
action="https://codepen.io/pen/define"
method="post"
target="_blank"
>
<button class="icon codepen" alt="CodePen" title="CodePen">
 </button
><input
type="hidden"
name="data"
value='{"css":"body,\nhtml {\n font: 10pt sans;\n line-height: 1.5em;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n color: #4d4d4d;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n#header {\n margin: 0;\n padding: 10px;\n box-sizing: border-box;\n}\n\n#contents {\n height: 100%;\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n position: relative;\n}\n\n#left,\n#right {\n position: absolute;\n margin: 0;\n padding: 10px;\n box-sizing: border-box;\n display: inline-block;\n}\n\n#left {\n width: 40%;\n height: 80%;\n top: 0;\n left: 0;\n}\n\n#right {\n width: 60%;\n height: 100%;\n top: 0;\n right: 0;\n}\n\n#error {\n color: red;\n}\n\n#data {\n width: 100%;\n height: 100%;\n border: 1px solid #d3d3d3;\n box-sizing: border-box;\n resize: none;\n}\n\n#draw,\n#reset {\n padding: 5px 15px;\n}\n\n#mynetwork {\n width: 100%;\n height: 100%;\n border: 1px solid #d3d3d3;\n box-sizing: border-box;\n}\n\na:hover {\n color: red;\n}\n","css_external":"https://visjs.github.io/vis-network/dist/vis-network.min.css","html":"<div id=\"header\">\n <h1>DOT edge styles</h1>\n\n <div>\n <p>\n Example of edge styles support.\n </p>\n\n <table border=\"1\">\n <tbody>\n <tr>\n <th>Attributes</th>\n <th>Desriptions</th>\n </tr>\n <tr>\n <td align=\"center\">label</td>\n <td>Text displayed on the edge</td>\n </tr>\n <tr>\n <td align=\"center\">color</td>\n <td>Edge color</td>\n </tr>\n <tr>\n <td align=\"center\">style</td>\n <td>\n Edge style (&quot;solid&quot;, &quot;dashed&quot;,\n &quot;dotted&quot;)\n </td>\n