UNPKG

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