Nevertheless Published Mine

    aframe-babia-components

    1.1.4 • Public • Published

    Aframe-babia-components

    Version License

    Data visualization components for A-Frame.

    example

    For A-Frame.

    Important: The repository is hosted on GitLab, if you are on GitHub, note that this is a mirror from the GitLab repository, if you want to open an issue, PR/MR or contribute to the project, please visit:

    Why

    Babia components are a set of components for data visualization, there are components for visualize, query and filter data.

    This pack of components has the aim of visualize data in several ways. There are separated components and each one has an independent aim:

    • babiaxr-* visualize the data prepared by a vismapper in several ways (this type of components must have in the same entity than a vismapper)
    • babiaxr-querier_* the aim of just query data and save it in the entity that it has
    • babiaxr-filterdata filter the data saved by one of the queriers
    • babiaxr-ui for dynamically changing the metrics that are visualized in one chart using a user interface.
    • And more!

    For instance:

    <a-entity babiaxr-3dbarchart='legend: true; x_axis: name; z_axis: age; height: size;
        data:"[{"key":"David","key2":"2019","size":9},{"key":"David","key2":"2018","size":8},{"key":"David","key2":"2017","size":7},{"key":"David","key2":"2016","size":6},{"key":"David","key2":"2015","size":5},{"key":"Pete","key2":"2011","size":8},{"key":"Pete","key2":"2014","size":7},{"key":"Josh","key2":"2016","size":6},{"key":"Josh","key2":"2015","size":5},{"key":"Jesus","key2":"2016","size":9},{"key":"Jesus","key2":"2011","size":8},{"key":"Jesus","key2":"2014","size":7},{"key":"Jesus","key2":"2016","size":6},{"key":"Jesus","key2":"2015","size":5},{"key":"Jesus","key2":"2016","size":9},{"key":"Steve","key2":"2016","size":9},{"key":"Steve","key2":"2017","size":8},{"key":"Steve","key2":"2014","size":7},{"key":"Steve","key2":"2013","size":6},{"key":"Moreno","key2":"2015","size":5},{"key":"Jesus","key2":"2019","size":10},{"key":"Pete","key2":"2019","size":10}]"' 
    position="-10 0 0" rotation="0 0 0"></a-entity>

    For using the querier/filters/mappers components (see HOW_TO_CHARTS_WITH_QUERIER.md)

    <a-entity id="queriertest" babiaxr-querier_json="url: ./data.json;"></a-entity>
    <a-entity babiaxr-3dbarchart='from: queriertest; x_axis: name; z_axis: age; height: size; legend: true' position="-10 0 0" rotation="0 0 0"></a-entity>

    Usage

    Browser Installation

    Install and use by directly including the browser files:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>A-Frame Babia components</title>
        <script src="https://aframe.io/releases/1.0.1/aframe.min.js"></script>
        <script src="https://unpkg.com/aframe-babia-components/dist/aframe-babia-components.min.js"></script>
    </head>
    
    <body>
    
        <a-scene background="color: #A8F3FF" id="AframeScene">
            
            <a-entity babiaxr-3dbarchart='legend: true; 
                data:"[{"key":"David","key2":"2019","size":9},{"key":"David","key2":"2018","size":8},{"key":"David","key2":"2017","size":7},{"key":"David","key2":"2016","size":6},{"key":"David","key2":"2015","size":5},{"key":"Pete","key2":"2011","size":8},{"key":"Pete","key2":"2014","size":7},{"key":"Josh","key2":"2016","size":6},{"key":"Josh","key2":"2015","size":5},{"key":"Jesus","key2":"2016","size":9},{"key":"Jesus","key2":"2011","size":8},{"key":"Jesus","key2":"2014","size":7},{"key":"Jesus","key2":"2016","size":6},{"key":"Jesus","key2":"2015","size":5},{"key":"Jesus","key2":"2016","size":9},{"key":"Steve","key2":"2016","size":9},{"key":"Steve","key2":"2017","size":8},{"key":"Steve","key2":"2014","size":7},{"key":"Steve","key2":"2013","size":6},{"key":"Moreno","key2":"2015","size":5},{"key":"Jesus","key2":"2019","size":10},{"key":"Pete","key2":"2019","size":10}]"' 
            position="-10 0 0" rotation="0 0 0"></a-entity>
    
            <a-entity id="queriertest" babiaxr-querier_json="url: ./data.json;"></a-entity>
            <a-entity babiaxr-3dbarchart='from: queriertest; x_axis: name; z_axis: age; height: size; radius: size; legend: true' position="-10 0 0" rotation="0 0 0"></a-entity>
    
            <a-entity camera position="0 0 0" look-controls></a-entity>
            
        </a-scene>
    </body>

    NPM Installation

    Install via NPM:

    npm i aframe-babia-components
    

    Then require and use.

    require('aframe');
    require('aframe-babia-components');
    
    // or
    
    import 'aframe'
    import 'aframe-babia-components'

    How to use this components

    The first step is to follow the Getting started guide, you can find it here.

    Once finished, you can follow the other tutorials on the main page!

    Building and Running BabiaXR, and/or Contributing Code

    You might want to build BabiaXR locally to contribute some code, test out the latest features, or try out an open PR:

    Querier components API

    Queriers are the components that query data from different data sources.

    Go here to see the queriers API.

    Data management components API

    Data management components includes components for filtering data, transform data into a tree formar and others.

    Go here to see the queriers API.

    Charts components API

    Charts included:

    • Pie
    • Doughnut
    • 2D/3D bars
    • 2D/3D cylinders
    • Bubbles
    • Terrain

    Go here to see the charts API.

    Cities and Boats components API

    API for the city and boats visualizers components.

    Go here to see the cities and boats API.

    Other components API

    Other components:

    • UI (for changing metrics dynamically)
    • lookat component ...

    Go here to see the other components API.

    Data model

    The dataset returned from the parsing of the babia-query* components must follow this model:

    [
        {
            "metric": value0,
            "metric2": value13,
            "key": value,
            ...
        },
        {
            "metric": value2,
            "metric2": value4
            "key": value1,
            ...
    
        },
        ...
    ]
    
    

    Examples available at the "examples folder" and here

    Install

    npm i aframe-babia-components

    DownloadsWeekly Downloads

    58

    Version

    1.1.4

    License

    GPL-3.0

    Unpacked Size

    214 MB

    Total Files

    488

    Last publish

    Collaborators

    • avatar
    • avatar