# vis-graph3d

![example chart](docs/img/graph3d.png)

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.

Graph3d uses HTML canvas to render graphs, and can render up to a few thousands of data points smoothly.

## Badges

[![GitHub contributors](https://img.shields.io/github/contributors/visjs/vis-graph3d.svg)](https://github.com/visjs/vis-graph3d/graphs/contributors)
[![GitHub stars](https://img.shields.io/github/stars/visjs/vis-graph3d.svg)](https://github.com/almende/vis/stargazers)

[![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/)

## Install

Install via npm:

    $ npm install vis-graph3d

## Example

A basic example on loading a Timeline is shown below. More examples can be
found in the [examples directory](https://github.com/visjs/vis-graph3d/tree/master/examples/graph3d)
of the project.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Graph 3D demo</title>
    <script
      type="text/javascript"
      src="https://unpkg.com/vis-graph3d@latest/dist/vis-graph3d.min.js"
    ></script>
    <script type="text/javascript">
      var data = null;
      var graph = null;

      function custom(x, y) {
        return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;
      }

      // Called when the Visualization API is loaded.
      function drawVisualization() {
        // Create and populate a data table.
        data = new vis.DataSet();
        // create some nice looking data with sin/cos
        var counter = 0;
        var steps = 50; // number of datapoints will be steps*steps
        var axisMax = 314;
        var axisStep = axisMax / steps;
        for (var x = 0; x < axisMax; x += axisStep) {
          for (var y = 0; y < axisMax; y += axisStep) {
            var value = custom(x, y);
            data.add({ id: counter++, x: x, y: y, z: value, style: value });
          }
        }

        // specify options
        var options = {
          width: "600px",
          height: "600px",
          style: "surface",
          showPerspective: true,
          showGrid: true,
          showShadow: false,
          keepAspectRatio: true,
          verticalRatio: 0.5,
        };

        // Instantiate our graph object.
        var container = document.getElementById("mygraph");
        graph = new vis.Graph3d(container, data, options);
      }
    </script>
  </head>
  <body onload="drawVisualization();">
    <div id="mygraph"></div>
  </body>
</html>
```

## Build

To build the library from source, clone the project from github

    $ git clone git://github.com/visjs/vis-graph3d.git

The source code uses the module style of node (require and module.exports) to
organize dependencies. To install all dependencies and build the library,
run `npm install` in the root of the project.

    $ cd vis-graph3d
    $ npm install

Then, the project can be build running:

    $ npm run build

## Test

To test the library, install the project dependencies once:

    $ npm install

Then run the tests:

    $ npm run test

## Contribute

Contributions to the vis.js library are very welcome! We can't do this alone!

### Backers

Thank you to all our backers! 🙏

<a href="https://opencollective.com/visjs#backers" target="_blank"><img src="https://opencollective.com/visjs/backers.svg?width=890"></a>

### Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website.

<a href="https://opencollective.com/visjs/sponsor/0/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/0/avatar.svg"></a>
<a href="https://opencollective.com/visjs/sponsor/1/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/1/avatar.svg"></a>
<a href="https://opencollective.com/visjs/sponsor/2/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/2/avatar.svg"></a>
<a href="https://opencollective.com/visjs/sponsor/3/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/3/avatar.svg"></a>
<a href="https://opencollective.com/visjs/sponsor/4/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/4/avatar.svg"></a>
<a href="https://opencollective.com/visjs/sponsor/5/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/5/avatar.svg"></a>
<a href="https://opencollective.com/visjs/sponsor/6/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/6/avatar.svg"></a>
<a href="https://opencollective.com/visjs/sponsor/7/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/7/avatar.svg"></a>
<a href="https://opencollective.com/visjs/sponsor/8/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/8/avatar.svg"></a>
<a href="https://opencollective.com/visjs/sponsor/9/website" target="_blank"><img src="https://opencollective.com/visjs/sponsor/9/avatar.svg"></a>

## License

Copyright (C) 2010-2018 Almende B.V. and Contributors

Vis.js is dual licensed under both

- The Apache 2.0 License
  http://www.apache.org/licenses/LICENSE-2.0

and

- The MIT License
  http://opensource.org/licenses/MIT

Vis.js may be distributed under either license.
