Tenor Curves Demo

Tenor Curves 3D JavaScript

Overview

The Tenor Curves 3D example demonstrates how to create an interactive 3D chart alongside complementary 2D line charts and a heatmap legend using SciChart.js in a JavaScript environment. This example leverages advanced WebGL rendering to display a 3D surface mesh, while also showcasing dynamic data visualizations and custom heatmap legend configurations.

Technical Implementation

The implementation begins by creating a 3D chart with SciChart3DSurface. A CameraController is used to set the camera position and target, enabling an interactive viewing experience. Interaction modifiers such as OrbitModifier3D and MouseWheelZoomModifier3D are added to facilitate smooth navigation within the 3D scene. Data is generated dynamically by computing a parabola function and adjusting parameters using a switch-case statement. A helper function, which utilizes zeroArray2D to initialize a 2D array, is used to provide dummy data for the UniformGridDataSeries3D. For performance optimization when working with large datasets, refer to the Performance Tips & Tricks.

Features and Capabilities

This example highlights several advanced features:

• A high-performance 3D interactive chart combining a surface mesh with a dynamic color mapping implemented via a GradientColorPalette.
• Two distinct 2D line charts that demonstrate different methods of data slicing and aggregation.
• A custom heatmap legend configured to reflect the height map interpolation, as detailed in Applying Palettes to Surface Meshes.

Integration and Best Practices

The example is structured to integrate multiple chart types within a single layout, with the 3D surface mesh, heatmap legend, and 2D line charts arranged in a responsive design. Although implemented in JavaScript, the same techniques can be adapted for frameworks like React or Angular. The use of control flow (via switch-case statements) for dynamic data generation and the optimization strategies provided in the WebGL Performance Optimization guide ensure smooth rendering and interactive performance. For further integration details and best practices, developers are encouraged to review the SciChart.js JavaScript Charts User Manual.