tessrux / webar-stock-dataviz Goto Github PK

A 3D Stock Data Visualization in Augmented Reality on the Web!

This project was made to experiment with A-Frame's new AR mode in Chrome via the WebXR Device API.

Try out the demo here: https://webar-stock-dataviz.netlify.com/

You will need to enable the following experimental chrome flags (currently supported on ARCore-compatible Android devices in Chrome 79 or later):

• WebXR Device API
• WebXR AR Module
• WebXR AR DOM Overlay

For proper development environment setup, please check out the companion article on Medium.

I will be releasing a second article soon giving a detailed runthrough of how the project was made.

• index.html - 3D Scene with A-Frame and Stock Data Search Menu
• style.css - CSS styles for all 2D DOM components and AR mode configurations
• sceneData.js - Functions for data retrieval and creation of scene from data
• dataPoints.js - Functions for creation of entities used to visualize retrieved data points
• aframeComponents.js - Components for initialization and updates of entities used in the scene

To retrieve live stock data, you will need an IEXCloud API Key. You can create an account with their free tier here that includes up to 50,000 messages (data points) per month.

I have included test stock data that you can use prior to gaining an API Key.

In this project, I have limited the request ranges to 5 days and 1 month to not use up the free tier limit too quickly. If you would like to retrieve larger ranges, check out the IEXCloud API documentation for historical price data parameters.

If you have any questions regarding the project or need help setting it up, feel free to reach out to me on twitter (@tessrUX). Cheers!