JavaScript 3D Time Series

3d point date-time

This example uses pollution data from a London monitoring site to show how PM2.5 and NO₂ levels change over time. The PM2.5 levels are shown with a LUT-based paletted fill, and NO₂ markers progressively scale in size.
Together, these visual changes make it easy to perceive how shifts in one pollutant line up with those in the other, highlighting possible correlations.

The example also demonstrates proper configuration of a UTC DateTime axis in 3D charts.

In XY charts, it is enough just to set axis type as "linear-highPrecision" when using UTC timestamps. However, this feature is not supported by 3D charts.
Instead, "date time origin shift" approach has to be used. It means manually shifting timestamps data closer to 0. This is ultimately required due to low webgl number precision.

const dateOrigin = new Date(data[0].gps_timestamp) // usually can also be set to just new Date(), i.e. current date
const dateOriginTime = dateOrigin.getTime()
chart.axisX.setTickStrategy(AxisTickStrategies.DateTime, strategy => strategy
    .setDateOrigin(dateOrigin)
)

series.add(data.map(p => ({
  x: p.x - dateOriginTime,
  y: p.y,
  z: p.z
})))

The data used in this example: OpenAQ Air Quality Data
Location: Waterloo Place (The Crown Estate), London, UK
Time period: November 2–30, 2025