a roomscale scatterplot targeting the HTC Vive
to enjoy this experience on the Vive, follow the instructions at https://webvr.info/ to download and install an experimental browser build that supports WebVR. from there, click the Enter VR HMD icon on the bottom right corner of the browser window to enter the scene.
for reference, this experience was developed on the Aug 29 2016 version 55.0.2842.0 build of Chromium with the flags --enable-webvr and --enable-gamepad-extensions
to explore the scene on a 2D screen, open in a new tab and then hold the S key until the scatterplot and legend come into view. from there you can navigate using the W A S D keys and look by clicking and dragging with the mouse
an iteration on the #aframevr + #d3js Iris Graph from @bryik_ws
featuring the famous Iris Dataset
for more A-Frame + D3 experiments
search for aframe on blockbuilder search
http://blockbuilder.org/search#text=aframe
for earlier iterations of this example and a nice unified commit history, visit the roomscale-scatter repo on github
added ="fly: true" so that you can look with the mouse and press w to travel up or down in the scene
now there’s a better user experience when experiencing this scene on a 2D screen with wasd-controls
<!-- Camera -->
<a-entity camera look-controls wasd-controls="fly: true"></a-entity>hat tip to @miquael + @donrmccurdy for suggesting this improvement
README.mdThis is a proof-of-concept 3D visualization of Fisher’s Iris data set. There is a lot of room for improvement, but it’s neat to “walk” around the plot with the WASD keys and highlight data points using the mouse. An HMD friendly variant could be created by swapping out the mouse-cursor component for a standard gaze-cursor (for Google Cardboard) or vive-cursor (for HTC Vive).
It was built using a customized version of the aframe-scatter-component. The component source is hidden because the code is a bit long and gory, check the Gist if you must.
Note: click the display once before trying to move with WASD.