Getting Started

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)

Interactive examples can be seen and explored here.

The react component used to generate visualizations is VRViz with 2 props:

scene
graph

scene defines the property of the A-Frame scene that will be generated in which the visualization will be placed. This is not a mandatory prop in the component. If the developers feels the need to design the scene before and then place the visualization in the designed scene he/she can do that. This provide flexibility to design a customized scene with textures and objects in it and also let the developers add other A-Frame component (to add interactivity or animation) to scene.

graph is the prop where the visualization is defined. Different visualization requires the developer to define different parameter. This is a mandatory prop in the component. The prop must be defined as an array which gives flexibility to add multiple visualizations in the same scene to either design a dashboard in VR (just by changing the position of their origin) or overlap multiple visualization on each other.

If using NPM

Package link: https://www.npmjs.com/package/vr-viz

Installation

npm install --save vr-viz

How To Use

First import this component where you want to use it

import VRViz from "vr-viz"

Then just renders it

Example of Visualization Component

<VRViz
  scene={
    {
      'sky': {
        'style': {
          'color': '#ccc',
          'texture': false,
        }
      },
      'lights': [
        {
          'type': 'directional',
          'color': '#fff',
          'position': '0 1 1',
          'intensity': 1,
          "decay": 1,
        },
        {
          'type': 'ambient',
          'color': '#fff',
          'intensity': 1,
          "decay": 1,
        }
      ],
      'camera': {
        'position': '0 0 10',
        'rotation': '0 0 0',
      },
      'floor': {
        'style': {
          'color': '#ccc',
          'texture': false,
          'width': 100,
          'depth': 100,
        }
      }
    }
  }
  graph={
    [
      {
        'type': 'TreeMap',
        'data': {
          'dataFile': "data/TreeMap.json",
          'fileType': 'json',
        },
        'style': {
          'origin': [0, 0, 0],
          'dimensions': {
            'width': 50,
            'depth': 50,
            'height': 5,
          }
        },
        'mark': {
          'type': box,
          'style': {
            'paddingInner': 0.5,
            'paddingOuter': 0.1,
            'extrusion': {
              'field': 'size',
              'startFromZero': true,
            },
            'fill': {
              'scaleType': 'ordinal',
              'opacity': 1,
            },
          },
        },
      }
    ]
  }
/>

Scene Object

Scene object help the developer to define the characteristics of the scene where the visualization will be placed. As mentioned above the scene object is not mandatory. Different keys in this object help us to define the scene.

Example

{
  'sky': {
    'style': {
      'color': '#ccc',
      'texture': false,
    }
  },
  'lights': [
    {
      'type': 'directional',
      'color': '#fff',
      'position': '0 1 1',
      'intensity': 1,
      "decay": 1,
    },
    {
      'type': 'ambient',
      'color': '#fff',
      'intensity': 1,
      "decay": 1,
    }
  ],
  'camera': {
    'position': '0 0 10',
    'rotation': '0 0 0',
  },
  'floor': {
    'style': {
      'color': '#ccc',
      'texture': false,
      'width': 100,
      'depth': 100,
    }
  }
}

5 main features / properties of the scene objects are:

sky
lights
camera
floor
3D-objects

sky

Sky has property called style in which the visual properties of sky is defined.

Style Properties for Sky

Property	Type	Description
color	string	Color of the skybox. Not Required if `texture` is true.
texture	bool	If there is texture present in the skybox or not. Default value is false.
img	string	Path to the texture / image that is shown on the skybox. Not required if `texture` is false.

lights

Light property is defined as array which can have multiple lights. Proposed light system is a combination of an ambient light source and directional light source. Each element of array i.e. light is defined using the properties mentioned below.

Properties for Light

Property	Type	Description
type	string	Type of light. Required. Available values: `ambient`, `directional`, `point`.
color	string	Color of the light. Required
intensity	float	Intesity of the light. Required
decay	float	Decay value of the light. Required
position	string	Position of light source. Not required if `type` is ambient. Format is "0 0 0". Note that for `type` directional only the vector matters i.e. position="-100 100 0" and position="-1 1 0" are the same.

camera

Properties for Camera

Property	Type	Description
position	string	Position of the camera. Required. Format is "0 0 0".
rotation	string	Rotation of the camera. Required. Format is "90 0 0". Note that the values are in degree and the numbers represent ratation along x-axis, y-axis and z-axis respectively.

floor

Floor has property called style in which the visual properties of floor is defined.

Style Properties for Floor

Property	Type	Description
color	string	Color of the floor. Not Required if `texture` is true.
width	float	Width of the floor. Required
depth	float	Depth of the floor. Required
texture	bool	If there is texture present in the floor or not. Not Required. Default value is false.
img	string	Path to the texture / image that is shown on the floor. Not Required if `texture` is false.
repeat	bool	Not Required if `texture` is false.

3D-Object

3D-Object property is defined as array which can have multiple 3D objects. Each element of array i.e. 3D object is defined using the properties mentioned below.

Properties for 3D-Object

Property	Type	Description
objectFile	string	Path of the 3D object. Required
id	string	ID of the 3D object which is later used to identify this object. There should not be any space or special character except _ and must not start with a number. Required

Graph Object

Graph object help the developer to define the visualization. Although different visualizations requires the developer to define different parameters, there are some features which are same for most or all visualization type. This is a mandatory prop in the component. The prop must be defined as an array which gives flexibility to add multiple visualizations in the same scene to either design a dashboard in VR (just by changing the position of their origin) or overlap multiple visualization on each other.

Main features / properties of the scene objects are:

type
data
style
mark
axis Not required for all the types

type

type is used to define what kind of visualization is needed. The availabe values for type are :

BarGraph for 3D Bar Graph
StackedBarGraph for 3D Stacked Bar Graph
LollipopChart for 3D Lollipop Chart
RectangleChart for 3D Rectangle Chart
ScatterPlot for 3D Scatter Plot / 3D Bubble Chat
ConnectedScatterPlot for 3D Connected Scatter Plot
MeshPlot for 3D Mesh Plot
WaterFallPlot for Waterfall Plot
TimeSeries for 3D Time Series
ContourPlot for 3D Contour Plot
ParametricCurvePlot for 3D Parametric Curve Plot
SurfacePlot for 3D Surface Plot
ParametricSurfacePlot for 3D Parametric Surface Plot
ContourMap for 3D Contour Map
PointCloud for 3D Point Cloud
ForceDirectedGraph for 3D Force Directed Graph
PrismMap for 3D Prism Map
MapBarGraph for 3D Map Bar Graph
MapStackedBarGraph for 3D Map Stacked Bar Graph
MapTimeBars for Time Series on Map
MapWithIsoLines for 3D Map with Iso Line
FlowMap for 3D Flow Map
TreeMap for 3D TreeMap
SpiralPlot for 3D Spiral Plot

Supported Visualizations

data

Properties for Data

Property	Type	Description
dataFile	string	Path to location where the data file is located. *Required for most visualization type except for curve plot, surface plot, parametric curve plot* and parametric surface plot.**
fileType	string	Type of value. Available values: `csv`, `json`, `ply`, `text`. Default value 'csv'. `csv` fletype must have header; `text` is used for csv without header.
desc	array	Description of the header. Required only if the `fileType` is csv. Example: [['Year', 'date','YYYY'], ['geoJson', 'jsonObject'], ['Tornadoes', 'text'], ['Deaths', 'number']]. If the data type for a particular header is date or time then the format is also required. Available formats can be seen here. Moment.js is used to parse dates and time.

style

Properties for Style

Property	Type	Description
origin	array of numbers	Defines the position where the origin of the graph is placed. Required. Example: [0,0,0]
rotation	string	Defines the rotation of the chart. Not Required. Default value: '0 0 0' Format example: '-90 0 0'
dimension	object	Defines the dimension of the graph. Keys in the object are `width`, `depth` and `height`. The value for all these keys are float type. Required.

mark

mark is used to define the style and encoding for graphics in different visualizations. Different visualizations have different mark properties and key. These are discussed further in the documentation of individual visualizations.

axis

axis is used to define and draw the x, y and z axis. This object is not compulsory. If this object is not present none of the axes are drawn.

Example

'axis': {
  'axis-box': {
    'color': 'black',
  },
  'x-axis': {
    'orient': 'bottom-back',
    'title': {
      'text': '',
      'fontSize': 10,
      'color': 'black',
      'opacity': 1,
    },
    'ticks': {
      'noOfTicks': 10,
      'size': 0.1,
      'color': 'black',
      'opacity': 1,
      'fontSize': 10,
      'rotation': '-90 0 0',
      'align':'center'
    },
    'grid': {
      'color': 'black',
      'opacity': 1,
    }
  },
  'y-axis': {
    'orient': 'bottom-back',
    'title': {
      'text': '',
      'fontSize': 10,
      'color': 'black',
      'opacity': 1,
    },
    'ticks': {
      'noOfTicks': 10,
      'size': 0.1,
      'color': 'black',
      'opacity': 1,
      'fontSize': 10,
      'rotation': '-90 0 0',
      'align':'center'
    },
    'grid': {
      'color': 'black',
      'opacity': 1,
    }
  },
  'z-axis': {
    'orient': 'bottom-back',
    'title': {
      'text': '',
      'fontSize': 10,
      'color': 'black',
      'opacity': 1,
    },
    'ticks': {
      'noOfTicks': 10,
      'size': 0.1,
      'color': 'black',
      'opacity': 1,
      'fontSize': 10,
      'rotation': '-90 0 0',
      'align':'center'
    },
    'grid': {
      'color': 'black',
      'opacity': 1,
    }
  }
}

axis has the 2 main type of objects

axis-box
x-axis, y-axis, z-axis

Note: For spiral chart the axis prop is not defined like below. To see the axis prop in spiral chart read the documentation of spiral chart here.

axis-box Defines if the axis-box is drawn or not and the color and opacity of the axis box. Not Required. If the object is not present then the axis-box is not drawn. The dimensions of the axis box is taken from the dimension object in style

Properties for axis-box

Property	Type	Description
color	string	Defines the color of the axis box. Required
opacity	float	Defines the opacity of the axis box. Reqruied. Value must be between 0 and 1

x-axis, y-axis, z-axis Defines if the different axes are drawn or not. Not Required. If an object is not present then that axis is not drawn.

Properties for x-axis, y-axis, z-axis

Property	Type	Description
orient	string	Defines where the ticks are displayed. Not Required. Default value for x-axis: front-top. Default value for x-axis: front-left. Default value for x-axis: bottom-left.. Available values for x-axis: front-top, back-bottom, back-top or front-bottom. Available values for y-axis: front-left, back-left, front-right or back-right. Available values for z-axis: bottom-left, top-left, top-right or bottom-right.
title	object	Defined the style of title for the axis. Not Required. Currently this feature is not available.
title.text	string	Defined the text for title for the axis. Required. Currently this feature is not available.
title.fontSize	int	Defined the font size for title for the axis. Required. Currently this feature is not available.
title.color	string	Defined the color for title for the axis. Required. Currently this feature is not available.
title.opacity	float	Defined the opacity for title for the axis. Required. Value must be between 0 and 1. Currently this feature is not available.
tick	object	Defined the ticks for the axis. Required.
tick.noOfTicks	int	Defined the no. of tick for the axis. Required. No. of ticks are only applicable for `linear` scale.
tick.size	float	Defined the font size for ticks for the axis. Required.
tick.fontSize	int	Defined the font size for text for tick for the axis. Required.
tick.color	string	Defined the color for ticks and text for tick for the axis. Required.
tick.opacity	float	Defined the opacity for title for the axis. Required. Value must be between 0 and 1.
tick.rotation	string	Defines the alignment of the text for ticks. Not Required. Default value for x-axis: "-90 0 0". Default value for y-axis: "0 0 0". Default value for z-axis: "-90 0 0". Format is "0 0 0".
tick.align	string	Defines the alignment of the text for ticks. Not Required. Default value for x-axis: center. Default value for y-axis: right. Default value for z-axis: right.. Available values: left, center, right.
grid	object	Defined the style of grid for the axis. Not Required.
grid.color	string	Defined the color for grid for the axis. Required.
grid.opacity	float	Defined the opacity for grid for the axis. Required. Value must be between 0 and 1.

To Do

Add Legends
Add collaboration using A-Frame Networked

Known Issues

~~Grid in the axes doesnt work right now~~
~~Titles of the axes doesnt work right now~~

Installation

This project was bootstrapped with Create React App.

This project uses yarn. Install it as described here https://yarnpkg.com/lang/en/ if you haven't already.

To install this project, simply clone the repo and run yarn

Local Development

In the project directory, you can run:

yarn start

Runs the app in the development mode.

Name		Name	Last commit message	Last commit date
Latest commit History 132 Commits
ReadMe		ReadMe
examples		examples
imgs		imgs
public		public
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
yarn.lock		yarn.lock

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Getting Started

Interactive examples can be seen and explored here.

If using NPM

Example of Visualization Component

Scene Object

sky

lights

camera

floor

3D-Object

Graph Object

type

data

style

mark

axis

To Do

Known Issues

Installation

Local Development

About

Releases

Packages

Languages

License

13911105584/VR-Viz

Folders and files

Latest commit

History

Repository files navigation

Getting Started

Interactive examples can be seen and explored here.

If using NPM

Example of Visualization Component

Scene Object

sky

lights

camera

floor

3D-Object

Graph Object

type

data

style

mark

axis

To Do

Known Issues

Installation

Local Development

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages