aframe-data-visualisation/index.html at master · beccawilson/aframe-data-visualisation · 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
<!--
  AFRAME VR Data Visualisation Tool
    Copyright (C) 2019 Christian Garske

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
 -->
<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>aFrame Data Visualization</title>
  <meta name='DataVisTest'>
  <link rel='shortcut icon' href=''>
  <script src='https://aframe.io/releases/0.9.0/aframe.min.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
  <script src='aframe_scatterplot.js'></script>
  <script src='https://d3js.org/d3.v4.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.0/lodash.min.js'></script>
  <script src="https://unpkg.com/aframe-look-at-component@0.8.x/dist/aframe-look-at-component.min.js"></script>
</head>

<body>
  <a-scene id='scene' room teleport_tiles csv='simulated_data_2_random_2000.csv' exclude = ',value,sample_id'>
    <a-assets>
      <img id='wood' src='images/wood_seamless.png'>
      <img id='circle' src='images/white_circle.png'>
    </a-assets>
    <a-entity id='rig'>
      <a-entity id='camera' camera look-controls wasd-controls>
        <a-entity id='cursor'
          animation__click='property: scale; startEvents: click; easing: easeInCubic; dur: 150; from: 0.5 0.5 0.5; to: 1 1 1'
          animation__fusing='property: scale; startEvents: fusing; easing: easeInCubic; dur: 1500; from: 1 1 1; to: 0.5 0.5 0.5'
          animation__mouseleave='property: scale; startEvents: mouseleave; easing: easeInCubic; dur: 500; to: 1 1 1'
          raycaster='objects: .clickable,.data_click' cursor='fuse:true' position='0 0 -1'
          geometry='primitive:ring; radiusInner:0.02; radiusOuter:0.03'
          material='color:black; shader:flat'>
        </a-entity>
      </a-entity>
    </a-entity>

    <a-plane id='ceiling' color='skyblue' position='0 8 0' height='20' width='20' rotation='-270 0 0'></a-plane>
    <a-plane id='floor' src='#wood' position='0 -5 0' height='20' width='20' repeat='10 10' rotation='-90 0 0'>
    </a-plane>
  </a-scene>
</body>

</html>