Charts components API

Chart components API

The installation contains the following components:

babia-pie component

This component shows a pie chart.

API

Data format example

[{"key":"kbn_network","size":10},
{"key":"Maria","size":5},
...
]

babia-doughnut component

This component shows a doughnut chart.

API

Data format example

[{"key":"kbn_network","size":10},
{"key":"Maria","size":5},
...
]

babia-bars component

This component shows a simple 2D bar chart.

API

Data format example

[{"x_axis":"kbn_network","height":10},
{"x_axis":"Maria","height":5},
...
]

babia-barsmap component

This component shows a bars map.

API

Data format example

[{"x_axis":"David","z_axis":"2019","height":9},
{"x_axis":"David","z_axis":"2018","height":8},
...
]

babia-bubbles component

This component shows a 3D Bubbles chart.

API

Data format example

[{"x_axis":"David","z_axis":"2019","height":1,"radius":9},
{"x_axis":"David","z_axis":"2018","height":2,"radius":8},
...
]

babia-cyls component

This component shows a cylinder chart.

API

Data format example

[{"key":"David","height":9,"radius":1},
{"key":"David","height":8,"radius":3},
...
]

babia-cylsmap component

This component shows a 3D cylinder chart.

API

Data format example

[{"key":"David","key2":"2019","height":1,"radius":9},
{"key":"David","key2":"2018","height":2,"radius":8},
...
]

babia-city component

This component shows a city chart.

API

Data format example

{"id": "Root",
         "children":
          [{"id": "BlockA",
            "children": [{"id": "BlockA0",
                      "children": [{"id": "A0A", "area": 2, "height": 1}, ...]},
...

babia-boats component

This component shows a city in boats.

API

Data format example

{"id": "Root",
         "children":
          [{"id": "BlockA",
            "children": [{"id": "BlockA0",
                      "children": [{"id": "A0A", "area": 2, "height": 1}, ...]},
...

babia-terrain Component

This component creates a terrain using vertices data.

API

Data Format

Data length must be the same as the vertices = segmentsWidth x segmentsHeight.

data:   0, 3, 6, 3, 0, 0, 2, 4, 2,
        0, 2, 0, 0, 2, 4, 6, 4, 2,

        ...

        0, 2, 0, 0, 2, 4, 6, 4, 2,
        0, 3, 6, 3, 0, 0, 2, 4, 2

COLOR PALETTES

FONTS

The title of the chart uses typeface.json files, which are Web Fonts converted to JSON for three.js. Typeface fonts can be generated from fonts using this typeface font generator. Select JSON format and we recommend restricting the character set to only the characters you need. You may also have to check reverse font direction if you get odd font results.

You can also find some sample generated fonts in the examples/fonts directory in the three.js repository.

By default, the text geometry component points to Helvetiker (Regular). Each font is fairly large, from at least 60KB to hundreds of KBs.

To include a font for use with the text component, it is recommended to define it in <a-asset-item> and point at it with a selector.

babia-network component

This component shows a network chart.

API

Data format example

• First option: data

  [ {"country": "Italy", "continent": "Europe", "size": 301300},
    {"country": "China", "continent": "Asia", "size": 9600000},
    {"country": "Spain", "continent": "Europe", "size": 505400},
    {"country": "India", "continent": "Asia", "size": 3290000}
  ...
  ]
  
  

  In this case, linkID could be defined as continent, and a link would be created between the countries with equal continent. The result will be the same as getting the data separared in nodes and links as follows.

• Second option: nodes and links

  nodes

  [ {"country": "Italy", "continent": "Europe", "size": 301300},
    {"country": "China", "continent": "Asia", "size": 9600000},
    {"country": "Spain", "continent": "Europe", "size": 505400},
    {"country": "India", "continent": "Asia", "size": 3290000}
  ...
  ]
  
  

  links

  [ {"id": 1, "source": "Italy", "target": "Spain"},
    {"id": 2, "source": "China", "target": "India"},
  ...
  ]
  
  

Original Component

This component is based on the aframe-forcegraph-component by vasturiano.

It accepts the following properties defined in the original component: numDimensions, dagMode, dagLevelDistance, dagNodeFilter, onDagError, nodeResolution, nodeVisibility, nodeOpacity, nodeThreeObject, nodeThreeObjectExtend, linkVisibility, linkOpacity, linkCurvature, linkCurveRotation, linkMaterial, linkThreeObject, linkThreeObjectExtend, linkPositionUpdate, linkDirectionalArrowLength, linkDirectionalArrowColor, linkDirectionalArrowRelPos, linkDirectionalArrowResolution, linkDirectionalParticles, linkDirectionalParticleSpeed, linkDirectionalParticleWidth, linkDirectionalParticleColor, linkDirectionalParticleResolution, forceEngine, d3AlphaMin, d3AphaDecay, d3VelocityDecay, ngraphPhysics, warmupTicks, cooldownTicks, cooldownTime, onEngineTick, onEngineStop. To know more or to access all the information related to the original component visit https://github.com/vasturiano/aframe-forcegraph-component