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