JavaScript 3D Log-Log Scatter Chart

1import { appTheme } from "../../../theme";
2import {
3    SciChart3DSurface,
4    CameraController,
5    Vector3,
6    MouseWheelZoomModifier3D,
7    OrbitModifier3D,
8    ResetCamera3DModifier,
9    NumericAxis3D,
10    LogarithmicAxis3D,
11    NumberRange,
12    ScatterRenderableSeries3D,
13    XyzDataSeries3D,
14    SpherePointMarker3D,
15} from "scichart";
16
17const SENSOR_COUNT = 8;
18const POINTS_PER_SENSOR = 200;
19
20const createSensorData = (sensor: number): { xValues: number[]; yValues: number[]; zValues: number[] } => {
21    const xValues: number[] = new Array(POINTS_PER_SENSOR);
22    const yValues: number[] = new Array(POINTS_PER_SENSOR);
23    const zValues: number[] = new Array(POINTS_PER_SENSOR);
24
25    const alpha = 0.4 + sensor * 0.18;
26    const amplitude = 5e4 / (sensor + 1);
27
28    for (let i = 0; i < POINTS_PER_SENSOR; i++) {
29        const logFreq = (i / (POINTS_PER_SENSOR - 1)) * 5 + (Math.random() - 0.5) * 0.06;
30        const freq = Math.pow(10, logFreq);
31        const noise = 0.7 + Math.random() * 0.6;
32        const psd = Math.max(amplitude * Math.pow(freq, -alpha) * noise, 1e-6);
33        xValues[i] = freq;
34        yValues[i] = psd;
35        zValues[i] = sensor;
36    }
37    return { xValues, yValues, zValues };
38};
39
40const sensorColor = (sensor: number): string => {
41    const t = sensor / (SENSOR_COUNT - 1);
42    const r = Math.round(20 + t * 230);
43    const g = Math.round(180 - t * 120);
44    const b = Math.round(255 - t * 210);
45    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
46};
47
48export const X_RANGE_LOG = new NumberRange(1, 1e5);
49export const X_RANGE_LINEAR = new NumberRange(0, 1e5);
50export const Y_RANGE_LOG = new NumberRange(1e-4, 1e5);
51export const Y_RANGE_LINEAR = new NumberRange(0, 1e5);
52
53export const drawExample = async (rootElement: string | HTMLDivElement) => {
54    const { sciChart3DSurface, wasmContext } = await SciChart3DSurface.create(rootElement, {
55        theme: appTheme.SciChartJsTheme,
56    });
57
58    sciChart3DSurface.camera = new CameraController(wasmContext, {
59        position: new Vector3(-300, 220, -280),
60        target: new Vector3(0, 50, 0),
61    });
62
63    sciChart3DSurface.chartModifiers.add(
64        new MouseWheelZoomModifier3D(),
65        new OrbitModifier3D(),
66        new ResetCamera3DModifier()
67    );
68
69    sciChart3DSurface.xAxis = new LogarithmicAxis3D(wasmContext, {
70        axisTitle: "Frequency (Hz)",
71        logBase: 10,
72        visibleRange: X_RANGE_LOG,
73    });
74
75    sciChart3DSurface.yAxis = new LogarithmicAxis3D(wasmContext, {
76        axisTitle: "PSD (V²/Hz)",
77        logBase: 10,
78        visibleRange: Y_RANGE_LOG,
79    });
80
81    sciChart3DSurface.zAxis = new NumericAxis3D(wasmContext, {
82        axisTitle: "Sensor",
83        visibleRange: new NumberRange(-0.5, SENSOR_COUNT - 0.5),
84    });
85
86    for (let s = 0; s < SENSOR_COUNT; s++) {
87        const { xValues, yValues, zValues } = createSensorData(s);
88        const dataSeries = new XyzDataSeries3D(wasmContext, {
89            xValues,
90            yValues,
91            zValues,
92            dataSeriesName: `Sensor ${s + 1}`,
93        });
94        const scatter = new ScatterRenderableSeries3D(wasmContext, {
95            dataSeries,
96            pointMarker: new SpherePointMarker3D(wasmContext, { size: 5, fill: sensorColor(s) }),
97            opacity: 0.85,
98        });
99        sciChart3DSurface.renderableSeries.add(scatter);
100    }
101
102    return { sciChartSurface: sciChart3DSurface, wasmContext };
103};
104