a-plotter/template.html at master · HarryBrisson/a-plotter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<html>

	<head>
		<script src="https://d3js.org/d3.v4.min.js"></script>
		<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
	</head>

	<body>
		<a-scene>

			<!-- room dimensions // colors from https://javier.xyz/cohesive-colors/ -->
			<a-plane height="5" width="5" length="5" position="0 0 -2.5" rotation="0 0 0" color="#555E7B" opacity=.8></a-plane><!-- north wall -->
			<a-plane height="5" width="5" length="5" position="0 0 2.5" rotation="0 -180 0" color="#B7D968" opacity=.8></a-plane><!-- south wall -->
			<a-plane height="5" width="5" length="5" position="-2.5 0 0" rotation="0 90 0" color="#B576AD" opacity=.8></a-plane><!-- west wall -->
			<a-plane height="5" width="5" length="5" position="2.5 0 0" rotation="0 -90 0" color="#E04644" opacity=.8></a-plane><!-- east wall -->
			<a-plane height="5" width="5" length="5" position="0 -2.5 0" rotation="-90 0 0" color="#FDE47F" opacity=.8></a-plane><!-- floor -->
			<a-plane height="5" width="5" length="5" position="0 2.5 0" rotation="90 0 0" color="#7CCCE5" opacity=.8></a-plane><!-- ceiling -->

			<!-- need to add labels -->

			<!-- viewer -->
			<a-entity position="0 -2 0" rotation="0 0 0">
				<a-camera look-controls wasd-controls="fly:true"></a-camera>
			</a-entity>

		</a-scene>

		<script>

			// data plugged in by app.py
			d = INSERT_DATA_HERE

			// variable names plugged in by app.py
			xVar = INSERT_X_HERE
			yVar = INSERT_Y_HERE
			zVar = INSERT_Z_HERE

			// eventually want to transition to a dictionary structure
			vList = [xVar, yVar, zVar]

			// convert to variables to numeric
			for (i=0;i<vList.length;i++) {
				v = vList[i];
				for (r=0;r<d.length;r++) {
					d[r][v] = +d[r][v]
				}
			}

			// create linear scales
			xScale = d3.scaleLinear().range([-2,2]).domain(d3.extent(d, d => d[xVar]))
			yScale = d3.scaleLinear().range([-2,2]).domain(d3.extent(d, d => d[yVar]))
			zScale = d3.scaleLinear().range([-2,2]).domain(d3.extent(d, d => d[zVar]))

			// create cubes for each channel
			d3.select("a-scene").selectAll(".dataCube")
					.data(d)
				.enter().append("a-box")
					.attr('class','dataCube')
					.attr('height','.4')
					.attr('depth','.4')
					.attr('width','.4')
					.attr('opacity','.8')
					.attr('position', d => xScale(d[xVar]) + " " + yScale(d[yVar]) + " " + zScale(d[zVar]))
					.attr('src', d => d['img'])

		</script>

	</body>

</html>