react-graph3d-vis

A React Component to create interactive 3d graphs using vis.js. check out the Demo Version.

Read more about it here : vis js graph3d

Install

npm install --save react-graph3d-vis

Usage

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 (
      <Graph3D data={data} />
    )
  }
}

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