aframe-babia-components
Version:
A data visualization set of components for A-Frame.
58 lines (45 loc) • 2.56 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>A-Frame Babia components</title>
<meta name="description" content="Example babia-ui-link" />
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v7.2.0/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.3.3/dist/aframe-environment-component.min.js"></script>
<script src="https://unpkg.com/aframe-text-geometry-component@0.5.1/dist/aframe-text-geometry-component.min.js"></script>
<script src="../../../dist/aframe-babia-components.js"></script>
</head>
<body>
<a-scene background="color: #A8F3FF" id="AframeScene">
<a-entity environment="playArea: 2"></a-entity>
<a-light type="point" intensity="1" position="-10 20 30"></a-light>
<a-entity id="querier" babia-queryjson="url: ./data.json;" ></a-entity>
<a-entity id="filter" babia-filter="from: querier; filter: name2=Jesus" ></a-entity>
<a-entity id="graph"
babia-bars='from: filter; legend: true; axis: true'
position="-15 0 0" rotation="0 0 0"></a-entity>
<!-- Button outside of the entity with target-->
<a-entity babia-ui-link="viz: graph; ui: interface" position="-4.5 3 6"></a-entity>
<a-entity id="graph2"
babia-bars='from: filter; legend: true; axis: true'
position="-0.5 0 0" rotation="0 0 0"></a-entity>
<!-- Button outside of the entity without target-->
<a-entity babia-ui-link="viz: graph2" position="6 3 6"></a-entity>
<!-- Button intside of the entity without target-->
<a-entity id="graph3"
babia-bars='from: filter; legend: true; axis: true'
babia-ui-link position="-25 3 0" rotation="0 0 0"></a-entity>
<!-- Chart create babia-ui-link without target (without id)-->
<a-entity
babia-bars='from: filter; legend: true; axis: true; uiLink: true'
position="18 0 0" rotation="0 0 0"></a-entity>
<a-entity id="interface" babia-ui="target: graph" position="0 0 10" scale="0.5 0.5 0.5"></a-entity>
<a-entity movement-controls="fly: true" position="-3 5 20">
<a-entity camera position="0 0 0" look-controls></a-entity>
<a-entity cursor="rayOrigin:mouse"></a-entity>
<a-entity laser-controls="hand: right"></a-entity>
</a-entity>
</a-scene>
</body>
</html>