D3 Examples - Iris Graph

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

xxxxxxxxxx
 
<!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/dist/aframe-mouse-cursor-component.min.js"></script>
<script src="./aframe-orbit-controls-component.min.js"></script>
<a-scene antialias='true'>
​
  <!-- Camera -->
  
  
<!-- CAMERA START --> 
    <a-entity
        id="camera"
        camera
        position="0 5 5"
        orbit-controls="
            autoRotate: false;
            target: #plot1;
            enabled: true;
            enableDamping: true;
            enablePan: true;
            dampingFactor: 0.125;
            rotateSpeed:0.25;
            minDistance:0;
            maxDistance:100;"
        mouse-cursor="">
    </a-entity>
<!-- CAMERA ENDS -->
​
  <!-- Title -->
  <a-entity position="-1.5 3 0">
    <a-entity bmfont-text="text: Comparison of Three Species of Iris"></a-entity>
  </a-entity>
​
  <!-- Legend -->
  <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>
​
  <!-- Graph -->
  <a-entity id="plot1" 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>
​
    