3D Helix Candlestick Chart

This is an experiment in data immersion.

Financial data is usually visualized in 2D, which creates a distance between the human and the data. This experiment attempts to overcome that distance. It uses candlestick data and renders it as a 3D helix. The user is thrust into the center of the helix when the camera perspective is initiated, with market data enveloping them from all directions.

Parameters such as pitch, radius, and depth are adjustable. The third dimension is used not only for immersion but also to encode additional information. For example, trading volume is encoded in the logarithmically scaled thickness of the candles.

Please note that some of the features described in the following are only available in the full-screen UI of the helix experiment and not in the preview on the left.

The mouse, touch, or trackpad can be used to orbit and zoom in on the helix. Hovering over candles reveals more information in the top left corner of the screen.

The pitch setting can be combined with the data's time horizon useful ways. For example, combining a pitch of 12 with a time horizon of one year causes each full turn of the helix to correspond to one month.

To improve performance and save battery power, the scene is rendered only when the camera is used, a candle is hovered over, or new data is received, rather than being rendered in a constant animation loop, as in most Three.js examples.

Besides Svelte, the only dependency of this experiment is three.js.