WebVRWorkshop/AFrame_6Chart.html at master · falbrezzi/WebVRWorkshop · 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
<head>
    <title>My A-Frame Scene</title>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-charts-component/dist/aframe-charts-component.min.js"></script>
</head>

<body>
    <a-scene background="color: grey">
        <!-- Aframe light -->
        <a-light type="point" intensity="1" position="-2 10 10"></a-light>

        <a-asset>
            <a-asset-item id="data" src='[{"x": 1, "y": 8, "z": 0, "size": 1, "color": "#ff0000"},
                {"x": -2, "y": 3, "z": 1, "size": 1.5, "color": "#00ff00"},
                {"x": -1, "y": 3, "z": 2, "size": 1, "color": "#0000ff"},
                {"x": 2, "y": 7, "z": 7, "size": 1.5, "color": "#0000ff"},
                {"x": 1, "y": 6, "z": 3, "size": 1, "color": "#4CC3D9"}]'>
            </a-asset-item>
        </a-asset>

        <!-- Aframe camera -->
        <a-entity position="2 10 14" rotation="-30 15 0">
            <a-camera position="3 -1 4" rotation="0 -1 0">
                <a-cursor></a-cursor>
            </a-camera>
        </a-entity>
        <a-entity charts="type: bubble; dataPoints: #data; axis_length: 12"></a-entity>
    </a-scene>
</body>