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