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