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