JavaScript 3D Bubble Chart

1import { appTheme } from "../../../theme";
2
3import {
4    SciChart3DSurface,
5    CameraController,
6    Vector3,
7    MouseWheelZoomModifier3D,
8    OrbitModifier3D,
9    ResetCamera3DModifier,
10    NumericAxis3D,
11    NumberRange,
12    ScatterRenderableSeries3D,
13    XyzDataSeries3D,
14    SpherePointMarker3D,
15    TGradientStop,
16    parseColorToUIntArgb,
17    TooltipModifier3D,
18    SeriesInfo3D,
19    TooltipSvgAnnotation3D,
20    XyzSeriesInfo3D,
21    IPointMetadata3D,
22} from "scichart";
23
24import {
25    fetchPopulationDataData,
26    TMappedPopulationData,
27    TPopulationMetadata,
28} from "../../../ExampleData/ExampleDataProvider";
29
30const initializeChart = async (rootElement: string | HTMLDivElement) => {
31    const { sciChart3DSurface, wasmContext } = await SciChart3DSurface.create(rootElement, {
32        theme: appTheme.SciChartJsTheme,
33    });
34    sciChart3DSurface.camera = new CameraController(wasmContext, {
35        position: new Vector3(-141.6, 310.29, 393.32),
36        target: new Vector3(0, 50, 0),
37    });
38
39    sciChart3DSurface.chartModifiers.add(
40        new MouseWheelZoomModifier3D(),
41        new OrbitModifier3D(),
42        new ResetCamera3DModifier()
43    );
44
45    const tooltipModifier = new TooltipModifier3D({ tooltipLegendOffsetX: 10, tooltipLegendOffsetY: 10 });
46    tooltipModifier.tooltipDataTemplate = (seriesInfo: SeriesInfo3D, svgAnnotation: TooltipSvgAnnotation3D) => {
47        const valuesWithLabels: string[] = [];
48        if (seriesInfo && seriesInfo.isHit) {
49            const md = (seriesInfo as XyzSeriesInfo3D).pointMetadata as TPopulationMetadata;
50            valuesWithLabels.push(md.country);
51            valuesWithLabels.push(`Life Expectancy: ${seriesInfo.xValue}`);
52            valuesWithLabels.push(`GDP Per Capita: ${seriesInfo.yValue}`);
53            valuesWithLabels.push(`Year: ${seriesInfo.zValue}`);
54        }
55        return valuesWithLabels;
56    };
57    const defaultTemplate = tooltipModifier.tooltipSvgTemplate;
58    tooltipModifier.tooltipSvgTemplate = (seriesInfo: SeriesInfo3D, svgAnnotation: TooltipSvgAnnotation3D) => {
59        if (seriesInfo) {
60            const md = (seriesInfo as XyzSeriesInfo3D).pointMetadata as TPopulationMetadata;
61            svgAnnotation.containerBackground = md.color;
62            svgAnnotation.textStroke = "white";
63        }
64        return defaultTemplate(seriesInfo, svgAnnotation);
65    };
66    sciChart3DSurface.chartModifiers.add(tooltipModifier);
67
68    sciChart3DSurface.xAxis = new NumericAxis3D(wasmContext, {
69        axisTitle: "Life Expectancy",
70        visibleRange: new NumberRange(30, 85),
71        labelPrecision: 0,
72    });
73    sciChart3DSurface.yAxis = new NumericAxis3D(wasmContext, {
74        axisTitle: "Gdp Per Capita",
75        visibleRange: new NumberRange(0, 50000),
76        labelPrecision: 0,
77    });
78    sciChart3DSurface.zAxis = new NumericAxis3D(wasmContext, {
79        axisTitle: "Year",
80        visibleRange: new NumberRange(1950, 2010),
81        labelPrecision: 0,
82    });
83
84    const renderableSeries = new ScatterRenderableSeries3D(wasmContext, {
85        pointMarker: new SpherePointMarker3D(wasmContext, { size: 10 }),
86        opacity: 0.9,
87        dataSeries: new XyzDataSeries3D(wasmContext),
88    });
89
90    sciChart3DSurface.renderableSeries.add(renderableSeries);
91
92    const setData = (data: TMappedPopulationData) => {
93        const { lifeExpectancy, gdpPerCapita, year, metadata } = data;
94
95        (renderableSeries.dataSeries as XyzDataSeries3D).appendRange(lifeExpectancy, gdpPerCapita, year, metadata);
96    };
97
98    return { sciChartSurface: sciChart3DSurface, setData };
99};
100
101export const drawExample = async (rootElement: string | HTMLDivElement) => {
102    const [chart, data] = await Promise.all([initializeChart(rootElement), fetchPopulationDataData()]);
103    chart.setData(data);
104
105    return chart;
106};
107