Unity - 3D Radar Chart

The purpose of this project is to provide a data-agnostic software module for a three-dimensional (3D), interactive data visualization in the format of a 3D Radar Chart, implemented for Unity.

Table of contents

• Scientific References, and further information
• Features
• Dependencies
• Feature Change Log
• How to use
• Quickstart guide
• Media
• License

Scientific References

The project (v2) presented here is described in detail within the following scientific publication:

• Nico Reski, Aris Alissandrakis, and Andreas Kerren. Designing a 3D gestural interface to support user interaction with time-oriented data as immersive 3D radar charts. Virtual Reality, 28:30:1-24, 23 January 2024. doi:10.1007/s10055-023-00913-w

It is a rigorous extension of the original project (v1), described in detail within the following scientific publication:

• Nico Reski, Aris Alissandrakis, and Andreas Kerren. Exploration of Time-Oriented Data in Immersive Virtual Reality Using a 3D Radar Chart Approach. In Proceedings of the 11th Nordic Conference on Human-Computer Interaction: Shaping Experiences, Shaping Society (NordiCHI 2020), pp. 33:1–11, Tallinn, Estonia, 25–29 October 2020. ACM. doi:10.1145/3419249.3420171

Background / Motivation

Some of my research interests evolve around the interaction with data in immersive environments, i.e., data visualized in computer-generated 3D environments that are viewed through immersive display technologies, for instance Virtual Reality (VR) headsets. In order to practically investigate such immersive data interaction (this area is commonly referred to as Immersive Analytics in the research community), I ended up implementing an interactive 3D data visualization approach as presented in this repository.

Radar Chart concepts (2D and 3D)

The concept of a two-dimensional (2D) radar chart, also commonly known as Kiviat figure or star plot, can be traced back to Kolence and Kiviat's work in 1973. Rather than presenting values of individual data variables perpendicular to one another (e.g., histogram, bar chart), they are first radially arranged as data variable axes, and then connecting the values for each data variable along the different adjacent axes by a polyline, resulting in a visually interpretable pattern.

The annotated screenshot below illustrates the concept of a (2D) radar chart (as part of the implemented software module presented here).

Over the years, many different approaches have been made attempting to transfer the concept of the (2D) radar chart into the 3D space, most often with the aim to utilize the additional graphical dimension to visualize further information. A common use case is to utilize that third additional dimension to visually encode time events, visualizing changes in the data over time by stringing together multiple (2D) radar charts in 3D along a (time) axis.

The annotated screenshot below illustrates the concept of such a 3D Radar Chart as implemented in the software module presented here. It is notable that its concept and design are inspired and derived from Akaishi and Okada's Time-tunnel approach as presented in 2004.

Features

• Visualization of time-oriented data as a 3D Radar Chart.
• Toggle of a Time Slice for further inspection of the 3D Radar Chart's data variable axes and time-oriented data.
• Toggle of an Information Window for further inspection of the 3D Radar Chart's data variable axes and time-oriented data.
• Rotation of the 3D Radar Chart in place.
• Selection of a Time Range within the time-series data.
• Zoom (in / out) based on a time range selection.
• Reconfigure (Sort) and Filter operations for the 3D Radar Chart's data variable axes.
• Reset the 3D Radar Chart back to its original state after initialization.
• Target-based Travel to individual 3D Radar Charts in a scene with more than one 3D Radar Chart (VRLM).
• Interaction through (1) keyboard and mouse input for a non-immersive 3D setup (keyboard_and_mouse), and (2) Leap Motion hand controller for an immersive VR setup (VRLM).
• Implementation: One class ThreeDimRadarChartInterface.cs as main interface for configuration and interaction with the 3D Radar Chart.
• Implementation: Input data (in .csv data format) can be loaded both from local or remote sources.
• Implementation: Color configuration (in .csv data format) for the input data's individual dimension values, coded in hexadecimal notation, can be loaded both from local or remote sources.
• Implementation: Individual data variable axes of the 3D Radar Chart are implemented as FrequencyPolygons, which have various configuration options as well (e.g., for data value scaling).
• Implementation: Managing multiple 3D Radar Charts in a scene using the MultiTDRCManager class.
• Implementation: Utilize the TDRCDataAnalyzer class to perform various data analysis tasks for a 3D Radar Chart at runtime.
• Documentation: The source code for all involved classes and components is extensively documented directly within the source files.

Dependencies

This project has been built using the following specifications (keyboard_and_mouse):

• Unity 2019.2.17f1 Personal
• Unity PolyExtruder by Nico Reski, for the purpose of dynamically creating 2D meshes used within several parts of the data visualization

In order to use the implemented VR and Leap Motion support, the following specifications are required (VRLM):

• Leap Motion Core Assets v.4.5.1, imported Core and Interaction Engine packages
• SteamVR Plugin 1.2.3

External hardware specifications have been used with the following specifications (VRLM):

• Ultraleap Hand Tracking V4 Orion software v.4.1.0+52211, Firmware Revision v.1.7.0
• SteamVR, always up-to-date through Steam

Feature Change Log

The current master branch of this repository features the latest implementation of this project, i.e., v2, as described in Reski et al. (2024).

The initial v1 implementation, as described in Reski et al. (2020), can be accessed by switching to the repository's v1-nordichi2020 branch.

Overall, v1 was concerned with the establishment of the 3D visualization and data interaction approach in general. After its validation, the project was extended in v2 through the implementation of additional features relevant for analytical tasks as well as an 3D interaction approach (VRLM) without any graphical system control techniques, such as menus attached to the user's hand. For detailed information on the user interface design, please refer to Reski et al. (In preparation). Additionally, a detailed feature change log is documented at the top of the ThreeDimRadarChartInterface.cs file.

How to use

Import assets to Unity project

In order to add the features presented in this repository to your Unity project, I recommend to add the assets by simply importing one of the pre-compiled .unitypackage packages to your Unity project. Two different .unitypackage packages are provided:

1. nicoversity-unity_3dradarchart-v2-keyboard_and_mouse.unitypackage: Contains the 3D Radar Chart implementation for normal usage, without any immersive interfaces (no VR or Leap Motion assets and code are included). This is recommended for most users, who prefer to implement their own interaction mechanisms. An extensive example for keyboard (and mouse) interaction is included in the TDRCTechDemoInteraction class, which should be an excellent starting point for get more familiar with the project and its implementation.
2. nicoversity-unity_3dradarchart-v2-vrlm.unitypackage: Contains the keyboard_and_mouse implementation, plus the extensions to support VR (SteamVR, i.e., HTC Vive) and Leap Motion (LM) hand controller interaction. Note: This .unitypackage comes pre-compiled with all necessary SteamVR and LeapMotion Unity assets as listed in the Dependencies section.

Alternatively, the repository directory unity_src features a directory titled Unity3DRadarChart, containing the source code (Unity project) of the complete 3D Radar Chart implementation (i.e., basically the exported contents of the nicoversity-unity_3dradarchart-v2-vrlm.unitypackage package).

Input data

The directory Assets/Resources/3D_Radar_Chart-resources/Data/ contains various .csv files, providing examples for (1) the actual input data used to be visualized as a 3D Radar Chart, and (2) the color configuration of the 3D Radar Chart's data variable axes. I recommend to refer to the contents of the v2-sample_data directory for a good example that features data for multiple 3D Radar Charts.

Input data generally follows the format as illustrated within the code snippet below:

"dimension", "time", "value"
"myFirstDimenion", "2020-08-02", "23.0"
"myFirstDimenion", "2020-08-03", "28.1"
"mySecondDimenion", "2020-08-02", "42.2"
"mySecondDimenion", "2020-08-03", "33.3"
"myThirdDimenion", "2020-08-02", "70.4"
"myThirdDimenion", "2020-08-03", "77.5"
// ...

Color configuration data generally follows the format as illustrated within the code snippet below:

"dimension", "color"
"myFirstDimenion", "ffff00"
"mySecondDimenion", "ff00ff"
"myThirdDimenion", "00ffff"
// ...

ThreeDimRadarChartInterface.cs

A new instance of a 3D Radar Chart can be created, configured, and initialized dynamically at runtime from within the source code. An example of such is illustrated within the code snippet below. Please also have a look into the provided Demo_3DRadarChart_v2.cs file for further illustration, utilizing the sample data as provided in the Assets/Resources/3D_Radar_Chart-resources/Data/v2-sample_data directory.

// properties related to the 3D Radar Chart instantiation
//

public Camera mainCamera;   // main scene camera (assigned via Unity Inspector)
private ThreeDimRadarChartInterface demo_TDRCInterface; // reference to the 3D Radar Chart instance (for use after instantiation)
private static readonly string demo_TDRCInterfacePrefab = "3D_Radar_Chart-resources/Prefabs/TDRCInterface"; // reference to the 3D Radar Chart's GameObject Prefab (within the Unity Application's "Assets/Resources" directory)
public Vector3 demo_TDRCPosition;   // initial position of the 3D Radar Chart within the Scene, e.g., new Vector(23.0f, 0.5f, 42.0f)


// instantiate the 3D Radar Chart at runtime, e.g., within the Start() function, or on-demand within the Update() function
//

// only instantiate if not already existing
if (demo_TDRCInterface == null && mainCamera != null)
{
    // instantiate new TDRCInterface GameObject (attached as a Child to the GameObject this script is attached to) and get reference to ThreeDimRadarChartInterface component
    demo_TDRCInterface = Instantiate(Resources.Load(demo_TDRCInterfacePrefab) as GameObject, this.transform).GetComponent<ThreeDimRadarChartInterface>();

    demo_TDRCInterface.name = "TDRCInterface_1";

    // AFTER instantiation _AND_ BEFORE INITIALIZATION: do additional custom configurations to the ThreeDimRadarChartInterface, e.g., set data source and data source color coding properties, configure data transformation related values (normalization, scaling), etc.
    // Note: Default configuration possible beforehand by editing the Prefab directly in the Resources directory using the Unity Inspector. (Recommendation: If done so, create a copy of the original Prefab for save keeping of original configuration.)
    //
    // Some configuration examples:
    //demo_TDRCInterface.dataSourceLocalFilePath = "3D_Radar_Chart-resources/data/v2-sample_data/Location_1";
    //demo_TDRCInterface.dataColorLocalFilePath = "3D_Radar_Chart-resources/data/v2-sample_data/fruit_dimension_colors";
    //demo_TDRCInterface.isDataLoadedFromServer = false;
    //demo_TDRCInterface.cnfg2d_isFrequencyPolygonVisualizationNormalized = false;
    //demo_TDRCInterface.cnfg2d_frequencyPolygonDataValueScaling = TDRCFrequencyPolygon.DataValueScaling.Linear;
    //demo_TDRCInterface.cnfg2d_linearScaleFactor = 0.1f;
    //demo_TDRCInterface.cnfg2d_isFrequencyPolygonLengthOverridingPointDistance = true;
    //demo_TDRCInterface.cnfg2d_frequencyPolygonLength = 100.0f;
    // ...

    // For a full list of configuration properties, please refer directly to the implementation/documentation in the ThreeDimRadarChart.cs file

    // initialize 3D Radar Chart (= load data and ready for user interaction)
    demo_TDRCInterface.initWithCameraAndPosition(mainCamera, demo_TDRCPosition);
}

ThreeDimRadarChartInterface API

Practically, I recommend to refer closely to the TDRCTechDemoInteraction.cs file to get a general overview, including example function calls, for the various 3D Radar Chart features. I believe this is a good starting point if one were to map the features to an own interaction layout.

MultiTDRCManager.cs

The MultiTDRCManager is a simple class responsible for handling the state and interaction with multiple 3D Radar Charts in a scene at runtime. Among others, it allows to (1) add new 3D Radar Chart references to be managed by it, (2) retrieve a reference to a managed 3D Radar Chart by its name, (3) set the selection status of a managed 3D Radar Chart, (4) get the amount of managed 3D Radar Charts, and (5) keep track of a selection history.

For its implementation, please refer directly to the MultiTDRCManager.cs file. Additionally, the Demo_3DRadarChart_v2.cs provides a full example of setting up the MultiTDRCManager (based on the v2-sample_data). An example of using the MultiTDRCManager can be followed throughout implementation in TDRCTechDemoInteraction.cs.

In practice, one should (1) ensure that you have a GameObject with MultiTDRCManager as a component attached in your scene, and (2) add references of type ThreeDimRadarChartInterface to the MultiTDRCManager after the 3D Radar Chart's initialization (see section above). A minimalistic example would be as follows:

// (1) set up (and attach) required references for hanlding Multiple 3D Radar Charts in the Scene
MultiTDRCManager multiTDRCManager = this.gameObject.AddComponent<MultiTDRCManager>();
multiTDRCManager.tdrcParent = this.transform;

// ... instantiate and initialize a new ThreeDimRadarChartInterface

// (2) add TDRCInterface reference to MultiTDRCManager
multiTDRCManager.addTDRCInterfaceWithName(demo_TDRCInterface.name, demo_TDRCInterface);

Interaction: Keyboard

For an extensive example of keyboard and mouse interaction, please refer directly to the TDRCTechDemoInteraction.cs file. It contains documentation to trigger the various features of the 3D Radar Chart implementation through keyboard input. Some basic mouse interaction has been implemented for convenience to manipulate the application's camera in a non-immersive setup.

Interaction: Leap Motion

Configure ThreeDimRadarChartInterface to enable Leap Motion Interaction

Generally, follow the overall flow of instantiation, configuration, and initialization of the ThreeDimRadarChartInterface.cs as described above, under consideration of the following two edits:

// (1) The main camera needs to be set up to refer to the VR headset's camera in the Inspector, e.g., ... "[Camera Rig] -> Camera (head) -> Camera (eye)" in case of using the provided SteamVR assets
public Camera mainCamera;	// reference to the scene's main VR camera

// (2) AFTER instantiation _AND_ BEFORE INITIALIZATION: turn on support for Leap Motion interaction
demo_TDRCInterface.cnfgVRLM_isEnabled = true;

Additional scaling and offset configurations for the various interactive elements of a 3D Radar Chart may be applied, e.g., for the Activation Toggle, Rotation Handle, or Filter and Reconfiguration Handle (please refer to the Demo_3DRadarChart_v2.cs example file).

VirtualRealityLeapMotionInterface.cs

The VirtualRealityLeapMotionInterface.cs script, attached as a component to the VRLM_Player prefab, functions as the main interface for all VR and Leap Motion (LM) related interactions. Please use this script as a starting point in order to gain further insights in its implementation.

Further documentation

All Unity scripts in this project are well documented directly within the source code. Please refer to the individual scripts to gain a better understanding of the implementation in detail.

Additionally, the following Scenes are provided for demonstrative purposes:

• 3DRadarChart-v2-keyboard_and_mouse: Basic, non-immersive setup.
• 3DRadarChart-v2-vrlm: Extended setup to support VR and Leap Motion interaction.

For both provided Scenes, please have a look into the Demo_3DRadarChart_v2.cs script, as well as their scene configuration in the Unity Inspector, to gain a practical insights.

Quickstart guide

In order to setup a new Unity project and try the provided demo scene (keyboard_and_mouse), simply follow these steps:

1. Create a new Unity project using the normal 3D template, preferably using Unity version 2019.2.x or higher.
2. Import all contents of the downloaded nicoversity-unity_3dradarchart-v2-keyboard_and_mouse.unitypackage package, by navigating to Assets -- Import Package -- Custom Package... in your Unity menu, and selected the package.
3. Once the import is complete, open the demo scene by navigating to the Assets/nicoversity/threedimradarchart/_scenes/ directory in your Unity project, and open 3DRadarChart-v2-keyboard_and_mouse.unity.
4. Push the Play button in Unity, and initialize five 3D Radar Charts from the provided ``v2-sample_dataexample by pressing theQ` key on your keyboard. Note: The GameObjects representing the newly created 3D Radar Charts are named `Location_N`, and attached as a Child GameObject to `Demo_3DRadarChart_v2` in the Scene Hierarchy.
5. Once loaded, basic keyboard and mouse interaction is possible using, among others, the following keys (for all interactive features, please refer directly to the documentation in TDRCTechDemoInteraction.cs):
   • 1--5 - Select one of the five 3D Radar Charts
   • A - Toggle focus on/off
   • Left / Right Arrow - Rotate left and right
   • Up / Down Arrow - Move Time Slice up and down in the time-series data
   • T - Iterate through time range selection states
   • Mouse button right (press + hold): Rotate the camera around the currently selected 3D Radar Chart
6. (Optional) Investigate the Demo_3DRadarChart_v2.cs script, attached to the Demo_3DRadarChart_v2 GameObject in the Scene Hierarchy. This should serve as a good starting point to investigate the implementation and provided features of a 3D Radar Chart.

In order to try the VR and Leap Motion demo setup, simply follow the steps above, but refer to the -vrlm named files. Considering you are using a HTC Vive with a Leap Motion controller attached, and have the appropriate firmware installed (see Dependencies), it should work out of the box.

Media

Screenshots - Extended (VR and Leap Motion Interaction)

VR and Leap Motion Setup - Time Slice Interaction

VR and Leap Motion Setup - Time Range Selection

VR and Leap Motion Setup - Time Range Selected

VR and Leap Motion Setup - Data Variable Sort

VR and Leap Motion Setup - Data Variable Filter

VR and Leap Motion Setup - Target-based Travel

Annotated, interactive 360 degree web viewer (v1)

As part of my work within our university's research group, an annotated, interactive 360 degree web viewer is available online, demonstrating immersive visualization and interaction with the 3D Radar Chart: vrxar.lnu.se/apps/radartimeui-360/

Note 1: The Annotation Menu button of the right-hand menu is not part of the project presented here.

Note 2: This web application illustrates the original 3D Radar Chart implementation v1, as described in Reski et al. (2020).

Video demos

A video illustrating the extended 3D Radar Chart v2 as described in Reski et al. (2024) is available online as part of the publication's supplemental material: doi:10.1007/s10055-023-00913-w

A video illustrating the initial 3D Radar Chart v1 as described in Reski et al. (2020) is available online: vimeo.com/393378221

Note (v1): The Annotation Menu button of the right-hand menu is not part of the project presented here.

License

MIT License, see LICENSE.md