A WebGL 3D, VR/AR Data-cluster component

We wanted to create a multi-use 3D dataviz component for use in browser-based or VR/AR/XR contexts. With a Svelte backbone and a combination of the the 3D javascript library Three JS and the VR/AR/XR library Aframe, the component should be adaptable to a number of presentations.

Rows and columns

Most data visualizations begin with row and column data of the type captured by spreadsheets or CSV (comma-separated-values) files. Usually with visualizations row values are subject to some kind of statistical process, such as averaging or aggregating by groups (large, small, medium etc.). In this sense data resolution is inevitably lost and the correlation between the eventual lines, bars, slices etc. and the original data obscured.

One way to avoid this compression (and that vague sense that some manipulation just might be going on) is to use the rows of the spreadsheet as their own markers, making them individual components of the dataviz.

In the demo below you can see two such data clusters demonstrated, the first a bar chart formed with row markers (this form is known as a ‘waffle’ chart), the second a 3D chart where the axes are selected fields/columns of the dataset. By extending the data presentation into a third axis (the last our limited vision allows, alas) we can see other correlations in the data.

You can see a user interface with dropdowns in the video. This is mirrored for debug purposes. In VR this GUI would be in the virtual space.

Things to note:

For the bar chart:

• By colouring the row markers by group we can see the size of sub-groups.
• Grouping by sex, survived and pclass (passenger class) shows a number of facts:
  • the largest passenger group were third class men.
  • most of the passengers were male.
  • passenger class was a big factor in whether you lived or died.
  • far more 3rd class passengers died than 1st class.
  • more men than women died proportionately.

By transitioning to the 3D (XYZ) cluster we can see some new correlations in the data:

• there was a family of eight among the third class passengers (sibling/spouse).
• this family ranged in age from ~1 to 20, presumably a young couple with children.
• the oldest passengers were in their seventies (age).

This prototyped component enables exploration/visualization using bar (waffle) charts and 3D clusters. With the basic idea in place we can start adding new reflections of the data, showing such things as time-series and mapped data while abiding by the principle that each row should be its own visual marker.

You can see this component extended to an election dataset here.