UNPKG

5.18 kBMarkdownView Raw
1# vis-network
2
3![example chart](docs/img/network.png)
4
5Network is a visualization to display networks and networks consisting of nodes and edges. The visualization is easy to use and supports custom shapes, styles, colors, sizes, images, and more. The network visualization works smooth on any modern browser for up to a few thousand nodes and edges. To handle a larger amount of nodes, Network has clustering support. Network uses HTML canvas for rendering.
6
7## Badges
8
9[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Greenkeeper badge](https://badges.greenkeeper.io/visjs/vis-network.svg)](https://greenkeeper.io/) [![npm](https://img.shields.io/npm/v/vis-network)](https://www.npmjs.com/package/vis-network)
10
11[![GitHub contributors](https://img.shields.io/github/contributors/visjs/vis-network.svg)](https://github.com/visjs/vis-network/graphs/contributors) [![Backers on Open Collective](https://opencollective.com/visjs/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/visjs/sponsors/badge.svg)](#sponsors)
12
13## Install
14
15Install via npm:
16
17 $ npm install vis-network
18
19## Example
20
21A basic example on loading a Network is shown below. More examples can be
22found in the [examples directory](https://github.com/visjs/vis-network/tree/master/examples/)
23of the project.
24
25```html
26<!doctype html>
27<html>
28<head>
29 <title>Network</title>
30 <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
31 <style type="text/css">
32 #mynetwork {
33 width: 600px;
34 height: 400px;
35 border: 1px solid lightgray;
36 }
37 </style>
38</head>
39<body>
40<div id="mynetwork"></div>
41<script type="text/javascript">
42 // create an array with nodes
43 var nodes = new vis.DataSet([
44 {id: 1, label: 'Node 1'},
45 {id: 2, label: 'Node 2'},
46 {id: 3, label: 'Node 3'},
47 {id: 4, label: 'Node 4'},
48 {id: 5, label: 'Node 5'}
49 ]);
50
51 // create an array with edges
52 var edges = new vis.DataSet([
53 {from: 1, to: 3},
54 {from: 1, to: 2},
55 {from: 2, to: 4},
56 {from: 2, to: 5},
57 {from: 3, to: 3}
58 ]);
59
60 // create a network
61 var container = document.getElementById('mynetwork');
62 var data = {
63 nodes: nodes,
64 edges: edges
65 };
66 var options = {};
67 var network = new vis.Network(container, data, options);
68</script>
69</body>
70</html>
71```
72
73## Build
74
75To build the library from source, clone the project from github
76
77 $ git clone git://github.com/visjs/vis-network.git
78
79The source code uses the module style of node (require and module.exports) to
80organize dependencies. To install all dependencies and build the library,
81run `npm install` in the root of the project.
82
83 $ cd vis-network
84 $ npm install
85
86Then, the project can be build running:
87
88 $ npm run build
89
90## Test
91
92To test the library, install the project dependencies once:
93
94 $ npm install
95
96Then run the tests:
97
98 $ npm run test
99
100## Contribute
101
102Contributions to the vis.js library are very welcome! We can't do this alone!
103
104### Backers
105
106Thank you to all our backers! 🙏
107
108<a href="https://opencollective.com/visjs#backers" target="_blank"><img src="https://opencollective.com/visjs/backers.svg?width=890"></a>
109
110### Sponsors
111
112Support this project by becoming a sponsor. Your logo will show up here with a link to your website.
113
114<a href="https://opencollective.com/visjs/sponsor/0/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/0/avatar.svg"></a>
115<a href="https://opencollective.com/visjs/sponsor/1/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/1/avatar.svg"></a>
116<a href="https://opencollective.com/visjs/sponsor/2/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/2/avatar.svg"></a>
117<a href="https://opencollective.com/visjs/sponsor/3/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/3/avatar.svg"></a>
118<a href="https://opencollective.com/visjs/sponsor/4/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/4/avatar.svg"></a>
119<a href="https://opencollective.com/visjs/sponsor/5/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/5/avatar.svg"></a>
120<a href="https://opencollective.com/visjs/sponsor/6/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/6/avatar.svg"></a>
121<a href="https://opencollective.com/visjs/sponsor/7/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/7/avatar.svg"></a>
122<a href="https://opencollective.com/visjs/sponsor/8/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/8/avatar.svg"></a>
123<a href="https://opencollective.com/visjs/sponsor/9/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/9/avatar.svg"></a>
124
125## License
126
127Copyright (C) 2010-2018 Almende B.V. and Contributors
128
129Vis.js is dual licensed under both
130
131 * The Apache 2.0 License
132 http://www.apache.org/licenses/LICENSE-2.0
133
134and
135
136 * The MIT License
137 http://opensource.org/licenses/MIT
138
139Vis.js may be distributed under either license.