Air Quality Route Visualization Dashboard - Editor

3d xy gauge pie date-time line point image

This example is a multi-chart LightningChart JS dashboard visualizing PM2.5 concentration along a driving route in Dublin, Ireland. PM2.5 refers to particulate matter 2.5 µm or less in diameter. These microscopic pollutants can penetrate deep into the body and cause severe heart and lung diseases.

The 3D chart plots PM2.5 over longitude and latitude along the route, while the XY chart shows mobile sensor measurement locations on a map.

The first two Gauge charts display the average and peak PM2.5 values relative to WHO guideline limits (5 µg/m³ yearly, 15 µg/m³ daily). The Pie chart shows the proportion of time spent above the 15 µg/m³ threshold. The third Gauge chart shows the cumulative time above threshold.

The 3D and XY chart use a shared data set:

const dataSet = new DataSet({
    schema: {
        x: { pattern: null },
        y: { pattern: null },
        PM25_ugm3: { pattern: null },
        time: { pattern: 'progressive' },
        distance: { pattern: 'progressive' },
        value: { pattern: null },
        pointSize: { pattern: null }
    }
})
dataSet.setMaxSampleCount(500_000)

series3D.setDataSet(dataSet, { x: 'x', y: 'PM25_ugm3', z: 'y', time: 'time', distance: 'distance' })
series2D.setDataSet(dataSet, { x: 'x', y: 'y', size: 'pointSize', lookupValue:'value' })

Data: Google Project Air View
Map: OpenStreetMap
WHO PM2.5 guideline reference: WHO Global Air Quality Guidelines (PDF)

The visualized data segment represents a 47-minute, 25 km route driven on 26 May 2021, with 2847 total samples. Pollutant values were sampled at 1-second intervals, with linear interpolation applied where necessary and all interpolated readings explicitly marked in the visualization.