aframe-babia-components
Version:
A data visualization set of components for A-Frame.
81 lines (70 loc) • 4.02 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>A-Frame Babia components</title>
<meta name="description" content="Babia Bars example." />
<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="../../../dist/aframe-babia-components.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.0.0/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>
</head>
<body>
<a-scene background="color: #A8F3FF" id="AframeScene">
<a-light type="point" intensity="1" position="-10 20 30"></a-light>
<a-assets>
<a-asset-item id="optimerBoldFont" src="https://rawgit.com/mrdoob/three.js/dev/examples/fonts/optimer_bold.typeface.json"></a-asset-item>
</a-assets>
<a-entity id="left"
babia-queryjson='data: [{"x_axis":"Elisea","height":10},{"x_axis":"Maria","height":5},
{"x_axis":"Dave","height":90},{"x_axis":"John","height":119}]'
babia-bars='legend: true; axis: true; palette: commerce;
title: babiaxr-simplebarchart; titleColor: #FFFFFF; titleFont: #optimerBoldFont;
titlePosition: -8.5 0.3 0.5; animation: false; chartHeight: 20; keepHeight: false;'
position="-15 0 0" rotation="0 0 0"></a-entity>
<a-entity id="mid"
babia-queryjson='data: [{"x_axis":"Elisea","height":10},{"x_axis":"Maria","height":5},
{"x_axis":"Dave","height":90},{"x_axis":"John","height":119}]'
babia-bars='legend: true; axis: true; palette: commerce;
title: babiaxr-simplebarchart; titleColor: #FFFFFF; titleFont: #optimerBoldFont;
titlePosition: -8.5 0.3 0.5; animation: true; chartHeight: 20;'
position="-7 0 0" rotation="0 0 0"></a-entity>
<a-entity id="right"
babia-queryjson='url: data1.json'
babia-bars='legend: true; axis: true; palette: commerce;
title: babiaxr-simplebarchart; titleColor: #FFFFFF; titleFont: #optimerBoldFont;
titlePosition: -8.5 0.3 0.5; animation: true; chartHeight: 20;'
position="3 0 0" rotation="0 0 0"></a-entity>
<a-entity movement-controls="fly: true" position="0 10 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>
<script>
console.log("Starting...");
window.setTimeout(function () {
console.log("Time goes by...")
leftEl = document.getElementById('left');
leftEl.setAttribute('babia-queryjson', {
'data': `[{"x_axis":"Elisea","height":20},{"x_axis":"Maria","height":5},
{"x_axis":"Dave","height":90},{"x_axis":"John","height":50}]`});
midEl = document.getElementById('mid');
midEl.setAttribute('babia-queryjson', {
'data': `[{"x_axis":"Maria","height":5}, {"x_axis":"Elisea","height":20},
{"x_axis":"Dave","height":90},{"x_axis":"John","height":50}]`});
rightEl = document.getElementById('right');
rightEl.setAttribute('babia-queryjson', {
'url': 'data2.json'});
}, 3*1000);
window.setTimeout(function () {
console.log("Time goes by...")
leftEl = document.getElementById('left');
leftEl.setAttribute('babia-queryjson', {
'data': `[{"x_axis":"Elisea","height":10},{"x_axis":"Maria","height":12},
{"x_axis":"Dave","height":90},{"x_axis":"John","height":200}]`});
}, 6*1000);
</script>
</body>
</html>