Overview

A visualization in DXR is a collection of graphical marks (Unity game objects) whose visual channels or properties (position, color, size, etc.) can be mapped to data attributes. As the designer, you can specify this mapping using a high-level visualization grammar inspired by Vega-Lite, documented in the Grammar Docs. At its core, DXR takes your data and a vis specification or vis specs as input and generates an immersive visualization as output. As illustrated in the example below, given the data as a JSON file (left) and a vis specification as a JSON file (middle), DXR generates a visualization (right) within a Unity scene.

For each data item in the data, DXR generates an instance of the graphical mark (e.g., cube game object), and modifies its visual channels/properties (e.g., x, y positions) according to the values of data attributes (e.g., Horsepower, Miles_per_Gallon) as described in the vis specs, resulting in a visualization as shown above. This is the main recipe in DXR: data + vis specs = visualization.

Now that you know the recipe, let's set up your development environment, and then create your first immersive visualization!

Setting Up

1. Download the DXR package file and Unity installer from our Download page. Install the Unity editor.
2. Create a new Unity project: File -> New Project, then import (by double clicking) the DXR package file.
3. Switch target platform to Universal Windows Platform: File -> Build Setting.
4. Create a new empty Scene: File -> New Scene and apply default mixed reality settings: Mixed Reality Toolkit -> Configure -> Apply Mixed Reality Project Settings -> click Apply, then Mixed Reality Toolkit -> Configure -> Apply Mixed Reality Scene Settings -> click Apply.
5. Optional: set up your mixed reality device (VR headset or HoloLens).

Creating Your First Immersive Visualization

1. Create an instance of the DXRVis prefab in your scene. The DXRVis prefab is the template for an immersive visualization in DXR. Drag-and-drop the DXRVis prefab (found under Assets/DxR/Prefabs) into the Hierarchy window. You should now have a DXRVis game object instanced in your scene.

2. Adjust the DXRVis transform as needed. For example, to place the visualization in front of the user, 2 meters away, set the position to 0, 0, 2. Note that Unity follows the convention: 1 spatial unit is equivalent to 1 meter in XR.

3. Next, we need to specify which JSON file to use as the vis specs: click on the DXRVis game object and set/edit the “Vis Specs URL” attribute in the Inspector window. Note that this filename is relative to the Assets/StreamingAssets/DxRSpecs/ directory. For this example, let's create the empty file Assets/StreamingAssets/DxRSpecs/scatterplot.json.

4. Now it's time to specify our visualization design by modifying the vis specs using your favorite text/code editor (e.g., Visual Studio, Atom). Copy-then-paste the specification from the example above (middle) into scatterplot.json, then save. Looking at the vis specs, intuitively, we can tell that the data keyword corresponds to the data source, the mark specifies the graphical mark, and x, y, are the visual (spatial position) channels on which the quantitative data attributes Horsepower and Miles_per_Gallon are mapped to, respectively. Note that the data url is relative to Assets/StreamingAssets/DxRData/, e.g., a data url of cars.json should be in Assets/StreamingAssets/DxRData/cars.json.

5. Press play! You should now see a 2D scatterplot in front of you in XR like above (right). You can "tap" the anchor (red-box) near the origin to "drag-and-drop" the visualization in your XR space.

Editing Your Visualization via the GUI

One of the ways to edit your visualization is via the graphical user interface (or GUI for short). Using the GUI, you can modify the vis specs using "click"-based interactions at runtime (e.g., gaze and tap in HoloLens). To learn more, check out the GUI tutorial. For now, let’s add z and color channels to your visualization using the GUI like shown below:

Customizing Your Visualization via a Code Editor

In addition to the GUI, another way to edit your visualization is via high-level programming - simply put, by editing the vis specs JSON file using any text/code editor. Using this approach allows editing of vis spec parameters that are not exposed in the GUI. Refer to the Grammar Docs for a list of modifiable parameters. For now, let's make some adjustments to make the visualization look nicer.

Next Steps

• Go through examples of DXR visualizations and applications.
• Go through the DXR grammar documentation.
• Create custom marks and channels.