Egocentric VR

• settingsSettings - click here to see how to setup the demo!

  Graph

  You can just leave it blank to use our example graph or you can upload and explore your own graph. The graph can be uploaded in two different formats:

  • (1) Nodes & edges lists
    The graph has to be stored in two separate .csv files (each < 2MB), a nodes list and an edge list in the following formats:

    Nodes list:

    id,weight,desc
    nodeId1,1.1,node description 1
    nodeId2,1.1,node description 2
    ...
                                

    weight and desc are optional.

    Edges list:

    source,target,weight,desc
    nodeId1,nodeId2,1.1,link description 1
    ...
                                

    weight and desc are optional.

  • (2) JSON file
    The graph has to be stored in a .json file (< 2MB) in the following format:

    {
        "nodes":[
            {
                "id":"nodeId1"
            },
            {
                "id":"nodeId2"
            },
            ...
        ],
        "links":[
            {
                "source":"nodeId1",
                "target":"nodeId2",
                "linkwidth":"1.1"
            },
            ...
        ]
    }

    Optionally you can add a weight, a description (desc), a color (disabled, if you enabled distance encoding), a position (x, y, z) and times for time series to nodes.
    Optionally you can also add a label, a color (disabled, if you enabled distance encoding) and times for time series to links:

    {
        "nodes":[
            {
                ...,
                "weight":1.1,
                "desc":"node description 1",
                "color":"rgb(219, 255, 207)",
                "x":1.18,
                "y":-35.17,
                "z":-158.96,
                "times":["1","2","5"]
            },
            ...
        ],
        "links":[
            {
                ...,
                "label":"node description 1",
                "color":"rgb(219, 255, 207)",
                "times":["2","5"]
            },
            ...
        ]
    }

  Additional Settings

  Condition Choose one of the three conditions: Baseline, Ego-Highlight or Ego-Bubble

  The following options were not available during the user study. We implemented them after receiving feedback from the study.

  Skybox Shows a skybox around the graph to help you to keep the orientation.
  photo credit: Sitoo Serra del Cavall Bernat, Pollença, Mallorca via photopin (license)

  Permanent selection Allows you to permanently select a node and keep it and its direct neighbors highlighted. To do this hover with the laser (or mouse in non-VR mode) over a node and wait until the ring around the node is filled up. To deselect, hover over the node again and wait until the white ring is completely gone.

  Distance encoding Nodes and links are darkened depending on their geodesic distance to the current node.

  Node degree info attached to the controller A label with information about the node degree of the current node is attached to the controller.

  Allow free flying Allows you to freely fly within the graph using the directional pad of your VR controller (or WASD on the keyboard). This setting has an effect on the Ego-Highlight and Ego-Bubble conditions only because it is enabled in the Fly-Through conditions per definition.

  Smooth transition between overview and detail perspective Switching between the overview and the detail perspective results in a smooth transition.

• help_outlineControls - click here to see how to use the demo!
  
  

  Laser

  With the laser-pointer you can hover on graph elements to inspect details and highlight direct neighbors.
  In demo V2 you will see a white ring evolving around nodes while hovering. Once the ring is complete, the node is permanently selected. To clear the selection, hover on the node again and wait until the ring is removed completely.
  
  If you don't have a HTC Vive VR Device, the cursor in the center of the screen is the equivalent to the laser-pointer. Use the mouse to look around.
  
  

  Switch perspective

  Overview perspective ➜ Detail perspective

  Press the trigger (C) or the left mouse button while hovering on graph element. The detail perspective camera moves to the selected entry point.
  Press the trigger (C) or the left mouse button while hovering over perspective camera to switch to the detail perspective.

  Detail perspective ➜ Overview perspective

  The green arrow in the top left corner of your view (in VR only) points to the overview camera.
  Hover on the green arrow and press the trigger (C) to switch back to the overview perspective.
  
  Alternatively press the trigger (C) or the left mouse button while hovering on the overview camera to switch to the overview perspective.
  
  

  Navigation

  Overview perspective

  You can rotate the graph with the directional pad (A).
  
  Use the keys (W A S D) on the keyboard in non-VR mode.

  Detail perspective

  Freely fly through the graph using the D-pad (A).
  Press the trigger (C) while hovering on a node or edge to fly to the selected element.
  
  Use the keys [W A S D] on the keyboard in non-VR mode to freely fly through the graph and use the left mouse button to directly fly to a selected element.
  
  

  Temporal navigation

  Press and hold the side-button (B) while using the left/right input axis of the D-pad (A) to slide through different time steps (indicated by a time axis appearing on top of the laser pointer).
  
  Pressing the key [Q] and [E] on the keyboard has the same effect.
  
  

  History of visited nodes

  If you switch back from the detail perspective to the overview perspective you will see the path you took through the graph. The nodes you visited in the detail perspective will be highlighted.
  
  You can use the laser and trigger (C) on the yellow icon in the upper left corner of your view to toggle the highlighting of the visited nodes (in VR only).
  
  In non-VR mode press the key [V] on the keyboard to toggle the highlighting.