Vis Network

Basic Usage

Peer Build

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

How to use

Browser UMD

<script type="text/javascript" src="https://unpkg.com/vis-util/peer/umd/vis-util.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/vis-data/peer/umd/vis-data.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/vis-network/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. -->

<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/esm/vis-data";
import { Network } from "vis-network/peer/esm/vis-network";
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);