VRViz Component

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.

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,
        }
      },
      'parentDiv':{
        'class':'graph',
        'height':1000,
        'width':1000
      },
      'reloadPageOnExitVR':true
    }
  }
  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,
            },
          },
        },
      }
    ]
  }
/>
Copy

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,
    }
  },
  'parentDiv':{
    'class':'graph',
    'height':1000,
    'width':1000
  },
  'reloadPageOnExitVR':true
}
Copy

6 main features / properties of the scene objects are:

• sky
• lights
• camera
• floor
• 3D-objects (optional)
• parentDiv (optional)
• reloadPageOnExitVR (optional)

sky

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

Style Properties for Sky

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

camera

Properties for Camera

floor

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

Style Properties for Floor

3D-objects

3D-objects 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-objects

parentDiv (optional)

parentDiv defines the class and size of the div in which a-scene is embedded.

Properties for parentDiv

reloadPageOnExitVR (optional)

Defines if the user wants to reload the page when exiting VR mode. Is useful when there are multiple a-scene in the same page. Not Required. Default value: false. Format:''reloadPageOnExitVR':true

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 graph objects are:

• type
• data
• style Not Required
• mark
• axis Not Required
• title Not Required
• rotationOnDrag Not Requred
• animateRotation Not Required

type

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

Charts

• 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
• SpiralPlot for 3D Spiral Plot

Maps

• PrismMap for 3D Prism Map
• MapBarGraph for 3D Map Bar Graph
• MapStackedBarGraph for 3D Map Stacked Bar Graph
• MapTimeBars for Time Series on Map
• IsolineMap for 3D Map with Iso Line
• FlowMap for 3D Flow Map

Diagrams

• CrossSectionView for 3D Cross Sectional View or 3D Models
• ContourMap for 3D Contour Map
• PointCloud for 3D Point Cloud
• ForceDirectedGraph for 3D Force Directed Graph
• TreeMap for 3D TreeMap

Plots

• ContourPlot for 3D Contour Plot
• ParametricCurvePlot for 3D Parametric Curve Plot
• SurfacePlot for 3D Surface Plot
• ParametricSurfacePlot for 3D Parametric Surface Plot

data

Properties for Data

style Not Required

Properties for Style

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 Not Required

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,
    }
  }
}
Copy

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

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

title Not Required

This defines the title of the graph

Properties for title

rotationOnDrag Not Required

This is use to define weather the visualization rotates on drag. Not Required. If no present then rotationOnDrag is activated by default. Type: object.

Properties for rotationOnDrag

animateRotation Not Required

This is use to define the rotation animation of the graph for viewing it in different perspective. If animateRotation is present the roation of graph on mouse drag is ignored.

Properties for animateRotation