JavaScript Choropleth Map Example

1import {
2    ZoomExtentsModifier,
3    ZoomPanModifier,
4    NumericAxis,
5    SciChartSurface,
6    NumberRange,
7    XyDataSeries,
8    ETriangleSeriesDrawMode,
9    FastTriangleRenderableSeries,
10    MouseWheelZoomModifier,
11    FastBubbleRenderableSeries,
12    EllipsePointMarker,
13    XyzDataSeries,
14    IPointMetadata,
15    EHorizontalTextPosition,
16    Thickness,
17    EVerticalTextPosition,
18    FastLineRenderableSeries,
19} from "scichart";
20
21import { appTheme } from "../../../theme";
22
23import {
24    getMinMax,
25    interpolateColor,
26    keyData,
27    australiaData,
28    preserveAspectRatio,
29} from "./helpers";
30
31import { australianCities } from "./australiaData";
32
33type Keytype = "population" | "population_density" | "area_km2";
34
35const dataArray: { name: string; areaData: number[][] }[] = [];
36const outlines: number[][][] = [];
37
38function setMapJson(mapJson: any) {
39    dataArray.length = 0;
40    outlines.length = 0;
41    mapJson.forEach((d: any) => {
42        outlines.push(d.outline);
43        dataArray.push({ name: d.name, areaData: d.areaData });
44    });
45}
46
47export const drawExample = async (rootElement: string | HTMLDivElement) => {
48    // Create a SciChartSurface
49    const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement, {
50        theme: appTheme.SciChartJsTheme,
51    });
52
53    const growBy = new NumberRange(0.1, 0.1);
54
55    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { growBy, isVisible: true }));
56    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy, isVisible: true }));
57
58    const xAxis = sciChartSurface.xAxes.get(0);
59    const yAxis = sciChartSurface.yAxes.get(0);
60
61    let firstTime = true;
62
63    const setMap = (key: Keytype) => {
64        sciChartSurface.renderableSeries.clear(true);
65
66        const [min, max] = getMinMax(key, australiaData);
67
68        const series = dataArray.map((d, i) => {
69            const dataSeries = new XyDataSeries(wasmContext, {
70                xValues: d.areaData.map((p) => p[0]),
71                yValues: d.areaData.map((p) => p[1]),
72            });
73
74            const triangleSeries = new FastTriangleRenderableSeries(wasmContext, {
75                dataSeries: dataSeries,
76                drawMode: ETriangleSeriesDrawMode.List,
77                fill: interpolateColor(min, max, keyData[d.name][key]),
78                opacity: 0.9,
79            });
80
81            return triangleSeries;
82        });
83
84        sciChartSurface.renderableSeries.add(...series);
85
86        // outline
87        const outlinesSC = outlines.map((outline) => {
88            const xVals = outline.map((d) => d[0]);
89            const yVals = outline.map((d) => d[1]);
90
91            //FastMountainRenderableSeries
92            const lineSeries = new FastLineRenderableSeries(wasmContext, {
93                dataSeries: new XyDataSeries(wasmContext, {
94                    xValues: xVals,
95                    yValues: yVals,
96                }),
97                stroke: "#FFFFFF",
98                strokeThickness: 1,
99                opacity: 1,
100            });
101
102            return lineSeries;
103        });
104
105        sciChartSurface.renderableSeries.add(...outlinesSC);
106
107        // cities
108        const cLongitude = australianCities.map((d) => d.longitude);
109        const clatitude = australianCities.map((d) => d.latitude);
110        const cSize = australianCities.map((d) => 5);
111        const cMetadata = australianCities.map((d) => d) as unknown as IPointMetadata[];
112
113        const citiesSeries = new FastBubbleRenderableSeries(wasmContext, {
114            pointMarker: new EllipsePointMarker(wasmContext, {
115                width: 64,
116                height: 64,
117                fill: appTheme.ForegroundColor,
118                strokeThickness: 0,
119            }),
120            dataSeries: new XyzDataSeries(wasmContext, {
121                xValues: cLongitude,
122                yValues: clatitude,
123                zValues: cSize,
124                metadata: cMetadata,
125            }),
126            dataLabels: {
127                verticalTextPosition: EVerticalTextPosition.Above,
128                horizontalTextPosition: EHorizontalTextPosition.Right,
129                style: {
130                    fontFamily: "Arial",
131                    fontSize: 14,
132                    padding: new Thickness(0, 0, 3, 3),
133                },
134                color: appTheme.TextColor,
135                metaDataSelector: (md) => {
136                    const metadata = md as unknown as { name: string };
137                    return metadata.name.toString();
138                },
139            },
140        });
141        sciChartSurface.renderableSeries.add(citiesSeries);
142
143        if (firstTime) {
144            sciChartSurface.zoomExtents();
145            firstTime = false;
146        }
147    };
148
149    sciChartSurface.preRender.subscribe(() => {
150        const result = preserveAspectRatio(
151            sciChartSurface.viewRect.width,
152            sciChartSurface.viewRect.height,
153            xAxis.visibleRange.min,
154            xAxis.visibleRange.max,
155            yAxis.visibleRange.min,
156            yAxis.visibleRange.max
157        );
158
159        xAxis.visibleRange = new NumberRange(result.minVisibleX, result.maxVisibleX);
160        yAxis.visibleRange = new NumberRange(result.minVisibleY, result.maxVisibleY);
161    });
162
163    // Add zoom/pan controls
164    sciChartSurface.chartModifiers.add(
165        new ZoomExtentsModifier(),
166        new ZoomPanModifier({ enableZoom: true }),
167        new MouseWheelZoomModifier()
168    );
169
170    return { wasmContext, sciChartSurface, setMap, setMapJson };
171};
172