Iris Graph

This 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 my 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.

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bryik/aframe-bmfont-text-component/dist/aframe-bmfont-text-component.min.js"></script>
<script src=".hidden.aframe-scatter-component.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mayognaise/aframe-mouse-cursor-component/1a97aa333f3fe29608a76025b169df64e14c0d2f/dist/aframe-mouse-cursor-component.min.js"></script>

<a-scene antialias='true'>

<a-entity position="0 1.8 3">
    <a-entity camera look-controls wasd-controls mouse-cursor></a-entity>
  </a-entity>

<a-entity position="-1.5 3 0">
    <a-entity bmfont-text="text: Comparison of Three Species of Iris"></a-entity>
  </a-entity>

<a-entity position="-2.5 1 1" scale="0.8 0.8 0.8">
    <a-entity bmfont-text="text: Iris-setosa">
      <a-sphere radius="0.03" color="red" position="-0.1 0.05 0"></a-sphere>
    </a-entity>
    <a-entity bmfont-text="text: Iris-versicolor" position="0 0.5 0">
      <a-sphere radius="0.03" color="blue" position="-0.1 0.05 0"></a-sphere>
    </a-entity>
    <a-entity bmfont-text="text: Iris-virginica" position="0 1 0">
      <a-sphere radius="0.03" color="green" position="-0.1 0.05 0"></a-sphere>
    </a-entity>
  </a-entity>

<a-entity position="0 0.5 0"
            graph="csv:iris.csv;
            width: 2;
            height: 2;
            depth: 2">
  </a-entity>

<a-sky color="#ECECEC"></a-sky>
</a-scene>

Updated missing url https://rawgit.com/bryik/aframe-bmfont-text-component/master/dist/aframe-bmfont-text-component.min.js to https://cdn.jsdelivr.net/gh/bryik/aframe-bmfont-text-component/dist/aframe-bmfont-text-component.min.js

Updated missing url https://cdn.rawgit.com/mayognaise/aframe-mouse-cursor-component/1a97aa333f3fe29608a76025b169df64e14c0d2f/dist/aframe-mouse-cursor-component.min.js to https://cdn.jsdelivr.net/gh/mayognaise/aframe-mouse-cursor-component/1a97aa333f3fe29608a76025b169df64e14c0d2f/dist/aframe-mouse-cursor-component.min.js

https://aframe.io/releases/0.3.0/aframe.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js

https://rawgit.com/bryik/aframe-bmfont-text-component/master/dist/aframe-bmfont-text-component.min.js

https://cdn.rawgit.com/mayognaise/aframe-mouse-cursor-component/1a97aa333f3fe29608a76025b169df64e14c0d2f/dist/aframe-mouse-cursor-component.min.js