Description

From GitHub: "VR-Viz provide a high-level react components to generate 3D visualization in webVR. It combines A-Frame with React (for DOM manipulation) and D3 (for data visualizations) to generate visualization in VR. It provides a JSON syntax for generating visualizations (the concept is inspired from Vega-Lite)"

Tutorial for Visualizing a Dataset

1. Gather the datasets (or use the defaults) that you would like to visualize. VR-Viz supports multiple formats, including csv, json, and map formats. 

2. To install the software, first clone the vr-viz-boilerplate repo into an accessible location on your computer. Open the folder (cd vr-viz-boilerplate) in your terminal

3. run npm install in the terminal to download vr-viz library into your node modules.

4. Inside of vr-viz-boilerplate, open the public folder and paste the data file you would like to visualize here. 

5. Note: if you are looking for datasets to visualize, there are some attached here. 

6. Go outside of the public folder and into src. Open App.js in a text editor. Here you'll notice one HTML component, VR-Viz, with two properties: scene and graph. Both take in a JS object. Scene is an optional parameter that specifies the A-frame scene that the data visualization is located in. If the scene is not used, an A-Frame scene must be created and the VR-Viz React component must be placed inside of it. Graph is a required parameter. It is an array of objects each of which are for a different visualization. As for as I know, there is no limit to the number of visualizations that can be used in the array, although you may experience performance issues with more than 3. 

7. For each type of visualization that you would like to use, I recommend starting by copying the visualization object for that type from storybook and pasting it into the VR-Viz component. This will prevent many bugs from misspecified properties. 

8. Inside the data property of the Graph parameter, there is a dataFile, fileType, and fieldDesc property. Replace these with values that correspond to your data file. 

9. The mark property must also change depending on the visualization type. For a given visualization, look at the Notes section of the type's subpage on this website for guidance on type specific attributes. If you first copied the entire object from storybook (from step 7), then you don't need to change this. 

Recommended System Requirements

Should work on all systems and headsets, since it is on the web. 

Metrics

Accessibility: The estimated time for someone to create Hello World in VR

• Beginner: No coding or graphics experience | 30 minutes

• Intermediate: Some coding or graphics experience | 15 minutes

• Advanced: Both coding and graphics experience  |  10 minutes

• Expert: A lot of experience with computer graphics  |  10 minutes

Power: The engine's power - i.e. how much one can do with this

• Low: Intended as a simple setup for webVR Visualization

Usage:  Evaluation of software's use for the following purposes

• 3D Plot data - easily import any dataset that has 3 numerical dimensions

• Point cloud - supports small point cloud datasets

• Network data - create dynamic and static labeled nodes/edges

• GeoJSON data - map data in the form of a JSOn object. 

Notes:

• Geography and Map Visualizations have been tried with no success

• If you are using VR-Viz with large point-cloud or scatter plot datasets (>10,000 points), set the optimizeView property on the graph object to true.