Case Study - Markets, all of them

Objective

TradingView, a leading platform for financial markets, sought an innovative way to visually represent the global markets available on their platform. They required an interactive 3D globe that would allow users to explore different markets with ease. The key constraints were maintaining a small bundle size and ensuring high performance, making it accessible even on devices with limited resources.

Challenges

1. No Third-Party Libraries: The project required the use of custom WebGL without relying on popular 3D libraries like Three.js or Babylon.js to minimize the bundle size.

2. Performance Optimization: Given the need for real-time interaction, the globe had to be highly performant, with smooth animations and rapid response times, even on lower-end devices.

3. Visual Representation: The globe needed to display markets as dots on the surface rather than using detailed continent shapes, balancing simplicity and clarity with performance.

4. Cross-Device Compatibility: The globe needed to function seamlessly across various devices, including desktops, tablets, and smartphones.

Solution

Custom WebGL Implementation

To meet the performance and size constraints, I opted for a fully custom WebGL implementation. This approach allowed for fine-grained control over every aspect of the 3D rendering process, from the creation of the globe mesh to the efficient handling of textures and lighting.

• Globe Mesh: The globe was created using a procedural mesh generation technique, with market locations represented as dots on the globe's surface. This approach ensured the globe was lightweight and visually focused on market data rather than geographical details.

• Textures and Shaders: Custom shaders were written to handle the rendering of the globe's surface and the highlighting of market locations as users interacted with it. The shaders efficiently managed illumination effects, ensuring a high-quality visual experience without increasing the bundle size.

• Interaction Model: Users can rotate the globe and interact with it by hovering over different regions. Hovering reveals additional information about specific markets, providing an intuitive way for users to explore the data.

Performance Optimization

• Efficient Data Management: Market data was dynamically loaded based on user interaction, avoiding the need to load all data at once. This approach reduced initial load times and minimized memory usage.

• Frame Rate Management: To maintain high performance, the application dynamically adjusted the rendering quality based on the device's capabilities, ensuring that users on less powerful devices still enjoyed a smooth experience.

• Minimizing Bundle Size: The final bundle size was only increased by 156 KB, which is significantly smaller than if a third-party library had been used. This was achieved through careful code management, optimization of assets, and exclusion of unnecessary features.

Results

The custom 3D globe was successfully integrated into the TradingView platform, meeting all the client's requirements. The solution provided users with an engaging and intuitive way to explore global markets, contributing to an enhanced user experience on the platform.

• Performance: The globe delivered smooth, real-time interactions across all supported devices, with no noticeable lag or stuttering.
• Bundle Size: At under 156 KB, the implementation was highly efficient, ensuring quick load times even on slower networks.
• User Engagement: The globe became a standout feature on the TradingView platform, attracting positive feedback from users for its ease of use and visual appeal.

Lessons Learned

Building a complex interactive graphic like this 3D globe without relying on libraries was both challenging and rewarding. It reinforced the importance of understanding the underlying technologies deeply and showcased the power of custom solutions in meeting specific performance and size constraints. This project also highlighted the need for close collaboration with design and product teams to ensure that technical decisions align with user experience goals.

Conclusion

The 3D globe project for TradingView demonstrated that with careful planning and technical expertise, it's possible to create high-performance, visually appealing, and lightweight web experiences. This project not only met the client's needs but also pushed the boundaries of what's possible on a marketing page.