Angular Polar Map Example

1import {
2    NumberRange,
3    XyDataSeries,
4    ETriangleSeriesDrawMode,
5    PolarPanModifier,
6    PolarZoomExtentsModifier,
7    PolarMouseWheelZoomModifier,
8    PolarTriangleRenderableSeries,
9    PolarNumericAxis,
10    EPolarAxisMode,
11    EAxisAlignment,
12    SciChartPolarSurface,
13} from "scichart";
14
15import constrainedDelaunayTriangulation from "./constrainedDelaunayTriangulation";
16import { appTheme } from "../../../theme";
17
18export const drawExample = async (rootElement: string | HTMLDivElement) => {
19    // Create a SciChartSurface
20    const { wasmContext, sciChartSurface } = await SciChartPolarSurface.create(rootElement);
21
22    sciChartSurface.debugRendering = false;
23
24    let showFromSouthPole = false;
25
26    const setView = (positionFromSPole: boolean) => {
27        showFromSouthPole = positionFromSPole;
28
29        sciChartSurface.xAxes.clear();
30        sciChartSurface.yAxes.clear();
31        sciChartSurface.renderableSeries.clear(true);
32
33        const xAxis = new PolarNumericAxis(wasmContext, {
34            polarAxisMode: EPolarAxisMode.Angular,
35            visibleRange: new NumberRange(-180, 180), // longitude
36            flippedCoordinates: showFromSouthPole ? true : false,
37            axisAlignment: EAxisAlignment.Bottom,
38            useNativeText: true,
39            drawMajorBands: false,
40            drawMajorGridLines: false,
41            drawMajorTickLines: false,
42            drawMinorGridLines: false,
43            drawMinorTickLines: false,
44            labelPrecision: 0,
45        });
46        sciChartSurface.xAxes.add(xAxis);
47
48        const yAxis = new PolarNumericAxis(wasmContext, {
49            polarAxisMode: EPolarAxisMode.Radial,
50            visibleRange: new NumberRange(-90, 90), // latitude
51            axisAlignment: EAxisAlignment.Left,
52            flippedCoordinates: showFromSouthPole ? false : true,
53            useNativeText: true,
54            drawMajorBands: false,
55            drawMajorGridLines: false,
56            drawMajorTickLines: false,
57            drawMinorGridLines: false,
58            drawMinorTickLines: false,
59            labelPrecision: 0,
60        });
61        sciChartSurface.yAxes.add(yAxis);
62    };
63
64    setView(true);
65
66    const [min, max] = [140, 1379302771]; // population min max
67
68    function interpolateColor(min: number, max: number, value: number) {
69        // Clamp value between min and max
70        value = Math.max(min, Math.min(max, value));
71        // Normalize to [0,1]
72        let t = (value - min) / (max - min);
73
74        // Parse hex colors to RGB
75        function hexToRgb(hex: string) {
76            hex = hex.replace(/^#/, "");
77            if (hex.length === 3)
78                hex = hex
79                    .split("")
80                    .map((x) => x + x)
81                    .join("");
82            const num = parseInt(hex, 16);
83            return [num >> 16, (num >> 8) & 255, num & 255];
84        }
85
86        // Interpolate between two RGB colors
87        function lerp(a: number, b: number, t: number) {
88            return Math.round(a + (b - a) * t);
89        }
90
91        // The low end of the scale has to contrast with the chart background. White reads well on the
92        // dark themes but vanishes into the light one, so start from a pale blue there instead.
93        const colorA = hexToRgb(appTheme.isDark ? "#ffffff" : "#c3cfe8");
94        const colorB = hexToRgb("#1e3489");
95        const r = lerp(colorA[0], colorB[0], t);
96        const g = lerp(colorA[1], colorB[1], t);
97        const b = lerp(colorA[2], colorB[2], t);
98
99        // Convert back to hex
100        return "#" + [r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("");
101    }
102
103    let dataArray: { name: string; gdp: number; population: number; areaData: number[][] }[] = [];
104
105    const setMapJson = (mapData: { features: any[] }) => {
106        dataArray = [];
107
108        mapData?.features.forEach((state, i) => {
109            if (state.geometry.type === "Polygon") {
110                let area = state.geometry.coordinates[0];
111                area.pop();
112                let areaData = [].concat(...constrainedDelaunayTriangulation(area));
113
114                dataArray.push({
115                    name: state.properties.NAME,
116                    gdp: +state.properties.GDP_MD_EST,
117                    population: +state.properties.POP_EST,
118                    areaData,
119                });
120            } else {
121                let polyArea = state.geometry.coordinates;
122
123                if (state.properties.SOVEREIGNT === "Antarctica" && showFromSouthPole === false) {
124                    return;
125                }
126
127                polyArea.forEach((a: any[]) => {
128                    let area = a[0];
129
130                    area.pop();
131                    let areaData = [].concat(...constrainedDelaunayTriangulation(area));
132
133                    dataArray.push({
134                        name: state.properties.NAME,
135                        gdp: +state.properties.GDP_MD_EST,
136                        population: +state.properties.POP_EST,
137                        areaData,
138                    });
139                });
140            }
141        });
142    };
143
144    const setMap = () => {
145        sciChartSurface.renderableSeries.clear(true);
146
147        const series = dataArray.map((d, i) => {
148            const dataSeries = new XyDataSeries(wasmContext, {
149                xValues: d.areaData.map((p) => p[0]),
150                yValues: d.areaData.map((p) => p[1]),
151            });
152
153            const triangleSeries = new PolarTriangleRenderableSeries(wasmContext, {
154                dataSeries: dataSeries,
155                drawMode: ETriangleSeriesDrawMode.List,
156                fill: interpolateColor(min, max, d.population),
157                opacity: 0.9,
158            });
159
160            return triangleSeries;
161        });
162
163        sciChartSurface.renderableSeries.add(...series);
164    };
165
166    sciChartSurface.chartModifiers.add(new PolarPanModifier());
167    sciChartSurface.chartModifiers.add(new PolarZoomExtentsModifier());
168    sciChartSurface.chartModifiers.add(new PolarMouseWheelZoomModifier());
169    return { sciChartSurface, wasmContext, setMapJson, setMap, setView };
170};
171