{"id":13503549,"url":"https://github.com/auquan/react-graph3d-vis","last_synced_at":"2025-03-29T18:31:21.247Z","repository":{"id":33440709,"uuid":"158399297","full_name":"Auquan/react-graph3d-vis","owner":"Auquan","description":"A React Component to create interactive 3d graphs using vis.js","archived":false,"fork":false,"pushed_at":"2022-12-10T03:02:57.000Z","size":3548,"stargazers_count":9,"open_issues_count":42,"forks_count":3,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-18T13:08:02.684Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Auquan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-20T14:07:45.000Z","updated_at":"2023-03-12T10:11:51.000Z","dependencies_parsed_at":"2023-01-15T01:00:56.670Z","dependency_job_id":null,"html_url":"https://github.com/Auquan/react-graph3d-vis","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Auquan%2Freact-graph3d-vis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Auquan%2Freact-graph3d-vis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Auquan%2Freact-graph3d-vis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Auquan%2Freact-graph3d-vis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Auquan","download_url":"https://codeload.github.com/Auquan/react-graph3d-vis/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246226975,"owners_count":20743862,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T23:00:39.431Z","updated_at":"2025-03-29T18:31:20.890Z","avatar_url":"https://github.com/Auquan.png","language":"JavaScript","funding_links":[],"categories":["Libraries"],"sub_categories":["vis.js based libraries"],"readme":"# react-graph3d-vis\n\n\u003e A React Component to create interactive 3d graphs using vis.js. check out the [Demo Version](https://auquan.github.io/react-graph3d-vis/).\n\n\u003e Read more about it here : [vis js graph3d](http://visjs.org/docs/graph3d/index.html)\n\n[![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)\n\n\n\u003cimg width=\"1030\" alt=\"screenshot 2018-11-20 at 7 05 46 pm\" src=\"https://user-images.githubusercontent.com/16102594/48776968-4e53eb80-ecf7-11e8-8f2e-b13ed0dcb2db.png\"\u003e\n\n## Install\n\n```bash\nnpm install --save react-graph3d-vis\n```\n\n## Usage\n\n```jsx\nimport React, { Component } from 'react'\n\nimport Graph3D from 'react-graph3d-vis'\n\nclass Example extends Component {\n\n  custom(x, y) {\n    return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50)\n  }\n\n  generateData() {\n    let data = []\n    var steps = 50;  // number of datapoints will be steps*steps\n    var axisMax = 314;\n    var axisStep = axisMax / steps;\n    for (var x = 0; x \u003c axisMax; x+=axisStep) {\n      for (var y = 0; y \u003c axisMax; y+=axisStep) {\n        var value = this.custom(x, y);\n        data.push({\n          x: x,\n          y: y,\n          z: value,\n          style: value\n        })\n      }\n    }\n\n    return data\n  }\n  render () {\n    let data = this.generateData()\n    return (\n      \u003cGraph3D data={data} /\u003e\n    )\n  }\n}\n```\n\n## Supported Features\nAll the features from vis.js graph 3d are currently not supported **(Pull Requests are welcome)**.\n\n * Data Format (Array)\n * Configuration Options\n * events\n\n## License\n\nMIT © [Auquan](https://github.com/auquan)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fauquan%2Freact-graph3d-vis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fauquan%2Freact-graph3d-vis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fauquan%2Freact-graph3d-vis/lists"}