Skip to content

Instantly share code, notes, and snippets.

@bryik

bryik/.block

Last active July 13, 2017 02:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bryik/1a4d7eab9512400de3c03086f03016c8 to your computer and use it in GitHub Desktop.
Save bryik/1a4d7eab9512400de3c03086f03016c8 to your computer and use it in GitHub Desktop.
Download ZIP
Iris Graph
Raw
.block
license: mit
Raw
.hidden.aframe-scatter-component.js
AFRAME.registerComponent('graph', {
schema: {
csv: {
type: 'string'
},
id: {
type: 'int',
default: '0'
},
width: {
type: 'number',
default: 1
},
height: {
type: 'number',
default: 1
},
depth: {
type: 'number',
default: 1
}
},
/**
* Called once when component is attached. Generally for initial setup.
*/
update: function () {
// Entity data
var el = this.el;
var object3D = el.object3D;
var data = this.data;
var width = data.width;
var height = data.height;
var depth = data.depth;
// These will be used to set the range of the axes' scales
var xRange = [0, width];
var yRange = [0, height];
var zRange = [0, -depth];
/**
* Create origin point.
* This gives a solid reference point for scaling data.
* It is positioned at the vertex of the left grid and bottom grid (towards the front).
*/
var originPointPosition = (-width / 2) + ' 0 ' + (depth / 2);
var originPointID = 'originPoint' + data.id;
d3.select(el).append('a-entity')
.attr('id', originPointID)
.attr('position', originPointPosition);
// Create graphing area out of three textured planes
var grid = gridMaker(width, height, depth);
object3D.add(grid);
// Label axes
var xLabelPosition = (width / 3.2) + ' ' + '-0.1' + ' ' + '0';
d3.select('#' + originPointID)
.append('a-entity')
.attr('id', 'x')
.attr('bmfont-text', 'text: Sepal Length (cm)')
.attr('position', xLabelPosition);
var yLabelPosition = (width + 0.05) + ' ' + (height / 2.2) + ' ' + (-depth);
d3.select('#' + originPointID)
.append('a-entity')
.attr('id', 'y')
.attr('bmfont-text', 'text: Petal Length (cm)')
.attr('position', yLabelPosition);
var zLabelPosition = (width + 0.02) + ' ' + '-0.05' + ' ' + (-depth / 2);
d3.select('#' + originPointID)
.append('a-entity')
.attr('id', 'z')
.attr('bmfont-text', 'text: Sepal Width (cm)')
.attr('position', zLabelPosition);
if (data.csv) {
/* Plot data from CSV */
var originPoint = d3.select('#originPoint' + data.id);
// Needed to assign species a color
var cScale = d3.scale.ordinal()
.domain(["Iris-virginica", "Iris-versicolor", "Iris-setosa"])
.range(["green", "blue", "red"]);
// Convert CSV data from string to number
d3.csv(data.csv, function (data) {
data.forEach(function (d) {
d.color = cScale(d.Species)
});
plotData(data);
});
var plotData = function (data) {
// Scale x, y, and z values
var xExtent = d3.extent(data, function (d) { return d.SepalLengthCm; });
var xScale = d3.scale.linear()
.domain(xExtent)
.range([xRange[0], xRange[1]])
.clamp('true');
var yExtent = d3.extent(data, function (d) { return d.PetalLengthCm; });
var yScale = d3.scale.linear()
.domain(yExtent)
.range([yRange[0], yRange[1]]);
var zExtent = d3.extent(data, function (d) { return d.SepalWidthCm; });
var zScale = d3.scale.linear()
.domain(zExtent)
.range([zRange[0], zRange[1]]);
// Append data to graph and attach event listeners
originPoint.selectAll('a-sphere')
.data(data)
.enter()
.append('a-sphere')
.attr('radius', 0.03)
.attr('color', function(d) {
return d.color;
})
.attr('position', function (d) {
return xScale(d.SepalLengthCm) + ' ' + yScale(d.PetalLengthCm) + ' ' + zScale(d.SepalWidthCm);
})
.on('mouseenter', mouseEnter);
/**
* Event listener adds and removes data labels.
* "this" refers to sphere element of a given data point.
*/
function mouseEnter () {
// Get data
var data = this.__data__;
// Get width of graphBox (needed to set label position)
var graphBoxEl = this.parentElement.parentElement;
var graphBoxData = graphBoxEl.components.graph.data;
var graphBoxWidth = graphBoxData.width;
// Look for an existing label
var oldLabel = d3.select('#tempDataLabel');
var oldLabelParent = oldLabel.select(function () { return this.parentNode; });
// Look for an existing beam
var oldBeam = d3.select('#tempDataBeam');
// Look for an existing background
var oldBackground = d3.select('#tempDataBackground');
// If there is no existing label, make one
if (oldLabel[0][0] === null) {
labelMaker(this, graphBoxWidth);
} else {
// Remove old label
oldLabel.remove();
// Remove beam
oldBeam.remove();
// Remove background
oldBackground.remove();
// Create new label
labelMaker(this, graphBoxWidth);
}
}
};
}
}
});
/* HELPER FUNCTIONS */
/**
* planeMaker() creates a plane given width and height (kind of).
* It is used by gridMaker().
*/
function planeMaker (horizontal, vertical) {
// Controls texture repeat for U and V
var uHorizontal = horizontal * 4;
var vVertical = vertical * 4;
// Load a texture, set wrap mode to repeat
var texture = new THREE.TextureLoader().load('https://cdn.rawgit.com/bryik/aframe-scatter-component/master/assets/grid.png');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.anisotropy = 16;
texture.repeat.set(uHorizontal, vVertical);
// Create material and geometry
var material = new THREE.MeshBasicMaterial({map: texture, side: THREE.DoubleSide});
var geometry = new THREE.PlaneGeometry(horizontal, vertical);
return new THREE.Mesh(geometry, material);
}
/**
* gridMaker() creates a graphing box given width, height, and depth.
* The textures are also scaled to these dimensions.
*
* There are many ways this function could be improved or done differently
* e.g. buffer geometry, merge geometry, better reuse of material/geometry.
*/
function gridMaker (width, height, depth) {
var grid = new THREE.Object3D();
// AKA bottom grid
var xGrid = planeMaker(width, depth);
xGrid.rotation.x = 90 * (Math.PI / 180);
grid.add(xGrid);
// AKA far grid
var yPlane = planeMaker(width, height);
yPlane.position.y = (0.5) * height;
yPlane.position.z = (-0.5) * depth;
grid.add(yPlane);
// AKA side grid
var zPlane = planeMaker(depth, height);
zPlane.position.x = (-0.5) * width;
zPlane.position.y = (0.5) * height;
zPlane.rotation.y = 90 * (Math.PI / 180);
grid.add(zPlane);
return grid;
}
/**
* labelMaker() creates a label for a given data point and graph height.
* dataEl - A data point's element.
* graphBoxWidth - The width of the graph.
*/
function labelMaker (dataEl, graphBoxWidth) {
var dataElement = d3.select(dataEl);
// Retrieve original data
var dataValues = dataEl.__data__;
// Create individual x, y, and z labels using original data values
// round to 1 decimal space (should use d3 format for consistency later)
var sepalLength = 'Sepal length (cm): ' + dataValues.SepalLengthCm + '\n \n';
var petalLength = 'Petal length (cm): ' + dataValues.PetalLengthCm + '\n \n';
var sepalWidth = 'Sepal width (cm): ' + dataValues.SepalWidthCm;
var labelText = 'text: ' + sepalLength + petalLength + sepalWidth;
// Position label right of graph
var padding = 0.2;
var sphereXPosition = dataEl.getAttribute('position').x;
var labelXPosition = (graphBoxWidth + padding) - sphereXPosition;
var labelPosition = labelXPosition + ' -0.43 0';
// Add pointer
var beamWidth = labelXPosition;
// The beam's pivot is in the center
var beamPosition = (labelXPosition - (beamWidth / 2)) + '0 0';
dataElement.append('a-box')
.attr('id', 'tempDataBeam')
.attr('height', '0.01')
.attr('width', beamWidth)
.attr('depth', '0.01')
.attr('color', 'purple')
.attr('position', beamPosition);
// Add label
dataElement.append('a-entity')
.attr('id', 'tempDataLabel')
.attr('bmfont-text', labelText)
.attr('position', labelPosition);
var backgroundPosition = (labelXPosition + 1.15) + ' 0.02 -0.1';
// Add background card
dataElement.append('a-plane')
.attr('id', 'tempDataBackground')
.attr('width', '2.3')
.attr('height', '1.3')
.attr('color', '#ECECEC')
.attr('position', backgroundPosition);
}
Raw
readme.md

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.

Raw
index.html
<!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://rawgit.com/bryik/aframe-bmfont-text-component/master/dist/aframe-bmfont-text-component.min.js"></script>
<script src=".hidden.aframe-scatter-component.js"></script>
<script src="https://cdn.rawgit.com/mayognaise/aframe-mouse-cursor-component/1a97aa333f3fe29608a76025b169df64e14c0d2f/dist/aframe-mouse-cursor-component.min.js"></script>
<a-scene antialias='true'>
<!-- Camera -->
<a-entity position="0 1.8 3">
<a-entity camera look-controls wasd-controls mouse-cursor></a-entity>
</a-entity>
<!-- 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 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>
Raw
iris.csv
Id SepalLengthCm SepalWidthCm PetalLengthCm PetalWidthCm Species
1 5.1 3.5 1.4 0.2 Iris-setosa
2 4.9 3.0 1.4 0.2 Iris-setosa
3 4.7 3.2 1.3 0.2 Iris-setosa
4 4.6 3.1 1.5 0.2 Iris-setosa
5 5.0 3.6 1.4 0.2 Iris-setosa
6 5.4 3.9 1.7 0.4 Iris-setosa
7 4.6 3.4 1.4 0.3 Iris-setosa
8 5.0 3.4 1.5 0.2 Iris-setosa
9 4.4 2.9 1.4 0.2 Iris-setosa
10 4.9 3.1 1.5 0.1 Iris-setosa
11 5.4 3.7 1.5 0.2 Iris-setosa
12 4.8 3.4 1.6 0.2 Iris-setosa
13 4.8 3.0 1.4 0.1 Iris-setosa
14 4.3 3.0 1.1 0.1 Iris-setosa
15 5.8 4.0 1.2 0.2 Iris-setosa
16 5.7 4.4 1.5 0.4 Iris-setosa
17 5.4 3.9 1.3 0.4 Iris-setosa
18 5.1 3.5 1.4 0.3 Iris-setosa
19 5.7 3.8 1.7 0.3 Iris-setosa
20 5.1 3.8 1.5 0.3 Iris-setosa
21 5.4 3.4 1.7 0.2 Iris-setosa
22 5.1 3.7 1.5 0.4 Iris-setosa
23 4.6 3.6 1.0 0.2 Iris-setosa
24 5.1 3.3 1.7 0.5 Iris-setosa
25 4.8 3.4 1.9 0.2 Iris-setosa
26 5.0 3.0 1.6 0.2 Iris-setosa
27 5.0 3.4 1.6 0.4 Iris-setosa
28 5.2 3.5 1.5 0.2 Iris-setosa
29 5.2 3.4 1.4 0.2 Iris-setosa
30 4.7 3.2 1.6 0.2 Iris-setosa
31 4.8 3.1 1.6 0.2 Iris-setosa
32 5.4 3.4 1.5 0.4 Iris-setosa
33 5.2 4.1 1.5 0.1 Iris-setosa
34 5.5 4.2 1.4 0.2 Iris-setosa
35 4.9 3.1 1.5 0.1 Iris-setosa
36 5.0 3.2 1.2 0.2 Iris-setosa
37 5.5 3.5 1.3 0.2 Iris-setosa
38 4.9 3.1 1.5 0.1 Iris-setosa
39 4.4 3.0 1.3 0.2 Iris-setosa
40 5.1 3.4 1.5 0.2 Iris-setosa
41 5.0 3.5 1.3 0.3 Iris-setosa
42 4.5 2.3 1.3 0.3 Iris-setosa
43 4.4 3.2 1.3 0.2 Iris-setosa
44 5.0 3.5 1.6 0.6 Iris-setosa
45 5.1 3.8 1.9 0.4 Iris-setosa
46 4.8 3.0 1.4 0.3 Iris-setosa
47 5.1 3.8 1.6 0.2 Iris-setosa
48 4.6 3.2 1.4 0.2 Iris-setosa
49 5.3 3.7 1.5 0.2 Iris-setosa
50 5.0 3.3 1.4 0.2 Iris-setosa
51 7.0 3.2 4.7 1.4 Iris-versicolor
52 6.4 3.2 4.5 1.5 Iris-versicolor
53 6.9 3.1 4.9 1.5 Iris-versicolor
54 5.5 2.3 4.0 1.3 Iris-versicolor
55 6.5 2.8 4.6 1.5 Iris-versicolor
56 5.7 2.8 4.5 1.3 Iris-versicolor
57 6.3 3.3 4.7 1.6 Iris-versicolor
58 4.9 2.4 3.3 1.0 Iris-versicolor
59 6.6 2.9 4.6 1.3 Iris-versicolor
60 5.2 2.7 3.9 1.4 Iris-versicolor
61 5.0 2.0 3.5 1.0 Iris-versicolor
62 5.9 3.0 4.2 1.5 Iris-versicolor
63 6.0 2.2 4.0 1.0 Iris-versicolor
64 6.1 2.9 4.7 1.4 Iris-versicolor
65 5.6 2.9 3.6 1.3 Iris-versicolor
66 6.7 3.1 4.4 1.4 Iris-versicolor
67 5.6 3.0 4.5 1.5 Iris-versicolor
68 5.8 2.7 4.1 1.0 Iris-versicolor
69 6.2 2.2 4.5 1.5 Iris-versicolor
70 5.6 2.5 3.9 1.1 Iris-versicolor
71 5.9 3.2 4.8 1.8 Iris-versicolor
72 6.1 2.8 4.0 1.3 Iris-versicolor
73 6.3 2.5 4.9 1.5 Iris-versicolor
74 6.1 2.8 4.7 1.2 Iris-versicolor
75 6.4 2.9 4.3 1.3 Iris-versicolor
76 6.6 3.0 4.4 1.4 Iris-versicolor
77 6.8 2.8 4.8 1.4 Iris-versicolor
78 6.7 3.0 5.0 1.7 Iris-versicolor
79 6.0 2.9 4.5 1.5 Iris-versicolor
80 5.7 2.6 3.5 1.0 Iris-versicolor
81 5.5 2.4 3.8 1.1 Iris-versicolor
82 5.5 2.4 3.7 1.0 Iris-versicolor
83 5.8 2.7 3.9 1.2 Iris-versicolor
84 6.0 2.7 5.1 1.6 Iris-versicolor
85 5.4 3.0 4.5 1.5 Iris-versicolor
86 6.0 3.4 4.5 1.6 Iris-versicolor
87 6.7 3.1 4.7 1.5 Iris-versicolor
88 6.3 2.3 4.4 1.3 Iris-versicolor
89 5.6 3.0 4.1 1.3 Iris-versicolor
90 5.5 2.5 4.0 1.3 Iris-versicolor
91 5.5 2.6 4.4 1.2 Iris-versicolor
92 6.1 3.0 4.6 1.4 Iris-versicolor
93 5.8 2.6 4.0 1.2 Iris-versicolor
94 5.0 2.3 3.3 1.0 Iris-versicolor
95 5.6 2.7 4.2 1.3 Iris-versicolor
96 5.7 3.0 4.2 1.2 Iris-versicolor
97 5.7 2.9 4.2 1.3 Iris-versicolor
98 6.2 2.9 4.3 1.3 Iris-versicolor
99 5.1 2.5 3.0 1.1 Iris-versicolor
100 5.7 2.8 4.1 1.3 Iris-versicolor
101 6.3 3.3 6.0 2.5 Iris-virginica
102 5.8 2.7 5.1 1.9 Iris-virginica
103 7.1 3.0 5.9 2.1 Iris-virginica
104 6.3 2.9 5.6 1.8 Iris-virginica
105 6.5 3.0 5.8 2.2 Iris-virginica
106 7.6 3.0 6.6 2.1 Iris-virginica
107 4.9 2.5 4.5 1.7 Iris-virginica
108 7.3 2.9 6.3 1.8 Iris-virginica
109 6.7 2.5 5.8 1.8 Iris-virginica
110 7.2 3.6 6.1 2.5 Iris-virginica
111 6.5 3.2 5.1 2.0 Iris-virginica
112 6.4 2.7 5.3 1.9 Iris-virginica
113 6.8 3.0 5.5 2.1 Iris-virginica
114 5.7 2.5 5.0 2.0 Iris-virginica
115 5.8 2.8 5.1 2.4 Iris-virginica
116 6.4 3.2 5.3 2.3 Iris-virginica
117 6.5 3.0 5.5 1.8 Iris-virginica
118 7.7 3.8 6.7 2.2 Iris-virginica
119 7.7 2.6 6.9 2.3 Iris-virginica
120 6.0 2.2 5.0 1.5 Iris-virginica
121 6.9 3.2 5.7 2.3 Iris-virginica
122 5.6 2.8 4.9 2.0 Iris-virginica
123 7.7 2.8 6.7 2.0 Iris-virginica
124 6.3 2.7 4.9 1.8 Iris-virginica
125 6.7 3.3 5.7 2.1 Iris-virginica
126 7.2 3.2 6.0 1.8 Iris-virginica
127 6.2 2.8 4.8 1.8 Iris-virginica
128 6.1 3.0 4.9 1.8 Iris-virginica
129 6.4 2.8 5.6 2.1 Iris-virginica
130 7.2 3.0 5.8 1.6 Iris-virginica
131 7.4 2.8 6.1 1.9 Iris-virginica
132 7.9 3.8 6.4 2.0 Iris-virginica
133 6.4 2.8 5.6 2.2 Iris-virginica
134 6.3 2.8 5.1 1.5 Iris-virginica
135 6.1 2.6 5.6 1.4 Iris-virginica
136 7.7 3.0 6.1 2.3 Iris-virginica
137 6.3 3.4 5.6 2.4 Iris-virginica
138 6.4 3.1 5.5 1.8 Iris-virginica
139 6.0 3.0 4.8 1.8 Iris-virginica
140 6.9 3.1 5.4 2.1 Iris-virginica
141 6.7 3.1 5.6 2.4 Iris-virginica
142 6.9 3.1 5.1 2.3 Iris-virginica
143 5.8 2.7 5.1 1.9 Iris-virginica
144 6.8 3.2 5.9 2.3 Iris-virginica
145 6.7 3.3 5.7 2.5 Iris-virginica
146 6.7 3.0 5.2 2.3 Iris-virginica
147 6.3 2.5 5.0 1.9 Iris-virginica
148 6.5 3.0 5.2 2.0 Iris-virginica
149 6.2 3.4 5.4 2.3 Iris-virginica
150 5.9 3.0 5.1 1.8 Iris-virginica
@aronduby
Copy link

aronduby commented Jun 3, 2017

I'm about to start working on something similiar and am curious, what made you decided to do this through d3 instead of sticking with aframe?

@bryik
Copy link
Author

bryik commented Jul 13, 2017

@aronduby D3 has a lot of useful utilities (like scales) that made things a bit easier. A-Frame and D3 can work together (to a certain degree anyway).

Sorry it took so long to reply; apparently Gist comments don't trigger notifications...and I've just realized that you're unlikely to see this for the same reason 😑

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment