React using 3d surface plot - reactjs

in javascript i used vis.js from http://visjs.org/graph3d_examples.html
but from react-vis the 3Dgraph component is missing.
If i am importing vis.js from a CDN server in my react app have this error:
"define is not defined no-def"
Is there another react library then react-plotly that can plot 3D surface like vis.js, or someone can help me import this vis.js to react?

Related

Tiktok's Pixel wrapper for react native

I want to implement Tiktok's Pixel in React Native app. What are the possibilities?

working of reactjs graph/chart . Can any only tell me from where i can get following type of graph in reactjs

I am looking for graph in Reactjs which is same as in link below
https://observablehq.com/#anacheyre/spot_bidder
There is a React implementation of Vega charts here:
https://github.com/vega/react-vega

How to use Globe.gl React component in React Native?

I asked a similar request in the Git Repo as well here, https://github.com/vasturiano/react-globe.gl.
I have an app that uses the react component exported by this project. It depends on three.js and WebGL to work. It is an extension of this repo by the same author, https://github.com/vasturiano/globe.gl.
I made a beautiful web app with these libraries and all works as expected, on the web, but I want to extend this to a mobile app built on react native as well.
I have tried a simple port but get an error from the CSS2DRenderer trying to access the document object which clearly doesn't exist on a mobile app.
I tried using expo GLView here, but could not for the life me figure out where to start on the context creation function to be able to port the three globe to it.
My question is, based on the Repo's I have shared above, what is the best approach to implementing the Globe in React Native?
I would also take any alternatives that I could do drag/zoom Globe with dynamic plot points and interactive functions (click basically).
For a quick setup to recreate the project, I am working an out of the box react native application setup
npm i react-globe.gl
Pop below component inside of a View in the app.js and import the Globe from above library. Provide an empty array for hexBinPointsData
<Globe
globeImageUrl="//unpkg.com/three-globe/example/img/earth-night.jpg"
bumpImageUrl="//unpkg.com/three-globe/example/img/earth-topology.png"
backgroundImageUrl="//unpkg.com/three-globe/example/img/night-sky.png"
hexBinPointsData={plotData}
hexAltitude={0.1}
hexBinResolution={4}
hexBinMerge={false}
/>
Expected error: Document variable cannot be found. In the CSS2DRenderer.js file.
Any help would be appreciated!

Is there anything while using fill-extrusion in mapbox-gl-js

I am trying to create a polygon in mapbox-gl-js using react. I am using react-map-gl as a wrapper for react of mapbox-gl-js.
I have taken example from here https://docs.mapbox.com/mapbox-gl-js/example/3d-extrusion-floorplan/
and everything is live on https://codesandbox.io/s/hopeful-wind-l0mtw?file=/src/App.js
Polygon is not displaying in the map.

Is it possible to apply react-konva into React Native project?

I saw react-konva bounce ball sample https://codesandbox.io/s/5qvyyyjrx from google and I tried to apply it into my React Native app.
But no luck, I getting this error invariant violation view config not found for name div which is from Stage (import { Stage } from "react-konva";).
May I know any way to solve this problem and react-konva can be apply in React Native?
Please advise. Thank you.
It the current moment react-konva#16.12.0 and konva#4.0.0 are designed to use a web platform only.
You can't use it for React Native.

Resources