Create a simple network with some nodes and edges.

Peer build is designed to work well with other packages from the Vis family. Compared to the standalone or legacy builds it doesn't include dependencies which allows the same DataSet (and other dependencies) to be used in Network and other packages (e.g. Timeline). In UMD version this build doesn't suffer from the bug where exported members from different packages get overwritten rendering some functionality unusable.

When to use

When you need multiple packages from the Vis family on the same page or finer control over what gets loaded.

Content

• Vis Network
  • Network"
  • NetworkDOTParser"
  • NetworkImages"
  • NetworkOptions"
  • networkGephiParser"
  • parseDOTNetwork"
  • parseGephiNetwork"

How to use

Browser UMD

<!--
  In the following URLs you may want to replace @latest by @version
  to prevent unexpected potentionally breaking updates.
  For example vis-data@1.0.0 instead of vis-data@latest.
-->
<script type="text/javascript" src="https://unpkg.com/vis-data@latest/peer/umd/vis-data.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/vis-network@latest/peer/umd/vis-network.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/vis-network/styles/vis-network.min.css" />
<!-- You may include other packages like Vis Timeline or Vis Graph3D here. -->

<div id="mynetwork"></div>
<script type="text/javascript">
  // 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);
</script>
      

Bundled ESM

import { DataSet } from "vis-data/peer";
import { Network } from "vis-network/peer";
import "vis-network/styles/vis-network.css";

// create an array with nodes
const nodes = new 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
const edges = new DataSet([
  { from: 1, to: 3 },
  { from: 1, to: 2 },
  { from: 2, to: 4 },
  { from: 2, to: 5 },
  { from: 3, to: 3 }
]);

// create a network
const container = document.getElementById("mynetwork");
const data = {
  nodes: nodes,
  edges: edges
};
const options = {};
const network = new Network(container, data, options);
      

The code above has to be injected into a page which contains an element with mynetwork id. Like for example:

<div id="mynetwork"></div>