https://github.com/visjs/vis-graph3d

📊 Create interactive, animated 3d graphs. Surfaces, lines, dots and block styling out of the box.
https://github.com/visjs/vis-graph3d

3d chart hacktoberfest vis

Last synced: 6 days ago
JSON representation

📊 Create interactive, animated 3d graphs. Surfaces, lines, dots and block styling out of the box.

• Host: GitHub
• URL: https://github.com/visjs/vis-graph3d
• Owner: visjs
• License: apache-2.0
• Created: 2019-07-16T12:45:52.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-10-04T22:32:23.000Z (4 months ago)
• Last Synced: 2024-10-29T11:01:28.573Z (3 months ago)
• Topics: 3d, chart, hacktoberfest, vis
• Language: JavaScript
• Homepage: https://visjs.github.io/vis-graph3d/
• Size: 420 MB
• Stars: 311
• Watchers: 6
• Forks: 43
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Changelog: HISTORY.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE-APACHE-2.0
  • Code of conduct: CODE-OF-CONDUCT.md
  • Support: .github/SUPPORT.md

Awesome Lists containing this project

• awesome-visjs - vis-graph3d - Create interactive, animated 3d graphs. Surfaces, lines, dots and block styling out of the box. (Libraries / Documentation & Help)

README

        
# 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

  

    Graph 3D demo

    

    

      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);

      }

    

  

  

    


  


```

## 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! 🙏



### Sponsors

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





















## 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.