https://github.com/auquan/react-graph3d-vis

A React Component to create interactive 3d graphs using vis.js
https://github.com/auquan/react-graph3d-vis

Last synced: 20 days ago
JSON representation

A React Component to create interactive 3d graphs using vis.js

• Host: GitHub
• URL: https://github.com/auquan/react-graph3d-vis
• Owner: Auquan
• License: mit
• Created: 2018-11-20T14:07:45.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T03:02:57.000Z (over 2 years ago)
• Last Synced: 2025-03-18T13:08:02.684Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 3.38 MB
• Stars: 9
• Watchers: 5
• Forks: 3
• Open Issues: 42
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-visjs - react-graph3d-vis - A react component to create interactive 3d graphs. (Libraries / vis.js based libraries)

README

        
# react-graph3d-vis

> A React Component to create interactive 3d graphs using vis.js. check out the [Demo Version](https://auquan.github.io/react-graph3d-vis/).

> Read more about it here : [vis js graph3d](http://visjs.org/docs/graph3d/index.html)

[![NPM](https://img.shields.io/npm/v/react-graph3d-vis.svg)](https://www.npmjs.com/package/react-graph3d-vis) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)



## Install

```bash

npm install --save react-graph3d-vis

```

## Usage

```jsx

import React, { Component } from 'react'

import Graph3D from 'react-graph3d-vis'

class Example extends Component {

  custom(x, y) {

    return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50)

  }

  generateData() {

    let data = []

    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 = this.custom(x, y);

        data.push({

          x: x,

          y: y,

          z: value,

          style: value

        })

      }

    }

    return data

  }

  render () {

    let data = this.generateData()

    return (

      

    )

  }

}

```

## Supported Features

All the features from vis.js graph 3d are currently not supported **(Pull Requests are welcome)**.

 * Data Format (Array)

 * Configuration Options

 * events

## License

MIT © [Auquan](https://github.com/auquan)