VR-Viz Boilerplate

This git repo provides a boilerplate for creating data visualization in VR using VR-Viz package.

VR-Viz is react component which combines React.js, D3.js and A-frame to create data visualization in VR.

Interactive examples can be seen and explored here.

Git Repo for VR-Viz can be found here.

Installation

This project can be installed using yarn or node. Install yarn as described here https://yarnpkg.com/en/docs/install if you haven't already or node as described here https://nodejs.org/en/ if you haven't already.

To install this boilerplate, simply clone the repo and run yarn or npm install;

git clone https://github.com/mustafasaifee42/vr-viz-boilerplate.git
cd vr-viz-boilerplate
yarn

or using node

git clone https://github.com/mustafasaifee42/vr-viz-boilerplate.git
cd vr-viz-boilerplate
npm install

Local Development

In the project directory, you can run:

yarn start or npm run start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

To view this in your VR headset (if the headset is connected to the same system on which the local development is done) open a browser(prefereablly latest version of chrome, firefox or edge) in the VR environment and open http://localhost:3000 in it.

If the headset is connected to another system than on which the local development is done then using ipconfig in CLI get the IPv4 address of the system on which the development is done. Then, open a browser(prefereablly latest version of chrome, firefox or edge) in the VR environment in the headset and open {ip-address}:3000 in it (replace ip-address with the IPv4 address got using ipconfig). Make sure that both the systems are connected to the same wi-fi network.

In the browser you should be able to see a barchart.

To enter the VR mode click the Enter VR Mode icon in the bottom right in the browser.

Editing the Boilerplate

Updating the data sheet

In the project directory, in public folder edit data.csv file with new data to plot that data in VR. You can replace this file in public folder with another csv, json, txt, or ply file which has your data.

• csv file can be created in excel or any other software.
• txt file is used for datafiles without headers with values seperated by a comma.
• ply is primarily used for point cloud visualization.

Updating the graph

In the project directory, in src folder edit App.js file. Read the detail documention here how App.js can be edited to use a specific visualization and how these visualizations can be edited.

Supported Visualizations

Charts

• 3D Bar Graph
• 3D Stacked Bar Graph
• 3D Lollipop Chart
• 3D Rectangle Chart
• 3D Scatter Plot / 3D Bubble Chat
• 3D Connected Scatter Plot
• 3D Mesh Plot
• Waterfall Plot
• 3D Time Series
• 3D Spiral Plot

Maps

• 3D Prism Map
• 3D Map Bar Graph
• 3D Map Stacked Bar Graph
• MapTimeBars
• IsolineMap
• 3D Flow Map

Daigrams

• 3D Cross Sectional View
• 3D Point Cloud
• 3D Contour Map
• 3D Force Directed Graph
• 3D TreeMap

Plots

• 3D Parametric Curve Plot
• 3D Contour Plot
• 3D Surface Plot
• 3D Parametric Surface Plot

Building the React App

App need to build so the app can be uploaded on the server to build the app you can run:

yarn run build

For building the app as a sub page in website, homepage parameter in package.json needs to edited to the exact link otherwise the app expects to be run from the root directory of the webserver. For example homepage: 'www.example.com/vr-app' if the app need to uploaded at www.example.com/vr-app

Note

This project was bootstrapped with Create React App.

To see the full documentation regarding that, go here. The salient points are reproduced below, along with important custom setup documentation.