aframe-babia-components
Version:
A data visualization set of components for A-Frame.
43 lines (34 loc) • 1.82 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.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.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="mjson" babia-queryjson="url: commits.json"></a-entity>
<a-entity id="mid"
babia-selector="from: mjson"
babia-bars='legend: true; axis: true; palette: commerce;
height: commits; index: author;
title: babia-bars; 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 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>
</body>
</html>