UNPKG

5.38 kBMarkdownView Raw
1# vis-graph3d
2
3Graph3d is an interactive visualization chart to draw data in a three dimensional graph. You can freely move and zoom in the graph by dragging and scrolling in the window. Graph3d also supports animation of a graph.
4
5Graph3d uses HTML canvas to render graphs, and can render up to a few thousands of data points smoothly.
6
7## Badges
8
9[![GitHub contributors](https://img.shields.io/github/contributors/visjs/vis-graph3d.svg)](https://github.com/visjs/vis-graph3d/graphs/contributors)
10[![GitHub stars](https://img.shields.io/github/stars/visjs/vis-graph3d.svg)](https://github.com/almende/vis/stargazers)
11
12[![Backers on Open Collective](https://opencollective.com/vis/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/vis/sponsors/badge.svg)](#sponsors)
13
14## Install
15
16Install via npm:
17
18 $ npm install vis-graph3d
19
20## Example
21
22A basic example on loading a Timeline is shown below. More examples can be
23found in the [examples directory](https://github.com/visjs/vis-graph3d/tree/master/examples/graph3d)
24of the project.
25
26```html
27<!doctype html>
28<html>
29<head>
30 <title>Graph 3D demo</title>
31 <script type="text/javascript" src="vis-graph3d.min.js"></script>
32 <script type="text/javascript">
33 var data = null;
34 var graph = null;
35
36 function custom(x, y) {
37 return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
38 }
39
40 // Called when the Visualization API is loaded.
41 function drawVisualization() {
42 // Create and populate a data table.
43 data = new vis.DataSet();
44 // create some nice looking data with sin/cos
45 var counter = 0;
46 var steps = 50; // number of datapoints will be steps*steps
47 var axisMax = 314;
48 var axisStep = axisMax / steps;
49 for (var x = 0; x < axisMax; x+=axisStep) {
50 for (var y = 0; y < axisMax; y+=axisStep) {
51 var value = custom(x,y);
52 data.add({id:counter++,x:x,y:y,z:value,style:value});
53 }
54 }
55
56 // specify options
57 var options = {
58 width: '600px',
59 height: '600px',
60 style: 'surface',
61 showPerspective: true,
62 showGrid: true,
63 showShadow: false,
64 keepAspectRatio: true,
65 verticalRatio: 0.5
66 };
67
68 // Instantiate our graph object.
69 var container = document.getElementById('mygraph');
70 graph = new vis.Graph3d(container, data, options);
71 }
72 </script>
73</head>
74<body onload="drawVisualization();">
75<div id="mygraph"></div>
76</body>
77</html>
78```
79
80## Build
81
82To build the library from source, clone the project from github
83
84 $ git clone git://github.com/visjs/vis-graph3d.git
85
86The source code uses the module style of node (require and module.exports) to
87organize dependencies. To install all dependencies and build the library,
88run `npm install` in the root of the project.
89
90 $ cd vis-graph3d
91 $ npm install
92
93Then, the project can be build running:
94
95 $ npm run build
96
97## Test
98
99To test the library, install the project dependencies once:
100
101 $ npm install
102
103Then run the tests:
104
105 $ npm run test
106
107## Contribute
108
109Contributions to the vis.js library are very welcome! We can't do this alone!
110
111### Contributors
112
113This project exists thanks to all the people who already contributed:
114<a href="graphs/contributors"><img src="https://opencollective.com/vis/contributors.svg?width=890" /></a>
115
116### Backers
117
118Thank you to all our backers! 🙏
119
120<a href="https://opencollective.com/vis#backers" target="_blank"><img src="https://opencollective.com/vis/backers.svg?width=890"></a>
121
122### Sponsors
123
124Support this project by becoming a sponsor. Your logo will show up here with a link to your website.
125
126<a href="https://opencollective.com/vis/sponsor/0/website" target="_blank"><img src="https://opencollective.com/vis/sponsor/0/avatar.svg"></a>
127<a href="https://opencollective.com/vis/sponsor/1/website" target="_blank"><img src="https://opencollective.com/vis/sponsor/1/avatar.svg"></a>
128<a href="https://opencollective.com/vis/sponsor/2/website" target="_blank"><img src="https://opencollective.com/vis/sponsor/2/avatar.svg"></a>
129<a href="https://opencollective.com/vis/sponsor/3/website" target="_blank"><img src="https://opencollective.com/vis/sponsor/3/avatar.svg"></a>
130<a href="https://opencollective.com/vis/sponsor/4/website" target="_blank"><img src="https://opencollective.com/vis/sponsor/4/avatar.svg"></a>
131<a href="https://opencollective.com/vis/sponsor/5/website" target="_blank"><img src="https://opencollective.com/vis/sponsor/5/avatar.svg"></a>
132<a href="https://opencollective.com/vis/sponsor/6/website" target="_blank"><img src="https://opencollective.com/vis/sponsor/6/avatar.svg"></a>
133<a href="https://opencollective.com/vis/sponsor/7/website" target="_blank"><img src="https://opencollective.com/vis/sponsor/7/avatar.svg"></a>
134<a href="https://opencollective.com/vis/sponsor/8/website" target="_blank"><img src="https://opencollective.com/vis/sponsor/8/avatar.svg"></a>
135<a href="https://opencollective.com/vis/sponsor/9/website" target="_blank"><img src="https://opencollective.com/vis/sponsor/9/avatar.svg"></a>
136
137## License
138
139Copyright (C) 2010-2018 Almende B.V. and Contributors
140
141Vis.js is dual licensed under both
142
143 * The Apache 2.0 License
144 http://www.apache.org/licenses/LICENSE-2.0
145
146and
147
148 * The MIT License
149 http://opensource.org/licenses/MIT
150
151Vis.js may be distributed under either license.
\No newline at end of file