SciChart.js - High Performance Realtime Javascript Charts Examples Suite

JavaScript 3D Bubble Chart

Demonstrates how to create a JavaScript 3D Bubble Chart using SciChart.js, High Performance JavaScript 3D Charts

Source Code

View on GitHub
import * as React from "react";
import { CameraController } from "scichart/Charting3D/CameraController";
import { MouseWheelZoomModifier3D } from "scichart/Charting3D/ChartModifiers/MouseWheelZoomModifier3D";
import { OrbitModifier3D } from "scichart/Charting3D/ChartModifiers/OrbitModifier3D";
import { XyzDataSeries3D } from "scichart/Charting3D/Model/DataSeries/XyzDataSeries3D";
import { Vector3 } from "scichart/Charting3D/Vector3";
import { NumericAxis3D } from "scichart/Charting3D/Visuals/Axis/NumericAxis3D";
import { SpherePointMarker3D } from "scichart/Charting3D/Visuals/PointMarkers/DefaultPointMarkers";
import { ScatterRenderableSeries3D } from "scichart/Charting3D/Visuals/RenderableSeries/ScatterRenderableSeries3D";
import { SciChart3DSurface } from "scichart/Charting3D/Visuals/SciChart3DSurface";
import { TSciChart3D } from "scichart/types/TSciChart3D";
import { SciChartSurface } from "scichart";

const divElementId = "chart";

// SCICHART CODE
const drawExample = async () => {
    const { sciChart3DSurface, wasmContext } = await SciChart3DSurface.create(divElementId);
    sciChart3DSurface.camera = new CameraController(wasmContext, {
        position: new Vector3(300, 300, 300),
        target: new Vector3(0, 50, 0),
    });

    sciChart3DSurface.chartModifiers.add(new MouseWheelZoomModifier3D());
    sciChart3DSurface.chartModifiers.add(new OrbitModifier3D());

    sciChart3DSurface.xAxis = new NumericAxis3D(wasmContext, { axisTitle: "X Axis" });
    sciChart3DSurface.yAxis = new NumericAxis3D(wasmContext, { axisTitle: "Y Axis" });
    sciChart3DSurface.zAxis = new NumericAxis3D(wasmContext, { axisTitle: "Z Axis" });

    const defaultPointMarker = new SpherePointMarker3D(wasmContext, { size: 10, fill: "#00FF00" });
    const series = new ScatterRenderableSeries3D(wasmContext, { pointMarker: defaultPointMarker });

    series.dataSeries = getData(wasmContext);
    sciChart3DSurface.renderableSeries.add(series);

    return { sciChart3DSurface, wasmContext };
};

// HELPER FUNCTIONS FOR DATA GENERATION
function getData(wasmContext: TSciChart3D) {
    const xyzDataSeries = new XyzDataSeries3D(wasmContext);
    const count = 250;
    for (let i = 0; i < count; i++) {
        const x = getGaussianRandom(150, 40);
        const y = getGaussianRandom(100, 20);
        const z = getGaussianRandom(150, 40);

        const scale = (Math.random() + 0.5) * 0.5;
        const randomColor = Math.floor(Math.random() * 16777215);

        // To declare scale and colour, add an optional PointMetadata3D type as the w (fourth) parameter.
        // The PointMetadata3D type also has other properties defining the behaviour of the XYZ point
        xyzDataSeries.append(x, y, z, { vertexColorAbgr: randomColor, pointScale: scale });
    }

    return xyzDataSeries;
}

function getGaussianRandom(mean: number, stdDev: number): number {
    const u1 = Math.random(); // these are uniform(0,1) random doubles
    const u2 = Math.random();
    // random normal(0,1)
    const randStdNormal = Math.sqrt(-2 * Math.log(u1)) * Math.sin(2 * Math.PI * u2);
    // random normal(mean, stddev^2)
    return mean + stdDev * randStdNormal;
}

// REACT COMPONENT
export default function Bubble3DChart() {
    const [sciChartSurface, setSciChartSurface] = React.useState<SciChart3DSurface>();

    React.useEffect(() => {
        (async () => {
            const res = await drawExample();
            setSciChartSurface(res.sciChart3DSurface);
        })();
        // Delete sciChartSurface on unmount component to prevent memory leak
        return () => sciChartSurface?.delete();
    }, []);

    return <div id={divElementId} style={{ maxWidth: 900 }} />;
}

Description

Demonstrates how to create a JavaScript 3D Surface Mesh Chart. This is a chart type which draws a 3D point-marker (Sphere, Cylinder, Cube) or a 2D flat billboarded pointmarker (Ellipse, Quad, Pixel) at X,Y,Z locations in 3D Space.

Tips!

Bubbles can be colored individually, programmatically selected and scaled using the PointMetadata3D class. PointMetadata also allows you to tag individual bubbles with a business object of any type.

Documentation Links

See Also

SciChart: Fast, Realtime, High Performance JavaScript Charts Examples Suite. Sitemap