1 | # vis-graph3d
|
2 |
|
3 | ![example chart](docs/img/graph3d.png)
|
4 |
|
5 | Graph3d 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 |
|
7 | Graph3d 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 |
|
18 | Install via npm:
|
19 |
|
20 | $ npm install vis-graph3d
|
21 |
|
22 | ## Example
|
23 |
|
24 | A basic example on loading a Timeline is shown below. More examples can be
|
25 | found in the [examples directory](https://github.com/visjs/vis-graph3d/tree/master/examples/graph3d)
|
26 | of 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 |
|
84 | To build the library from source, clone the project from github
|
85 |
|
86 | $ git clone git://github.com/visjs/vis-graph3d.git
|
87 |
|
88 | The source code uses the module style of node (require and module.exports) to
|
89 | organize dependencies. To install all dependencies and build the library,
|
90 | run `npm install` in the root of the project.
|
91 |
|
92 | $ cd vis-graph3d
|
93 | $ npm install
|
94 |
|
95 | Then, the project can be build running:
|
96 |
|
97 | $ npm run build
|
98 |
|
99 | ## Test
|
100 |
|
101 | To test the library, install the project dependencies once:
|
102 |
|
103 | $ npm install
|
104 |
|
105 | Then run the tests:
|
106 |
|
107 | $ npm run test
|
108 |
|
109 | ## Contribute
|
110 |
|
111 | Contributions to the vis.js library are very welcome! We can't do this alone!
|
112 |
|
113 | ### Backers
|
114 |
|
115 | Thank 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 |
|
121 | Support 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 |
|
136 | Copyright (C) 2010-2018 Almende B.V. and Contributors
|
137 |
|
138 | Vis.js is dual licensed under both
|
139 |
|
140 | * The Apache 2.0 License
|
141 | http://www.apache.org/licenses/LICENSE-2.0
|
142 |
|
143 | and
|
144 |
|
145 | * The MIT License
|
146 | http://opensource.org/licenses/MIT
|
147 |
|
148 | Vis.js may be distributed under either license. |
\ | No newline at end of file |